Angular规范

/ 0评 / 0

Angular规范@john_papa

如果你正在寻找一些关于语法、约定和结构化的Angular应用的一个有建设性的规范,那么你来对地方了。这里所包含的内容是基于我在团队中使用Angular的一些经验、一些演讲和Pluralsight培训课程

这个规范的目的是为构建Angular应用提供指导,当然更加重要的是让大家知道我为什么要选择它们。

如果你喜欢这个规范,请在Pluralsight看看Angular Patterns: Clean Code

Angular Patterns: Clean Code

Community Awesomeness and Credit

Angular社区是一个热衷于分享经验的令人难以置信的社区,尽管Todd Motto(他是我的一个朋友,也是Angular专家)和我合作了多种规范和惯例,但是我们也存在着一些分歧。我鼓励你去看看Todd的指南,在那里你能看到我们之间的区别。

我的许多规范都是从大量的程序会话Ward Bell和我所拥有的而来的,我的好友Ward也影响了本规范的最终演变。

在示例App中了解这些规范

看示例代码有助于你更好地理解,你可以在modular文件夹下找到命名为modular的示例应用程序,随便克隆。

翻译

Angular规范翻译版本

目录

  1. 单一职责
  2. IIFE
  3. Modules
  4. Controllers
  5. Services
  6. Factories
  7. Data Services
  8. Directives
  9. 解决Controller的Promises
  10. 手动依赖注入
  11. 压缩和注释
  12. 异常处理
  13. 命名
  14. 应用程序结构LIFT原则
  15. 应用程序结构
  16. 模块化
  17. 启动逻辑
  18. Angular $包装服务
  19. 测试
  20. 动画
  21. 注释
  22. JSHint
  23. JSCS
  24. 常量
  25. 文件模板和片段
  26. Yeoman Generator
  27. 路由
  28. 任务自动化
  29. Filters
  30. Angular文档
  31. 贡献
  32. 许可

单一职责

规则一

[Style Y001]

返回顶部

IIFE

JavaScript闭包

[Style Y010]

返回顶部

Modules

避免命名冲突

[Style Y020]

定义(aka Setters)

[Style Y021]

Getters

[Style Y022]

Setting vs Getting

[Style Y023]
- 设置module,`angular.module('app', []);`。 - 获取module,`angular.module('app');`。 

命名函数 vs 匿名函数

[Style Y024]

回到顶部

Controllers

controllerAs在View中的语法

[Style Y030]

controllerAs在controller中的语法

[Style Y031]

controllerAs with vm

[Style Y032]

可绑定成员放到顶部

[Style Y033]

函数声明隐藏实现细节

[Style Y034]

把Controller中的逻辑延迟到Service中

[Style Y035]

保持Controller的专一性

[Style Y037]

分配Controller

[Style Y038]

返回顶部

Services

单例

[Style Y040]

返回顶部

Factories

单一职责

[Style Y051]

单例

[Style Y051]

可访问的成员放到顶部

[Style Y052]

函数声明隐藏实现细节

[Style Y053]

返回顶部

Data Services

独立的数据调用

[Style Y060]

数据调用返回一个Promise

[Style Y061]

返回顶部

Directives

一个directive一个文件

[Style Y070]

在directive中操作DOM

[Style Y072]

提供一个唯一的Directive前缀

[Style Y073]

限制元素和属性

[Style Y074]

Directives和ControllerAs

[Style Y075]
[Style Y076]

返回顶部

解决Controller的Promises

Controller Activation Promises

[Style Y080]

Route Resolve Promises

[Style Y081]

返回顶部

手动依赖注入

压缩的不安全性

[Style Y090]

手动添加依赖

[Style Y091]

手动确定路由解析器依赖

[Style Y092]

返回顶部

压缩和注释

ng-annotate

[Style Y100]

使用Gulp或Grunt结合ng-annotate

[Style Y101]

返回顶部

异常处理

修饰符

[Style Y110]

异常捕获器

[Style Y111]

路由错误

[Style Y112]

返回顶部

命名

命名原则

[Style Y120]

功能文件命名

[Style Y121]

测试文件命名

[Style Y122]

Controller命名

[Style Y123]

Controller命名后缀

[Style Y124]

Factory命名

[Style Y125]

Directive组件命名

[Style Y126]

模块

[Style Y127]

配置

[Style Y128]

路由

[Style Y129]

返回顶部

应用程序结构的LIFT准则

LIFT

[Style Y140]

Locate

[Style Y141]

Identify

[Style Y142]

Flat

[Style Y143]

T-DRY(尽量坚持DRY)

[Style Y144]

返回顶部

应用程序结构

总规范

[Style Y150]

Layout

[Style Y151]

按功能划分文件夹结构

[Style Y152]

返回顶部

模块化

许多小的、独立的模块

[Style Y160]

创建一个App Module

[Style Y161]

保持App Module的精简

[Style Y162]

功能区域就是模块

[Style Y163]

可重用的块就是模块

[Style Y164]

模块依赖

[Style Y165]

返回顶部

启动逻辑

配置

[Style Y170]

运行代码块

[Style Y171]

返回顶部

Angular $包装服务

$document和$window

[Style Y180]

$timeout和$interval

[Style Y181]

返回顶部

测试

单元测试有助于保持代码的清晰,因此我加入一些关于单元测试的基础和获取更多信息的链接。

用故事来编写测试

[Style Y190]

测试库

[Style Y191]

测试运行器

[Style Y192]

Stubbing和Spying

[Style Y193]

Headless Browser

[Style Y194]

代码分析

[Style Y195]

-在你的测试上运行JSHint。

*为什么?*:测试也是代码,JSHint能够帮你识别代码中可能导致测试无法正常工作的的质量问题。 

对测试降低全局JSHint规则

[Style Y196

组织测试

[Style Y197]

返回顶部

动画

用法

[Style Y210]

Sub Second

[Style Y211]

animate.css

[Style Y212]

返回顶部

注释

jsDoc

[Style Y220]

返回顶部

JS Hint

使用一个Options文件

[Style Y230]

返回顶部

JSCS

用一个Options文件

[Style Y235]

返回顶部

常量

供应全局变量

[Style Y240]
[Style Y241]

返回顶部

文件模板和片段

为了遵循一致的规范和模式,使用文件模板和片段,这里有针对一些web开发的编辑器和IDE的模板和(或)片段。

Sublime Text

[Style Y250]

Visual Studio

[Style Y251]

WebStorm

[Style Y252]

Atom

[Style Y253]

Brackets

[Style Y254]

vim

[Style Y255]

Yeoman Generator

[Style Y260]

你可以使用HotTowel yeoman generator来创建一个遵循本规范的Angular入门应用。

  1. 安装generator-hottowel

    npm install -g generator-hottowel 
  2. 创建一个新的文件夹并定位到它

    mkdir myapp cd myapp 
  3. 运行生成器

    yo hottowel helloWorld 

返回顶部

路由

客户端路由对于在视图和很多小模板和指令组成的构成视图中创建导航是非常重要的。

[Style Y270]
[Style Y271]

返回顶部

任务自动化

Gulp或者Grunt来创建自动化任务。Gulp偏向于代码在配置之上,Grunt更倾向于配置高于代码。我更倾向于使用gulp,因为gulp写起来比较简单。

可以在我的Gulp Pluralsight course了解更多gulp和自动化任务的信息

[Style Y400]

返回顶部

Filters

[Style Y420]

返回顶部

Angular文档

Angular文档

贡献

先打开一个问题讨论潜在的变化和增加。如果你对这篇规范有任何疑惑,随时在仓库中提出问题。如果你发现了一个错字,创建一个pull request。这样做是为了保持内容的更新,使用github的原生功能通过问题和PR来帮助讲述这个故事,具体做法可以google一下。为什么?因为如果你有问题,其他人可能有同样的问题,你在这里可以学到如何贡献。

贡献代码到这个仓库就意味着你同意了本仓库的许可证内容

过程

1. 在Github Issue中讨论这个问题。 2. 拉取一个pull request,引用这个问题,解释你做的修改和为什么要这样做。 3. pull request将会被进行评估,结果就是合并或是拒绝。 

许可证

Copyright

Copyright (c) 2014-2015 John Papa

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注