aichuxia4449
aichuxia4449

AngularJS开发经验

　　AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

　　

一、AngularJS 中的精美特性

双向绑定

上面的例子已经说明了，我们可以像 PHP Smarty 模板一样在 HTML 中写表达式，用 {{ 和 }} 包起来。在 AngularJS 里，View 和 Model 是在 Controller 里面绑定的，所以无论你在 View 的表单中修改了内容，还是在 Controller 里通过代码修改了 Model 值，两边都会即时发生变化，同步更新。因为 AngularJS 会监控 （watch） Model 对象的变化，随时反映到 View 中。

Filter

Filter 类似 Unix 里面的 | 管道概念，AngularJS 把它搬到了前端。还是举个例子，你们感受一下——

<div>{{ 9999 | number }}</div>
<div>{{ 9999+1 | number:2 }}</div>
<div>{{ 9*9 | currency }}</div>
<div>{{ 'Hello World' | uppercase }}</div>

输出结果：

9,999
10,000.00
$81.00
HELLO WORLD

二、AngularJS 中的一些“坑”

由于过去写 JavaScript 的习惯使然，人们很容易掉进一些 AngularJS 的陷阱里。下面的内容假设你已经了解前端 MVC 概念，并对 AngularJS 有了一定经验，初学者读起来可能比较艰深晦涩。

DOM 操作

避免使用 jQuery 来操作 DOM，包括增加元素节点，移除元素节点，获取元素内容，隐藏或显示元素。你应该使用 directives 来实现这些动作，有必要的话你还要编写自己的 directives。

如果你感到很难改变习惯，那么考虑从你的网页中移除 jQuery 吧。真的，AngularJS 中的 $http 服务非常强大，基本可以替代 jQuery 的 ajax 函数，而且 AngularJS 内嵌了 jQLite —— 它内部实现的一个 jQuery 子集，包含了常用的 jQuery DOM 操作方法，事件绑定等等。但这并不是说用了AngularJS 就不能用 jQuery 了。如果你的网页有载入 jQuery 那么 AngularJS 会优先采用你的 jQuery，否则它会 fall back 到 jQLite。

需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件。因为插件在 AngularJS 之外对表单值进行更改，并不能即时反应到 Model 中。例如我们用得比较多的 jQueryUI datepicker 插件，当你选中一个日期后，插件会将日期字符串填到 input 输入框中。View 改变了，却并没有更新 Model，因为 $('.datepicker').datepicker(); 这段代码不属于 AngularJS 的管理范围。我们需要编写一个directive 来让 DOM 的改变即时更新到 Model 里。

var directives = angular.module('directives', []);
 
directives.directive('datepicker', function() {
   return function(scope, element, attrs) {
       element.datepicker({
           inline: true,
           dateFormat: 'dd.mm.yy',
           onSelect: function(dateText) {
               var modelPath = $(this).attr('ng-model');
               putObject(modelPath, scope, dateText);
               scope.$apply();
           }
       });
   }
});

然后在 HTML 中引入这个 direcitve

<input type="text" datepicker ng-model="myObject.myDateValue" />

说白了 directive 就是在 HTML 里写自定义的标签属性，达到插件的作用。这种声明式的语法扩展了 HTML。

需要说明的是，有一个 AngularUI 项目提供了大量的 directive 给我们使用，包括 Bootstrap 框架中的插件以及基于 jQuery 的其他很热门的 UI 组件。我之前说过 AngularJS 的社区很活跃嘛，生态系统健全。

ngOption 中的 value

这是个大坑。如果你去查看 ngOption 生成的