AngularJs学习笔记

最重要的功能特性

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

---

<div ng-app> <p>Name:<input type="text" ng-model="name"></p> <h2>Hello {{name}}</h2> <div> AngularJs: 是通过ng-directivs（ng指令[当作一个属性]）扩展HTML的ng-app:是一个AngularJs的程序入口指令，也就是说div是这个AG应用程序的所有者。ng-model:把输入域的值绑定到h2的标签里面的变量name上写在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。

---

指令系统

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。表达式{{exp}}是通过ng-model=“exp”进行同步的。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：即可以通过元素名和属性名来调用指令。

---