AngularJs学习笔记（一）

AngularJs学习笔记

最重要的功能特性

1. 实现自动化双向的数据绑定，把元素值或者是输入域的值绑定到应用程序上面，减少了页面的DOM操作
2. MVC
3. 模块化
4. 指令系统

---

<div ng-app>
     <p>Name:<input type="text" ng-model="name"></p>
     <h2>Hello {{name}}</h2>
 <div>

1. AngularJs: 是通过ng-directivs（ng指令[当作一个属性]）扩展HTML的
2. ng-app:是一个AngularJs的程序入口指令，也就是说div是这个AG应用程序的所有者。
3. ng-model:把输入域的值绑定到h2的标签里面的变量name上
4. 写在hello旁边的｛｛name｝｝就是AG的表达式{{expression}}把数据绑定到HTML，输出数据

上面这段代码有一个缺点：当我们把AG的js文件引入写在body下面的时候，你会在页面上面看到｛｛name｝｝一闪而过，解决的办法有两种：
1. 把引入的AG.js文件放在head里面
2. 就是使用ng-bind｛把应用程序的数据绑定到HTML视图上面｝这个指令,当然是对于数据比较少的时候，引入的js文件还是放在下面

<h2>Hello <span ng-bind="name"><span>
具体来说是绑定到某个标签的 innerHTML。

---

指令系统

1. AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
2. 表达式{{exp}}是通过ng-model=“exp”进行同步的。
3. ng-repeat:重复一个HTML元素。

---

<div ng-app="myApp">

     <ul ng-controller="ListController">

         <li ng-repeat="item in lists" data-id="{{item.id}}">

             <span>{{$first?"开始",""}}</span>

            <strong>{{item.name}}</span>

             <span>{{item.age}}</span>

             <span>{{$last?"结束了",""}}</span>

          </li>
      <ul>
<div>

<script>
   angular.module("myApp",[]).controller
     ("ListController",["$scope",function($scope){

     $scope.lists=[];

     for(var i=1;i<10;i++){
       $scope.lists[$scope.lists.lenght]={
           id:i,
           name:"sun"+i,
           age:20+i
          } 
      }  
   }])
</script>    

---

解析：
- li标签上面的ng-repeat属性表示会遍历这个li标签(包括里面的子标签)，且li标签里面的内容是通过这个in循环来产生的，后面的data-id是自定义的id属性，通过表达式来绑定值
- 第一个和最后一个的span里面的**first∗∗和last是通过Chrome里面的一个AngularJS插件看到这个item对象的一些值，通过这个值我们可以知道啥时候开始，啥时候结束，这两个属性的取值要不就是true要不就是false。
- 下面的script里面，通过angular.module()创建一个模块，里面的参数第一个是模块的名字｛把这个模块的名字绑定到ng-app上面就是说明这个区域属于这个模块｝，第二个是这个模块所要依赖的模块，没有还是要传入[]
- 创建了模块后，要管理，那么接着创建了控制器controller，第一个参数是控制器的名字，第二个参数是一个函数，控制器起作用的时候会执行这个函数。推荐上面的写法，把作用域$scope{HTML视图与控制器之间的纽带}当作一个字符串传到函数的参数里面，防止代码压缩的时候出现错误。最后把控制器加到了ul上面，这个控制器是属于这个模块的。
- 函数里面，通过$scope.lists向外暴露一个数组，接着通过循环往数组里面插入对象。往数组里面添加数据的方法有push（）=对象，数组名[i]=对象和上面函数里面的方法。

---

1.ng-init：为应用程序定义初始化的值。一般是不使用这个指令。
2. ng-bind：绑定数据到HTML，跟表达式的作用差不多。当这个指令绑定的值包含HTML的时候会自动的转义，防止跨站脚本的攻击。就是直接在页面上显示html的标签，标签不起作用。怎么办？：可以引入一个Angular里面的自定义的库angular-sanitize/angular-sanitize.js，并且使用ng-bind-html指令。使用自定义的模块才可以依赖别的包里面的定义的模块。最后就可以让html的标签起作用。

<strong ng-bind-html="username"></strong>
<script>
angular.module("myAPP",["ngSanitize"]);
</script>

---

自定义指令

可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， icesunDirective, 但在使用它时需要以 - 分割, icesun-directive，结果会在 这个标签里面显示

自定义的标签

<div ng-app="myApp">
  <icesun-directive></icesun-dirctive>
</div>
 <script>
   var app=angular.module("myApp",[]);
   app.directive("icesunDirective",function(){
         return{
             template:"<h1>自定义的指令</h1>"
             }
     }
  </script>

自定义的指令我们可以通过下面的方式调用：
1. 这个指令的元素名本身：
2. 作为一个并签的属性被调用：《div icesun-directive>《/div>
3. 作为一个标签的类名也行：《div class= “icesun-directive”> 4. 还有这种比较特殊的是通过注释来调用这个自定义的指令：《！–directive： icesun-directive –>，但是我们在函数的返回值里面必须加入两个键值对：restrict:”M”和repla:”true”。
5. 可以通过restrict来限制自定义指令的调用：E 作为元素名使用，A 作为属性使用
C 作为类名使用
M 作为注释使用
默认是EA：即可以通过元素名和属性名来调用指令。

---