AngularJS中怎么防止页面闪烁,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联坚信:善待客户,将会成为终身客户。我们能坚持多年,是因为我们一直可值得信赖。我们从不忽悠初访客户,我们用心做好本职工作,不忘初心,方得始终。十余年网站建设经验成都创新互联是成都老牌网站营销服务商,为您提供网站设计制作、成都网站建设、网站设计、HTML5建站、网站制作、品牌网站制作、微信小程序服务,给众多知名企业提供过好品质的建站服务。
1、ng-cloak
ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素:
<div ng-cloak> <h2>Hello {{ name }}</h2> </div>
在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的。
在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class
<div ng-cloak class="ng-cloak"> <h2>Hello {{ name }}</h2> </div>
2、ng-bind
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上;
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了
<div> <h2>Hello <span ng-bind="name"></span></h2> </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: '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可以作为可注入的依赖:
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: 'views/account.html', resolve: { account: function($http) { return $http.get('http://example.com/account.json') } } }) });
推荐定义一个独立的service的方式来使用resolve key,并且使用service来相应返回所需的数据(这种方式更容易测试)。要这样处理的话,我们需要创建一个service:
首先,看一下accountService,
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的方式了:
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() } } }) });
关于AngularJS中怎么防止页面闪烁问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文名称:AngularJS中怎么防止页面闪烁
网站URL:https://www.cdcxhl.com/article12/igjggc.html
成都网站建设公司_创新互联,为您提供自适应网站、App设计、网站内链、营销型网站建设、品牌网站设计、App开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联