angular1+,性能优化

u7560

1 单次绑定

 这样就没有watch。数据只绑定一次。{{::name}}

2使用track by

      1是可以解决重复的问题， 2是解决dom元素重复创建， 删除的。

3 数据扁平化。

 减少watch 

4页面跳转传参

  $state.go (state param)

  $stateParam

   利用服务 创建空对象 set  get

   $rootScope

   利用全局事件 或者事件 $broadcast $emit

   利用 story缓存

5  服务和服务提供商 name naneProvider

6  viewmodel  rootScope scope

7 ui-router的 resolve 数据加载完毕 渲染

8  view@state state模板下的view视图

9 myData2: function(myData1, $stateParams){             return myData1.get({                 id:$stateParams.itemId                 }) .$promise.then(function (response) {                            //对取回来的response还可以干些事情                            return response;                        });

10,  清理资源， 优化运行速度。

var interval = $inteval(function() {} , 1000)

$interval.cancel(interval );   

//  离开页面处理。 释放资源。

$scope.$on('$destory', function() {

    

})

11 清除watch :

     var  unwatch = scope.$watch( "insert" , function (n){  

          console.log( "asd" );  

         element[0].innerHTML = n;  

     });  

  unwatch();  

12 什么时候会触发脏检查，

    1 有ng 指令的会执行脏检查。

    2 固定的钩子函数会有 ， 比如link 函数，

    3 事件触发是异步，所以需要手动调用。

13 引入html 片段

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

14 根据不同状态 写入不同的值

    ng-switch="asd"

    ng-switch-when="1"

15 关联数据 和绑定页面的数据：

     每一个绑定适合页面建立监听的。

     每一个关联数据是要通过手动 watch 方法来进行监听的。

16 $http:

    参数： method:  params:

    成功回调： 必须是链式调用。

    

17 angular 拦截器：

angular.module('test', []).factory('testInterceptor', function($q){ var interceptor = {  'request':function(config){    return config;  },  'response':function(response){    return response;  },  'requestError':function(rejection){    return $q.reject(rejection);  },  'responseError':function(rejection){    return rejection  } } return interceptor;})angular.module('test', []).config(function($httpProvider){  $httpProvider.interceptors.push('testInterceptor');})

18 返回 html字符串：

.controller('ModalWithSelectCtrl', function($scope,$sce) {  

       $scope.modalBody=$sce.trustAsHtml("<h1>2222</h1>")  

    })  

<div  data-ng-bind-html="modalBody"></div> 

19 angular cookie

<script src= "./bower_components/angular-cookies/angular-cookies.js" > </script> 

angular.module( 'cookiesExample' , [ 'ngCookies' ]).controller( 'ExampleController' , [ '$cookies' ,  '$cookieStore' , function ($cookies, $cookieStore) {}]);

     $cookies.remove( "user" );

//检测是否存在cookie   user

$scope.pass = $cookies.getObject( "pass" );

 

  //记录登录时间

  $scope.loginTime =  new   Date().getTime();

  $cookies.put( "loginTime" , $scope.loginTime);

  var cookieDate = {};

  cookieDate.sid = data.con.sid;

  cookieDate.uid = data.con.uid;

  cookieDate.tid = data.con.tid;

  cookieDate.token = data.con.token;

  cookieDate.email = data.con.email;

  $cookies.putObject( "user" , cookieDate);

  if   ($scope.isRemember) {

     var expireDate =  new   Date();

     expireDate.setDate(expireDate.getDate() +  30 ); //设置cookie保存30天

     $cookies.putObject( "pass" , { 'email' : $scope.email,  'password' : $scope.password}, { 'expires' : expireDate});

   }  else   {

      $cookies.remove( "pass" );

   }

20 angular 几个阶段：

    constant， 配置数据常量

    value   配置值， 比喻localStorage. 只能注入 controller factory service

    

    config 是做页面配置的。  只允许provider 和constant

    run 是初始化。 所有都允许。

    

    

    1 启动阶段： 

         DOMContentLoaded 之后开会启动。

     2 初始化阶段：

       寻找ng-app, 开始初始化必要代码组件， $injector， $compile, $rootScope,  继续解析dom树。

     3 编译和链接阶段：

         $compile 通过遍历DOM树的方式， 收集指令，并排序， 

         通过$injector 来查找收集指令的compile并执行。

         当指令编译后 会调用每个指令的连接函数， link的作用的封闭的作用域和 相应的监控。

     4 运行阶段

          每个指令都有自己的事件监听器， 当指令被触发， 指令函数就会运行在$digest, 

         $degest会等待$watcher, 当模型变化后， 调用$watch， 

         然后再次查看$watch， 以确保没有变化， 这个次数一般限制10次。

        

---

     1  angular @ = & html对用的写法。

         @ title="{{title}}"  字符串绑定

          =  title="title''   双向绑定

          &  title="title"  方法绑定

        

        

    2 angular  嵌套ng-repeat   

        方法1  

         <tr ng-repeat= "row in rows track by row.id"  ng-init= "outerIndex = $index" >

  <td ng-repeat= "col in row.columns track by col.id" >

    <span ng- if = "col.id == 0"  ng-bind= "outerIndex " ></span>

  </td>

</tr>

方法2 

     $parent.$index

3 angualr, 数组长度 不发生变化，不会进行脏检查。

10 ng-model 

    只能使用变量， 和 引用。

---

3 angular watch watchGroup watchCollection

对于watch 参数为true时， 可以跟踪深变化。

watchGroup watchCollection, 只要引用不发生变化， 就不会触发回调。

4 angular 页面渲染完毕

$scope.$watch('$viewContentLoaded', function() {

});

页面开始

<div controller="test">

<div data-ng-init="load()"></div>

</div>

$scope.load = function() {}

5 $sce.trustAsHtml('')