AngularJS 防止页面闪烁的方法

原文网址：http://my.oschina.net/tanweijie/blog/295255

摘要  翻译，原文链接：http://www.ng-newsletter.com/advent2013/#!/day/3

Angular

目录[-]

• 1、ng-cloak
• 2、ng-bind
• 3、resolve

我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。

这种情况被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。

1、ng-cloak

ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：

?

1 2 3

< div  ng-cloak>    < h1 >Hello {{ name }}</ h1 > </ div >

在浏览器加载和编译渲染完成之后，angular会自动删除ngCloak元素属性，这样这个元素就会变成可见的。

• 在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class

?

1 2 3

< div  ng-cloak  class = "ng-cloak" >    < h1 >Hello {{ name }}</ h1 > </ div >

2、ng-bind

ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上；

使用ng-bind替代{{  }}可以防止未被渲染的{{ }}就展示给用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。

上面的例子可以重写成下面那样，这样就可以防止页面出现{{ }}了

?

1 2 3

< div >    < h1 >Hello < span  ng-bind = "name" ></ span ></ h1 > </ div >

3、resolve

当在不同的页面之间使用routes（路由）的时候，我们有另外的方式防止页面在数据被完全加载到route之前被渲染。

在route（路由）里使用resolve可以让我们在route（路由）被完全加载之前获取我们需要加载的数据。当数据被加载成功之后，路由就会改变而页面也会呈现给用户；数据没有被加载成功route就不会改变， the $routeChangeError event will get fired.【$routeChangeError事件就（不）会被激活？】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

angular.module( 'myApp' , [ 'ngRoute' ]) .config( function ($routeProvider) {    $routeProvider    .when( '/account' , {      controller:  'AccountCtrl' ,      templateUrl:  'views/account.html' ,      resolve: {        // We specify a promise to be resolved        account:  function ($q) {          var  d = $q.defer();          $timeout( function () {            d.resolve({              id: 1,              name:  'Ari Lerner'            })          }, 1000);          return  d.promise;        }      }    }) });

resolve 项需要一个key/value对象，key是resolve依赖的名称，value可以是一个字符串（as a service）或者一个返回依赖的方法。

resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.

当路由加载的时候，resolve参数里的keys可以作为可注入的依赖：

?

1 2 3 4 5

angular.module( 'myApp' ) .controller( 'AccountCtrl' ,     function ($scope, account) {      $scope.account = account; });

我们同样可以使用resolve key传递$http方法返回的结果，as $http returns promises from it's method calls:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

angular.module( 'myApp' , [ 'ngRoute' ]) .config( function ($routeProvider) {    $routeProvider    .when( '/account' , {      controller:  'AccountCtrl' ,      templateUrl:  'views/account.html' ,      resolve: {        account:  function ($http) {          return  $http.get( 'http://example.com/account.json' )        }      }    }) });

推荐定义一个独立的service的方式来使用resolve key，并且使用service来相应返回所需的数据（这种方式更容易测试）。要这样处理的话，我们需要创建一个service：

首先，看一下accountService，

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

angular.module( 'app' ) .factory( 'accountService' ,  function ($http, $q) {    return  {      getAccount:  function () {        var  d = $q.defer();        $http.get( '/account' )        .then( function (response) {          d.resolve(response.data)        },  function  err(reason) {          d.reject(reason);        });        return  d.promise;      }    } })

定义好service之后我们就可以使用这个service来替换上面代码中直接调用$http的方式了：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

angular.module( 'myApp' , [ 'ngRoute' ]) .config( function ($routeProvider) {    $routeProvider    .when( '/account' , {      controller:  'AccountCtrl' ,      templateUrl:  'views/account.html' ,      resolve: {        // We specify a promise to be resolved        account:  function (accountService) {          return  accountService.getAccount()        }      }    }) });