在接下来学习angularjs中，我按照的就是之前 学习笔记-AngularJs（一）所讲的目录来搭建一个学习的项目，做一个互联网大佬人物简介的例子，当然也可以使用angualrjs上面提供的官方例子，phonecat，其实大同小异，都是差不多的，可以用git下载下这个学习环境 git clone https://github.com/angular/angular-phonecat ，然后

cd angular-phonecat

node scripts/web-server.js

记住不要关闭命令行，就可以测试了！

这里先写hello world开始：

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    </head>

    <body>

        Hello {{'World'}}!

    </body>

</html>

就这样hello world就简单地写好了，{{'world'}}这里面就是一个表达式，这里这个表达式是个字符串，但我们要把它改成Hello * ，World可以动态改变任意字符串，可以这样写：

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World">

        <hr>

        Hello  {{ yourname ||'World'}}!

    </body>

</html>

ng-model绑定了一个yourname的变量（双向数据绑定），这样'World'即可以改变成其他的字符串了！那我们还想说把它得到的字符串用alert弹出来，可以怎么做：

html：

<!doctype html>

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <div class="example2" ng-controller="Cntl1">
　　　　<h1>{{init}}</h1>

      Name: <input ng-model="name" type="text"/>

      <button ng-click="greet()">Greet</button>

    </div>

  </body>

</html>

js:

function Cntl1($window, $scope){

  $scope.name = 'World';//实现数据双向绑定

　$scope.init = 'Hello xiaobin';

  $scope.greet = function() {

    ($window.mockWindow || $window).alert('Hello ' + $scope.name);

  }

}
<!--补充：表达式计算是发生在作用域中的。Javascript默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说，你使用window中定义的alert()方法，在AngularJS表达式中必须写成$window.alert()才行。这是为了防止意外进入全局作用域（各种bug的来源）而设计的。 -->




这里可以看到html的模板里面ng-model绑定了一个变量name，js里面的Cntl1控制器在scope作用域中也定义了一个那么变量$scope.name，这里就可以很深刻体现出数据的双向绑定了，两处的值的改变都会影响另外一个的值变化。上面给button绑定了一个ng-click指令，没错，里面的greet（）函数正是我们在控制器文件里面定义的函数，通过这种方式我们实现了视图和控制器的交互，至于谁是模板，谁是控制器，上面的代码已经很详细！


那么如果是有这样的另外要求，需要在视图遍历某个数组，那可以这样做：


html:




<!doctype html>

<html ng-app>

  <head>

    <meta charset='utf8'/>

    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <div ng-controller="Cntl2" class="expressions">

      {{hello}}

      <br>

      Expression:

      <input type='text' ng-model="expr" size=""/>

      <button ng-click="addExp(expr)">Evaluate</button>

      <ul>

       <li ng-repeat="exprd in exprs">

         [ <a href="" ng-click="removeExp($index)">X</a> ]

         <tt>{{exprd}}</tt> => <span ng-bind="$parent.$eval(exprd)"></span>

        </li>

      </ul>

    </div>

  </body>

</html>




js:




function Cntl2($scope) { //$scope注入的作用域

  var exprs = $scope.exprs = [];  //这是通过$scope.创建的数组

  $scope.expr = '3*10|currency'; //添加默认模型属性，对应模板的input框中相对应有模型变量的默认值

  $scope.hello = '小斌开始学习angularJs拉！';

  $scope.addExp = function(expr) {

     exprs.push(expr);//压入数组(push)

  };

  $scope.removeExp = function(index) {

    exprs.splice(index, 1); //删除某个数组项(splice)

  };

}

//模型和视图分离，但是他们两者确实是同步的




这里感觉会比之前两个例子有些复杂，这是希望通过在input框填写内容，点击确定按钮，下面列表会多增加一项内容！这里面绑定的addExp和removeExp函数是执行增加内容项和删除内容项的作用，每增加一个就会往exprs压入一个数组项，在视图是这样输出来的，通过ng-repeat = "exprd in exprs "添加到li标签下，然后遍历出来的。


补充：ng-bind指得是绑定某个内容，输出到span标签里面，对应的还有ng-template-bind，之后详学http://t.cn/RUbL4rP！


$parent.$eval(exprd)指得是执行exprd，可以看一下上面的代码， ‘3*10|currency’其实加了货币过滤器（angular自带），至于$parent不是很理解，有知道的人就告诉我一下呢！
												


											
学习笔记-AngularJs（二）的更多相关文章
	

    
								
  1. 学习笔记-AngularJs（十）
		
    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...
    
		
    2. 
						
  2. 学习笔记-AngularJs（三）
		
    学习笔记-AngularJs(二)写了个所有程序语言入门时都必须要写的Hello World,那么从现在开始做那个之前说过的互联网大佬介绍的学习例子,当然这里开始会慢慢按照之前说过的目录来搭建这个学习 ...
    
		
    3. 
						
  3. 《Java编程思想》学习笔记（二）——类加载及执行顺序
		
    <Java编程思想>学习笔记(二)--类加载及执行顺序 (这是很久之前写的,保存在印象笔记上,今天写在博客上.) 今天看Java编程思想,看到这样一道代码 //: OrderOfIniti ...
    
		
    4. 
						
  4. Hibernate学习笔记（二）
		
    2016/4/22 23:19:44 Hibernate学习笔记(二) 1.1 Hibernate的持久化类状态 1.1.1 Hibernate的持久化类状态 持久化:就是一个实体类与数据库表建立了映 ...
    
		
    5. 
						
  5. X-Cart 学习笔记（二）X-Cart框架1
		
    目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 四.X- ...
    
		
    6. 
						
  6. C#可扩展编程之MEF学习笔记（二）：MEF的导出(Export)和导入(Import)
		
    上一篇学习完了MEF的基础知识,编写了一个简单的DEMO,接下来接着上篇的内容继续学习,如果没有看过上一篇的内容, 请阅读:http://www.cnblogs.com/yunfeifei/p/392 ...
    
		
    7. 
						
  7. DuiLib学习笔记（二） 扩展CScrollbar属性
		
    DuiLib学习笔记(二) 扩展CScrollbar属性 Duilib的滚动条滑块默认最小值为滚动条的高度(HScrollbar)或者宽度(VScrollbar).并且这个值默认为16.当采用系统样式 ...
    
		
    8. 
						
  8. guava 学习笔记（二） 瓜娃（guava）的API快速熟悉使用
		
    guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用 1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection  ...
    
		
    9. 
						
  9. Dynamic CRM 2013学习笔记（二十八）用JS动态设置字段的change事件、必填、禁用以及可见
		
    我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Django表单API详解
			
    声明:以下的Form.表单等术语都指的的广义的Django表单. Form要么是绑定了数据的,要么是未绑定数据的. 如果是绑定的,那么它能够验证数据,并渲染表单及其数据,然后生成HTML表单.如果未绑 ...
    
			
    2. 
						
  2. leecode第二十六题（删除排序数组中的重复项）
			
    class Solution { public: int removeDuplicates(vector<int>& nums) { int len=nums.size(); )  ...
    
			
    3. 
						
  3. Dreamweaver 1 网页制作
			
    1.站点 1.1 创建站点 点击菜单栏中站点进行站点创建,输入站点名称,路径 1.2 设置图像文件夹 1.3 站点管理 站点的编辑.复制.删除 2.页面属性栏 2.1 外观 1.设置页面整体的字体.大 ...
    
			
    4. 
						
  4. js常见知识点2.面向对象相关
			
    一.对象的概念 建议回复: 对象是一个整体,对外提供一些功能. 一切具有属性和方法的事物. 一切具有本质特征和行为的物质. 数据类型:       所有的基本数据类型都没有属性和方法.       所 ...
    
			
    5. 
						
  5. redhat修改网卡名称
			
    ●此方法在redhat7.4之后,不能修改成功. 1.编辑网卡的配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 将里面的NAME和DEVICE项修 ...
    
			
    6. 
						
  6. 第一个dubbo程序
			
    Dubbo是一个高性能服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案,使得应用可通过高性能RPC实现服务的输出和输入功能,和Spring框架可以无缝集成. 作为一个 ...
    
			
    7. 
						
  7. ionic更换加载页面和logo
			
    将你准备要更替的加载页面的图片和logo图片分别重名名为splash.png和icon.png 将这两个图片文件放到项目中的resources目录下,覆盖原有的这两个文件 在cmd或终端进入项目 分别 ...
    
			
    8. 
						
  8. 倒排索引（Inverted Index）
			
    倒排索引(Inverted Index) 倒排索引是一种索引结构,它存储了单词与单词自身在一个或多个文档中所在位置之间的映射.倒排索引通常利用关联数组实现.它拥有两种表现形式: inverted fi ...
    
			
    9. 
						
  9. mysql 时间戳转换 、cnd、dns 通俗理解
			
    
			
    10. 
						
  10. 『MXNet』第五弹_MXNet.image图像处理
			
    简单处理API 读取图像: image.imdecode(open('../img/cat1.jpg', 'rb').read()) 图像类型转换: img.astype('float32') 图像增 ...
    
			
    11.