AngularJS学习

https://www.cnblogs.com/lovesong/p/4870006.html

AngularJS是一个框架，框架决定整个项目的开发套路，以框架为主导。

jQuery是一个函数库，以项目本身为主导。

angularjs是个双向绑定的前端JS框架，其他特性都是围绕它工作的。

它适用于CRUD应用（增加（create）、读取（retrieve）、更新（update）和删除（delete））

双向绑定：

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（当模板编译视图，视图发生变化触发数据模型变化，数据模型又会作用于视图。）

angularjs元件：其中controller、directive是最为重要的

　　

　　

　　　module：

　　　　　作为模块组织者，包含其他angularJS元件

　　　controller：

　　　　负责跟view沟通，不处理任何跟DOM有关的工作

　　　　PS：当你的controller里面写了DOM操作时，就应该反省代码是否写得有问题了。

　　　directive：

　　　　类似于HTML标签，可以定义标签的行为，所有与DOM相关的操作都应该写在这里。

　　　　PS：尽量不要DOM操作，但可能还是会需要用到，用到时就要在directive里用。

  　　service：

　　　　　写可以独立运作的代码（与view无关），共用于元件（例如控制器）之间，不应该处理任何跟DOM有关的工作。后台数据的请求接口

 　　 filter：

　　　　对数据做一些修理，不应该处理任何跟DOM有关的工作

　　 config：

　　　　用来定义路由规则，不应该处理任何跟DOM有关的工作

双向数据绑定：

　　双向数据绑定是个重要的特性，当view中有数据发生了变化，这个变化会反馈到Model的scope的数据上，而当scope数据发生变化时，view中的数据也会更新到最新的值。

　　三个方法：

　　　　scope重要的方法：$apply,$digest,$watch

　　　　1$watch

　　　　　　注册一个watcher，监听scope的数据，当数据变化时候调用回调函数。第一个参数是被监听的数据，第二个参数是回调函数。

　　　　2$digest

　　　　　　检查scope中的数据是否发生变化，如果变化则关联到该watcher的回调函数就会被执行。

　　　　3$apply

　　　　　　这方法是调用$rootScope.$digest(),在$rootScope开始$digest,随后会访问到所有的children scope中的watchers。$apply()方法有两种形式。第一种会接受一个function作为参数，执行该function并且触发一轮$digest循环。第二种会不接受任何参数，只是触发一轮$digest循环。

　　　　　　PS：angularjs并不直接调用$digest（），而是调用$scope.$apply()

　　　　　　　　　　　　　　

    当HTML写下表达式如{{ name }}或ng-model="name"时，angularJS在幕后会为你在scope模型上设置一个watcher，如下：

　　　　

$scope.$watch( 'name' ,function (newValue , oldValue){
     //update the DOM with newValue   
} );

　　当页面JS事件触发时，angularJS会监视到并更改scope数据，并自动触发一轮$digest循环，每个关联的watcher的回调函数被执行，最后view被更新。

注意地方

　　1.有的时候你发现明明scope的数据已经改了，但你发现view并没有更新。

　　　　这是因为你可能在setTimeout、异步请求等里面去修改数据，但此时angularJS并不知道数据已经变了，不会帮你调用digest循环，所以你需要手动调用$apply。目前一些指令（例：ng-click、ng-model）以及服务（例$timeout、$http）被调用时会自动触发一次$digest循环，这些就不用手动调用$apply.

　　　　

setTimeout( function () { 
   $scope.$apply( function () {
       //wrapped this within $apply
       $scope.name='lu';
    } )    
},2000 )

 

或

setTimeout( function () {
    $scope.name="lu";
    $scope.$apply();
} ,2000);

　　2.脏检查（Dirty checking）

        当一个$direst循环运行时，watchers会被执行来检查scope中的models是否发生了变化，如果发生了变化，那么相应的listener函数就会被执行。在当前的一次循环结束后，它会再执行一次循环用来检查是否有models发生了变化。这就是脏检查（Dirty Checking），它用来处理在listener函数被执行时可能引起的model变化。因此，$digest循环会持续运行直到model不再发生变化，或者$digest循环的次数达到了10次。

　　PS：$digest循环最少也会运行两次，即使在listener函数中并没有改变任何model

　　3.监控的表达式不要过于复杂，表达式数量不要太多

　　4.监听含税内不要有DOM操作，那样会显著降低性能

       5.不能互相监听对方会修改的属性，以免形成交叉引用

 https://www.cnblogs.com/lovesong/p/4889931.html

　　angular1.3技巧：

　　1.ng-repeat多个字段排序的写法：

　　　　使用orderBy过滤器，第一个参数是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），第二个参数是正序还是倒序（默认是正序）。

ng-repeat="groupUser in groupUsers | orderBy : ['isOwner' ,'isAdmin'] : true"

　　2.ng-include引入HTML片段

　　　　使用ng-include,第一个参数是页面的相对地址的字符串。应该注意，是一个字符串，不是ng-expression，所以不要忘了加单引号，否则会发现怎么都引不进这个HTML片段。

<div ng-include="'msgs.html'"></div>

　　3.ng-bind的$scope对象没有随着数据变化而变化

             自己实现的ajax，获取数据后，设置到$scope上，view却没有更新，这其实就是angular双向数据的原因，angular不可预见的scope变化，是不会帮忙刷新view的（例：$.ajax和setTimeout）。解决方法就是，数据设置到$scope上后，手动调用$scope.$apply().

        PS:一些指令（例ng-click、ng-model）以及服务（例：$timeout、$http）才会自动刷新view。

        4.移动触摸（Touch）事件

　　angular-touch模块提供了触摸的事件和其他手势ngSwipeLeft、ngSwipeRight。

        5.ng-bind-html的内容无法正常的显示在页面中

       使用ng-bind-html属性，该属性依赖于$sanitize,也就是需要引入angular-sanitize.js文件。但会发现ng-bind-html的内容无法正常的显示在页面中，这是因为某些标签会被angularjs认为是不安全的自动过滤掉，而为了保留这些标签就需要开启非安全模式。

<div ng-bind-html=" article.content | trustHtml ">
</div>

myApp.filter( 'trustHtml' , function ($sce){
    return function (input){
       return $sce.trustAsHtml(input)    
    }
} );

         其中$sce是angular自带的安全处理服务，$sce.trustAsHtml(input)返回的是受信任的对象。

　　6.如何划分一个module

       在关系比较密切（业务逻辑）的页面可以划为一个module，因为页面可能存在公用service或template或directive（controller不共用），而这些元件归属于同个module，我们就可以不同页面调用了。而不相关的页面可划分为另一个module，增加代码的清晰度。

       7.是否要把工具类弄成service

        在弄工程之前，我会考虑到是否要将一些工具类封装成一个service（为了看起来代码统一），但我觉得是没有必要的，因为service是归属于某个模块的，而我们的工具类可能在不同模块都有使用，不归属于某个模块，把工具类当成一个jQuery的库引入即可。

　　8.配合RequireJS使用

　　angular没有异步加载模块的功能，所以使用配合RequireJS的效果还不错的。在这里面有些异议的是对于模块定义的地方，是该把一个模块定义成RequireJS的模块还是angular的服务（可以依赖注入），我觉得还是功能归属的问题，如果是全局使用的工具服务，就定义成RequireJS模块，而如果是与模块密切相关的业务逻辑就使用服务。

      PS：可在RequireJS的config加上urlArgs，可以避免缓存问题。

urlArgs : "bust="+(new Date()) .getTime()  //可用来清理缓存，在部署到生产环境去掉。

　　9.iframe打开跨域URL时报错　　

<iframe width="100%" height="100%" ng-src="{{url}}"></iframe>

　　如果不做处理，上面的跨域URL是打不开的，需要定义白名单。

myApp.config( function ($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist([
         // Allow same origin resource loads.
         'self',
         // Allow loading from our assets domain.  Notice the difference between * and **.
         'https://link.bingosoft.net/**'
     ]);
});

　　10.使用其他Controller的scope的属性方法

        ****原作者声明：

　　　　我并不清楚我的用法是否恰当，使用其他Controller的scope局限于其parent scope，而不是任何Controller的都可以访问。scope有个属性$parent，通过这个属性可以找到某一层controller的scope。　　　　

var parentScope=$scope.$parent.$parent.$parent

          PS:多少层$parent是我打印scope对象找出来的

      11.form表单的自动提交功能

         在输入框点击回车时，angularjs会默认触发第一个button的click事件。

 

 

注意：

　　ng-options的value值的类型是number，当list.id是string类型时无法循环。

       ng-repeat的value值的类型是string，当list.id是number类型时无法循环。

    合适的案例：　　　　

　　var optItems1 = [{id:1,text:'武汉'},{id:2,text:'北京'},{id:3,text:'杭州'}];
　　var optItems2 = [{id:'1',text:'武汉'},{id:'2',text:'北京'},{id:'3',text:'杭州'}];

        

　　<select ng-model="query.city" ng-options="x.id as x.text for x in optItems1">
　　　　<option value=""></option>
　　</select>

       

　　<select ng-model="query.city">
　　　　<option value=""></option>
　　　　<option ng-repeat="x in optItems2" value="{{x.id}}">{{x.text}}</option>
　　</select>