AngularJS 最佳实践
AngularJS 是一个 Web 应用框架，它实现了前端的 MVC 架构，能让开发人员很方便地实现业务逻辑。javascript
举个栗子，要作到下面的效果，之前可能须要写一连串的 JavaScript 代码绑定 N 多事件。而使用 AngularJS 框架，一句 JavaScript 都不用写就能实现了，神奇吧？查看演示。php
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div data-ng-app>
单价： <input type="number" min=0 ng-model="price" ng-init="price = 299">
<br>
数量： <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1">
<br>
总价： {{ quantity * price }}
</div>
这得益于 AngularJS 中的双向数据绑定特性(Two Way Data-Binding)，将 Model 和 View 自动关联了起来，在更复杂的业务场景下，还有代码分离的好处，将 DOM 操做和应用逻辑解耦，很是实用。css
不过没有银弹，和其余框架同样，AngularJS 也有它的局限。CRUD 类型的操做是它所擅长的，想一想看之前写过的管理后台，几乎大部分都是从数据库中读取数据，而后呈如今页面上，进行各类增删改查。AngularJS 约定了一套规范（约定优于配置），因而你能够很便捷地操做数据。而在其余方面，例如开发复杂的 Web 游戏，AngularJS 则是无用武之地了。html
1、AngularJS 中的精美特性
双向绑定
上面的例子已经说明了，咱们能够像 PHP Smarty 模板同样在 HTML 中写表达式，用 {{ 和 }} 包起来。在 AngularJS 里，View 和 Model 是在 Controller 里面绑定的，因此不管你在 View 的表单中修改了内容，仍是在 Controller 里经过代码修改了 Model 值，两边都会即时发生变化，同步更新。由于 AngularJS 会监控 （watch） Model 对象的变化，随时反映到 View 中。前端
Filter
Filter 相似 Unix 里面的 | 管道概念，AngularJS 把它搬到了前端。仍是举个例子，大家感觉一下——java
<div>{{ 9999 | number }}</div>
<div>{{ 9999+1 | number:2 }}</div>
<div>{{ 9*9 | currency }}</div>
<div>{{ 'Hello World' | uppercase }}</div>
输出结果：jquery
9,999 10,000.00 $81.00 HELLO WORLD
2、AngularJS 中的一些“坑”
因为过去写 JavaScript 的习惯使然，人们很容易掉进一些 AngularJS 的陷阱里。下面的内容假设你已经了解前端 MVC 概念，并对 AngularJS 有了必定经验，初学者读起来可能比较艰深晦涩。git
DOM 操做
避免使用 jQuery 来操做 DOM，包括增长元素节点，移除元素节点，获取元素内容，隐藏或显示元素。你应该使用 directives 来实现这些动做，有必要的话你还要编写本身的 directives。angularjs
若是你感到很难改变习惯，那么考虑从你的网页中移除 jQuery 吧。真的，AngularJS 中的 $http 服务很是强大，基本能够替代 jQuery 的 ajax 函数，并且 AngularJS 内嵌了 jQLite —— 它内部实现的一个 jQuery 子集，包含了经常使用的 jQuery DOM 操做方法，事件绑定等等。但这并非说用了AngularJS 就不能用 jQuery 了。若是你的网页有载入 jQuery 那么 AngularJS 会优先采用你的 jQuery，不然它会 fall back 到 jQLite。github
须要本身编写 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 生成的 <select> 中的 <option> 的选项值（每一个 <option value="xxx"> 的 value 部分），那绝对是枉费心机。由于这里的值永远都会是 AngularJS 内部元素的索引，并非你所指定的表单选项值。
仍是要转变观念，AngularJS 已经再也不用表单进行数据交互了，而是用 Model。使用 $http 来提交 Model，在 php 中则使用 file_get_contents('php://input') 来获取前端提交的数据。
{{ }} 的问题
在页面初始化的时候，用户可能会看到 {{ }}，而后闪烁一下才出现真正的内容。
解决办法：
- 使用 ng-cloak directive 来隐藏它
- 使用 ng-bind 替代 {{ }}
将界面与业务逻辑分离
Controller 不该该直接引用 DOM，而应该控制 view 的行为。例如“若是用户操做了 X，应该发生什么事情”，“我从哪里能够得到 X？”
Service 在大部分状况下也不该该直接引用 DOM，它应该是一个单例（singletons），独立于界面，与 view 的逻辑无关。它的角色只是“作 X 操做”。
DOM 操做应该放在 directives 里面。
尽可能复用已有功能
你所写的功能极可能 AngularJS 已经实现了，有一些代码是能够抽象出来复用的，使用更 Angular 的方式。总之就是不少 jQuery 的繁琐代码能够被替代。
1. ng-repeat
ng-repeat 颇有用。当 Ajax 从服务器得到数据后，咱们常用 jQuery （好比上面讲过的例子） 向某些 HTML 容器节点中添加更多的元素，这在 AngularJS 里是很差的作法。有了 ng-repeat 一切就变得很是简单了。在你的 $scope 中定义一个数组 （model） 来保存从服务器拉取的数据，而后使用 ng-repeat 将它与 DOM 绑定便可。下面的例子初始化定义了 friends 这个 model
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
显示结果
I have 2 friends. They are: [1] John who is 25 years old. [2] Mary who is 28 years old.
2. ng-show
ng-show 也颇有用。使用 jQuery 来根据条件控制界面元素的显示隐藏，这很常见。可是 Angular 有更好的方式来作到这一点。ng-show （以及 ng-hide） 能够根据布尔表达式来决定隐藏和显示。在 $scope 中定义一个变量：
<div ng-show="!loggedIn">
点击 <a href="#/login">这里</a> 登陆
</div>
相似的内置 directives 还有 ng-disabled， ng-switch 等等，用于条件控制，语法简洁，都很强大。
3. ng-class
ng-class 用于条件性地给元素添加 class，之前咱们也常常用 jQuery 来实现。Angular 中的 ng-class 固然更好用了，例子：
<div ng-class="{ errorClass: isError, warningClass: isWarning, okClass: !isError && !isWarning }">...</div>
在这里 ng-class 接受一个 object 对象，key 为 CSS class 名，值为 $scope 变量控制的条件表达式，其余相似的内置 directives 还有 ng-class-even 和 ng-class-odd，很实用。
$watch 和 $apply
AngularJS 的双向数据绑定是最使人兴奋的特性了，然而它也不是全能的魔法，在某些状况下你须要作一些小小的修正。
当你使用 ng-model， ng-repeat 等等来绑定一个元素的值时， AngularJS 为那个值建立了一个 $watch，只要这个值在 AngularJS 的范围内有任何改变，全部的地方都会同步更新。而你在写自定义的 directive 时，你须要定义你本身的 $watch 来实现这种自动同步。
有时候你在代码中改变了 model 的值，view 却没有更新，这在自定义事件绑定中常常遇到。这时你就须要手动调用 scope.$apply() 来触发界面更新。上面 datepicker 的例子已经说明了这一点。第三方插件可能会有 call back，咱们也能够把回调函数写成匿名函数做为参数传入$apply()中。
将 ng-repeat 和其余 directives 结合起来
ng-repeat 颇有用，不过它和 DOM 绑定了，很难在同一个元素上使用其余 directives （好比 ng-show， ng-controller 等等）。
若是你想对整个循环使用某个 directive，你能够在 repeat 外再包一层父元素把 directive 写在那儿；若是你想对循环内部的每个元素使用某个 directive，那么把它放到 ng-repeat 的一个子节点上便可。
Scope
Scope 在 templates 模板中应该是 read-only 的，而在 controller 里应该是 write-only 的。Scope 的目的是引用 model，而不是成为 model。model 就是咱们定义的 JavaScript 对象。
$rootScope 是能够用的，不过极可能被滥用
Scopes 在 AngularJS 中造成必定的层级关系，树状结构必然有一个根节点。一般咱们用不到它，由于几乎每一个 view 都有一个 controller 以及相对应的本身的 scope。
但偶尔有一些数据咱们但愿全局应用在整个 app 中，这时咱们能够将数据注入 $rootScope。由于其余 scope 都会继承 root scope，因此那些注入的数据对于 ng-show 这类 directive 都是可用的，就像是在本地 $scope 中的变量同样。
固然，全局变量是邪恶的，你必须很当心地使用 $rootScope。特别是不要用于代码，而仅仅用于注入数据。若是你很是但愿在 $rootScope 写一个函数，那最好把它写到 service 里，这样只有用到的时候它才会被注入，测试起来也方便些。
相反，若是一个函数的功能仅仅是存储和返回一些数据，就不要把它建立成一个 service。
3、AngularJS 项目的目录结构
怎样组织代码文件和目录？这恐怕是初学者一开始就会遇到的问题。AngularJS 应用开发的官方入门项目angular-seed，其文件结构是这样的：
- css/
- img/
- js/
- app.js
- controllers.js
- directives.js
- filters.js
- services.js
- lib/
- partials/
这种结构对于一个简单的单页 app 来讲是可行的，只是一旦代码中存在多个 Controller 或者 Service，就很难找到想要寻找的对象了。咱们能够对文件按照业务逻辑进行拆分，就像下面这样：
- controllers/
- LoginController.js
- RegistrationController.js
- ProductDetailController.js
- SearchResultsController.js
- directives.js
- filters.js
- models/
- CartModel.js
- ProductModel.js
- SearchResultsModel.js
- UserModel.js
- services/
- CartService.js
- UserService.js
- ProductService.js
这种结构把不一样的业务功能拆分为独立的文件，条理清晰，可是仍有必定的局限性。最大的问题是一个业务功能的代码分布在controllers, models, servers 三个不一样目录下，要从中挑出正确的文件，创建起代码关联，仍是有些麻烦。按照功能进行模块化划分目录结构，应该要更为合理一些：
- cart/
- CartModel.js
- CartService.js
- common/
- directives.js
- filters.js
- product/
- search/
- SearchResultsController.js
- SearchResultsModel.js
- ProductDetailController.js
- ProductModel.js
- ProductService.js
- search/
- user/
- LoginController.js
- RegistrationController.js
- UserModel.js
- UserService.js
这样也是适合 RequireJS 等模块加载器的天然直观的代码组织方式。
- 1. avalon最佳实践
- 2. 最佳实践
- 3. JSON最佳实践
- 4. Git 最佳实践：commit msg
- 5. JAXB最佳实践
- 6. require.js 最佳实践
- 7. Django 最佳实践
- 8. Dockerfile 最佳实践
- 9. KeyPath 最佳实践
- 10. mongodb 最佳实践
- 更多相关文章...
- • Thymeleaf项目实践 - Thymeleaf 教程
- • XML DOM 实例 - XML DOM 教程
- • PHP Ajax 跨域问题最佳解决方案
- • TiDB 在摩拜单车在线数据业务的应用和实践
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. avalon最佳实践
- 2. 最佳实践
- 3. JSON最佳实践
- 4. Git 最佳实践：commit msg
- 5. JAXB最佳实践
- 6. require.js 最佳实践
- 7. Django 最佳实践
- 8. Dockerfile 最佳实践
- 9. KeyPath 最佳实践
- 10. mongodb 最佳实践