欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
微信小程序代码_AngularJS 防止页面闪耀的方法
时间: 2021-01-12 13:11 浏览次数:
AngularJS 避免网页页面闪动的方式 大家了解在运用的网页页面或是部件必须载入数据信息时,访问器和angular3D渲染网页页面都必须耗费一定的時间。本文关键详细介绍了AngularJS 避免
AngularJS 防止页面闪烁的方法       我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这篇文章主要介绍了AngularJS 防止页面闪烁的方法,需要的朋友可以参考下

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

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

1、ng-cloak

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

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

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

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

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

2、ng-bind

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

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

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

 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事件就(不)会被激活?】

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: '',
 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 es resolved or rejected.

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

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

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

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

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

ountService,

angular.module('app')
.factory('accountService', function($http, $q) {
 return {
 ount: 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的方式了:

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

以上所述是小编给大家介绍的AngularJS 防止页面闪烁的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园