首页 / ANGULAR / 行如风 Angular 初识5
行如风 Angular 初识5
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了行如风 Angular 初识5，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2131字，纯文字阅读大概需要4分钟。
内容图文
今天说一下关于 AngularJs 的闪屏问题和使用对象扩充和数据遍历，直接上代码：
（一）、闪屏问题
首先要知道是什么原因会造成闪屏问题，大家都知道数据绑定会有 2 种写法（此处的 2 种不包括表单的数据绑定），即 ng-bind 和 {{xxx}} 的写法，
比如以下代码
<div>{{name}}</div> 和 <div ng-bind=”name”></div>
这两种都可以绑定数据，但是 {{name}} 在页面刷新时 Web 渲染的时候还会显示 {{name}}, 然后当 Angularjs 的内容被读完之后， Angular 才会处理 {{name}} 的内容，比如 $scope.name=” 你好 ”; 当 Angular 被加载之后 {{name}} 才会变为 ” 你好 ” ，所以会有闪屏的现象。但是用指令 ng-bind=”name” 不会出现闪屏，因为指令实在标签属性里不会显示在页面当中，虽然这两者都是在 Angular 加载完成之后才会再渲染相应的内容，效果却不一样。
那这样大家可能回想，那以后大家都用指令来绑定不就行了吗？但是指令是写在标签的属性里，如果要绑定的名称很长 {{zxcvbmdashkeqw}} 或者还要在指令里面做运算 +-*/.. 等等，这会导致标签的属性过于冗余，不是理想的解决方法，所以大家可以这样写
<style>
.ng-cloak{display:none;}
</style>
<div ng-app="hd" ng-cloak ng-controller="ctrl" class="ng-cloak"> {{name}}
</div>
class="ng-cloak" 就是解决闪屏问题的关键指令，要保证 style 里面有对应的样式，还要保证在对应模块的标签里要有 class="ng-cloak" ，这样就完美解决了，原理是这个模块会在 Angular 将这个模块渲染完之后再显示模块内的数据。 J
（二）、对象扩充和数据遍历
直接撸代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<title></title>
<style>
.ng-cloak{display: none;}
</style>
</head>
<body>
<div ng-app="hd" ng-cloak ng-controller="ctrl" class="ng-cloak"><!--要想效果一样必须class名称是ng-cloak-->
<div ng-repeat="(key, value) in data">
{{key}} -- {{value}}
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var m=angular.module(‘hd‘,[]);
m.controller(‘ctrl‘,[‘$scope‘,function($scope){//[]里的$scope为依赖注入
// 函数使用对象扩充
// var obj={‘name‘:‘后盾网‘};
// angular.extend(obj,{url:‘houdunwang.com‘,web:‘后盾人‘})
// console.log(obj);
// 数据遍历数组
// $scope.data=[{name:‘后盾网‘,url:‘houdunwang.com‘},{name:‘后盾人‘,url:‘houdunren.com‘}]
// angular.forEach($scope.data,function(v,k){
// console.log(v,k);
// v.url=‘www.‘+v.url;
// });
// 数据遍历对象
$scope.data={name:‘后盾网‘,url:‘houdunwang.com‘};
angular.forEach($scope.data,function(v,k){
console.log(v,k);
})
}]);
</script>
本文出自 “学习改变命运” 博客，请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1917876
原文：http://itzhongxin.blog.51cto.com/12734415/1917876
内容总结
以上是互联网集市为您收集整理的行如风 Angular 初识5全部内容，希望文章能够帮你解决行如风 Angular 初识5所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。