本文是依据 Angular Style Guide 对 Angular 常用模块书写建议的翻译和总结,仅供参考。
IIFE
使用 立即执行函数表达式(Immediately Invoked Function Expression)将 Angular 组件包裹起来,防止污染全局作用域 Style Y010 。
1
|
/* avoid */
|
Modules
使用 setter
定义 Modules ,避免使用变量 [Style Y021]。
1
|
/* avoid */
|
使用链式的 getter
来获取 Modules ,避免使用变量 [Style Y022] 。尽量不直接使用匿名函数,而是把一个函数名作为回调传进去 [Style Y024] 。
1
|
angular
|
Controller
使用 controllerAs (和 vm 一起)
因为 this
是上下文相关的,为了避免 Controlller 内部的函数在使用 this
时导致上下文改变,应该在一开始使用一个变量(最好统一为 viewModel 的缩写 - vm
)来捕获 this
[Style Y032] 。
建议书写方式:
1
|
function CustomerController() {
|
使用 controllerAs 语法,在把 Controller 和 View 配对 [Style Y038] 时,使用这种方式:
1
|
function config($routeProvider) {
|
仅在需要使用 $emit
、 $broadcast
、 $on
、 $watch
等 $scope
下的方法,再使用 $scope
[Style Y031] ,书写方式如下:
1
|
function SomeController($scope, $log) {
|
把页面绑定成员放在上面
把可绑定成员放在 Controller 最前面一部分,按字母顺序排列,并且不让代码蔓延。这样能让代码更易读、易查找 [Style Y33] 。
虽然类似于下面这种写法很简便,但是那些超过一行代码的函数会降低可读性。
1
|
/* avoid */
|
建议书写方式:
1
|
/* recommended */
|
其他
- 将 Controller 中的部分逻辑放在 Service 或 Factory 中,保持 Controller 的简洁 [Style Y035]
- 不要对多个 Views 使用同一 Controller,如果有可复用代码,应该放到 Factory 中,保持 Controller 专注于它自己的 View [Style Y037]
Service && Factory
Service
Angular 中的 Service 会通过 new
关键字被实例化,其中的方法和属性会被直接添加在 this
上。因此,通常可以使用 Factory 代替 Service [Style Y040] 。
所有的 Angular Service 都是单例的。
1
|
// service
|
Factory
Factory 的创建应该符合单一职责原则 [Style Y050] ,和 Service 一样,Factory 也是单例的,它返回一个包含 Service 中成员的对象,Factory 和 Service 的区别可参见 AngularJS 中 Provider 们 一文。
建议将 Factory 中可访问的成员放在顶部 [Style Y052] :
1
|
function logger($log) {
|
Data Service
将产生数据和与数据交互的操作放在一个 DataService 的 Factory 中,让其负责 XHR 调用、local storage 等任何与数据相关的操作。这样能让 Controller 专注于展示和为 View 层收集信息上 [Style Y060] 。
Controller 不需要关心数据是怎么得到的,而只应该知道从谁那里拿数据。
一种建议的 dataservice 书写方式:
1
|
angular
|
当调用一个返回 promise 的 dataservice 时,在调用函数中,也返回一个 promise,方便后续的链式处理 [Style Y061]。 调用 dataservice 的 Controller 的写法如下:
1
|
angular
|
Directive
将跟 DOM 相关的操作都放在 Directive 中。在能使用 CSS 设置样式,使用 animation services 设置动画及使用 Angular templating、ngShow
或者 ngHide
的情况下,尽量避免使用 Directive [Style Y072] 。
为每个指令单独创建一个文件,这样能方便跨应用共享,并且便于查找 [Style Y070]。还有,为指令提供一个简短唯一的前缀 [Style Y072] 。
将指令限定为 Elements 和 Attributes,这(EA) 在 Angular 1.3+ 中已经是默认设置 [Style Y074] 。
为保持一贯性,在 Directive 中同样应该使用 controllerAs 语法来将 Controller 和 View 配对 [Style Y075] 。由于 Directive 的 Controller 是在 Directive 闭包外面的,所以,如果想将外层 scope 和 Directive 中 Controller 的 scope 绑定,(Angular 1.3+)可以设置 bindToController = true
[Style Y076]。
下面是一个完整的示例。
主文件:
1
|
<div my-example max="77"></div>
|
example.directive.js
文件:
1
|
angular
|
example.directive.html
文件:
1
|
<div>hello world</div>
|
Dependency Injection
由于AngularJS是通过构造函数的参数名字来推断依赖服务名称的。所以如果要压缩JS代码,它所有的参数也同时会被压缩,这时候依赖注入系统就不能正确的识别出服务了 [Style Y090] 。
有两种方法可以解决这个问题:
方法一
1
|
angular
|
从易于阅读的角度考虑,建议第二种 [Style Y091] 。
当然,如果使用自动化构建工具 Gulp 或 Grunt 的话,还有一种更好的办法,使用 ng-annotate,自动生成 DashboardController.$inject
部分的代码 [Style Y100] ,如下:
1
|
angular
|