AngularJS 中一些坑.docVIP

AngularJS 中的一些坑 最近几个月频繁的跟AngularJS打交道，对于web应用开发来说Angular真的是一个神奇的框架，但是没有东西是完美的，在这篇文章里我会把我的感悟罗列出来，希望可以产生共鸣（前提是你对Angular已经有所了解）。 UI的闪烁 Angular的自动数据绑定功能是亮点，然而，他的另一面是：在Angular初始化之前，页面中可能会给用户呈现出没有解析的表达式。当DOM准备就绪，Angular计算并替换相应的值。这样就会导致出现一个丑陋的闪烁效果。 上述情形就是在Angular教程中渲染示例代码的样子： 1 2 3 4 5 6 7 8 body ng-controller=PhoneListCtrl ??ul ????li ng-repeat=phone in phones ??????{{ }} ??????p{{ phone.snippet }}/p ????/li ??/ul /body 如果你做的是SPA(Single Page Application)，这个问题只会在第一次加载页面的时候出现，幸运的是，可以很容易杜绝这种情形发生: 放弃{{ }}表达式，改用ng-bind指令 1 2 3 4 5 6 7 8 body ng-controller=PhoneListCtrl ??ul ????li ng-repeat=phone in phones ??????span ng-bind=/span ??????p ng-bind=phone.snippetOptional: visually pleasing placeholder/p ????/li ??/ul /body ? 你需要一个tag来包含这个指令，所以我添加了一个span给phone name. 那么初始化的时候会发生什么呢，这个tag里的值会显示(但是你可以选择设置空值).然后，当Angular初始化并用表达式结果替换tag内部值，注意你不需要在ng-bind内部添加大括号。更简洁了！如果你需要符合表达式，那就用ng-bind-template吧， 如果用这个指令，为了区分字符串字面量和表达式，你需要使用大括号 另外一种方法就是完全隐藏元素，甚至可以隐藏整个应用，直到Angular就绪。 Angular为此还提供了ng-cloak指令，工作原理就是在初始化阶段inject了css规则，或者你可以包含这个css 隐藏规则到你自己的stylesheet。Angular就绪后就会移除这个cloak样式，让我们的应用(或者元素)立刻渲染。 Angular并不依赖jQuery。事实上，Angular源码里包含了一个内嵌的轻量级的jquery:jqLite. 当Angular检测到你的页面里有jQuery出现，他就会用这个jQuery而不再用jqLite，直接证据就是Angular里的元素抽象层。比如，在directive中访问你要应用到的元素。 1 2 3 4 5 6 7 8 9 angular.module(jqdependency, []) ??.directive(failswithoutjquery, function() { ????return { ??????restrict : A, ??????link : function(scope, element, attrs) { ???????????????element.hide(4000) ?????????????} ????} }); (演示代码：?this plunkr?) 但是这个元素jqLite还是jQuery元素呢？取决于，手册上这么写的： Angular中所有的元素引用都会被jQuery或者jqLite包装；他们永远不是纯DOM引用? 所以Angular如果没有检测到jQuery，那么就会使用jqLite元素，hide()方法值能用于jQuery元素，所以说这个示例代码只能当检测到jQuery时才可以使用。如果你(不小心)修改了AngularJS和jQuery的出现顺序，这个代码就会失效！虽说没事挪脚本的顺序的事情不经常发生，但是在我开始模块化代码的时候确实给我造成了困扰。尤其是当你开始使用模块加载器(比如?RequireJS), 我的解决办法是在配置里显示的声明Angular确实依赖jQuery 另外一种方法就是你不要通过Angular元素的包装来调用jQuery特定的方法，而是使用$(element).hide(4000)来表明自己的意图。这样依赖，即使修改了script加载顺序也没事。压缩 特别需要注意的是Angular应用压缩问题。否则错误信息比如 ‘Unknown provider:aProvider? - a’ 会让你摸不到头脑。