|
2 | 2 |
|
3 | 3 | *AngularJS风格指南[@john_papa](//twitter.com/john_papa)* |
4 | 4 |
|
5 | | -*Translation by [kerncink](https://github.com/natee)* |
| 5 | +*由[kerncink](https://github.com/natee)翻译* |
6 | 6 |
|
7 | | ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. |
| 7 | +>[原始英文版本](http://jpapa.me/ngstyles)将会在第一时间维护和更新,翻译版本的更新将会在这之后。 |
8 | 8 |
|
9 | | -如果你正在寻找一些关于语法、约定和结构化的AngularJS应用的一个有建设性的风格指南,这个正适合你。这里所包含的风格是基于我用[AngularJS](//angularjs.org)、演讲、[Pluralsight培训课程](http://pluralsight.com/training/Authors/Details/john-papa)并且在团队中运用的一些经验。 |
| 9 | +如果你正在寻找一些关于语法、约定和结构化的AngularJS应用的一个有建设性的风格指南,这个repo正适合你。这里所包含的风格是基于我在团队中使用[AngularJS](//angularjs.org)的一些经验、一些演讲和[Pluralsight培训课程](http://pluralsight.com/training/Authors/Details/john-papa)。 |
10 | 10 |
|
11 | | ->如果你喜欢这个指南,在Pluralsight上check out我的[AngularJS Patterns: Clean Code](http://jpapa.me/ngclean)。 |
| 11 | +>如果你喜欢这个指南,请在Pluralsight上检出我的[AngularJS Patterns: Clean Code](http://jpapa.me/ngclean)。 |
12 | 12 |
|
13 | | -这个风格指南的目的是通过展示我用到的约定给构建AngularJS应用提供指导,更加重要的是,我为什么要选择它们。 |
| 13 | +这个风格指南的目的是为构建AngularJS应用提供指导,当然更加重要的是让大家知道我为什么要选择它们。 |
14 | 14 |
|
15 | 15 | ## Community Awesomeness and Credit |
16 | | -我发现AngularJS社区是一个热衷于分享经验的令人难以置信的社区,因此,我的一个朋友、AngularJS专家Todd Motto和我合作了多种风格和惯例。我们同意其中的大多数,但是也有一些分歧。我鼓励你去看看[Todd的指引](https://github.com/toddmotto/angularjs-styleguide),从其中了解他的做法和它们是如何比较的。 |
| 16 | +我发现AngularJS社区是一个热衷于分享经验的令人难以置信的社区,尽管Todd Motto(他是我的一个朋友,也是AngularJS专家)和我合作了多种风格和惯例,但是我们也存在着一些分歧。我鼓励你去看看[Todd的指南](https://github.com/toddmotto/angularjs-styleguide),从其中了解他的做法和它们是如何比较的。 |
17 | 17 |
|
18 | 18 | 我的许多风格都是从大量的程序会话[Ward Bell](http://twitter.com/wardbell)和我所拥有的而来的,虽然我们并不总是能达成一致,但是Ward确实影响了本指南的最终演变。 |
19 | 19 |
|
|
31 | 31 | 1. [Factories](#factories) |
32 | 32 | 1. [Data Services](#data-services) |
33 | 33 | 1. [Directives](#directives) |
34 | | - 1. [解决Controller的Promises](#解决Controller的Promises) |
| 34 | + 1. [解决Controller的Promises](#解决controller的promises) |
35 | 35 | 1. [手动依赖注入](#手动依赖注入) |
36 | 36 | 1. [压缩和注释](#压缩和注释) |
37 | 37 | 1. [异常处理](#异常处理) |
38 | 38 | 1. [命名](#命名) |
39 | | - 1. [应用程序结构LIFT原则](#应用程序结构LIFT原则) |
| 39 | + 1. [应用程序结构LIFT原则](#应用程序结构lift原则) |
40 | 40 | 1. [应用程序结构](#应用程序结构) |
41 | 41 | 1. [模块化](#模块化) |
42 | 42 | 1. [启动逻辑](#启动逻辑) |
|
47 | 47 | 1. [JSHint](#js-hint) |
48 | 48 | 1. [常量](#常量) |
49 | 49 | 1. [文件模板和片段](#文件模板和片段) |
50 | | - 1. [AngularJS文档](#AngularJS文档) |
| 50 | + 1. [AngularJS文档](#angularjs文档) |
51 | 51 | 1. [贡献](#贡献) |
52 | 52 | 1. [许可](#许可) |
53 | 53 |
|
|
57 | 57 |
|
58 | 58 | - 一个文件只定义一个组件。 |
59 | 59 |
|
60 | | - 下面的一个例子在同一个文件中定义了一个`app`的module和它的一些依赖,定义了一个controller,一个factory。 |
| 60 | + 下面的一个例子在同一个文件中定义了一个`app`的module和它的一些依赖、一个controller和一个factory。 |
61 | 61 |
|
62 | 62 | ```javascript |
63 | 63 | /* avoid */ |
|
71 | 71 | function someFactory() { } |
72 | 72 | ``` |
73 | 73 | |
74 | | - 现在相同的组件被分割成单独的文件。 |
| 74 | + 现在把相同的组件分割成单独的文件。 |
75 | 75 |
|
76 | 76 | ```javascript |
77 | 77 | /* recommended */ |
|
181 | 181 |
|
182 | 182 | - 不使用任何一个使用了setter语法的变量来定义modules。 |
183 | 183 |
|
184 | | - *为什么?*: 在一个文件只有一个组件的条件下,很少有需要为一个模块引入一个变量。 |
| 184 | + *为什么?*:在一个文件只有一个组件的条件下,很少有需要为一个模块引入一个变量。 |
185 | 185 |
|
186 | 186 | ```javascript |
187 | 187 | /* avoid */ |
|
248 | 248 | /* avoid */ |
249 | 249 | angular |
250 | 250 | .module('app') |
251 | | - .controller('Dashboard', function() { }); |
| 251 | + .controller('Dashboard', function() { }) |
252 | 252 | .factory('logger', function() { }); |
253 | 253 | ``` |
254 | 254 |
|
|
497 | 497 | ``` |
498 | 498 |
|
499 | 499 | 注意这里重要的代码分散在前面的例子中。 |
500 | | - 下面的示例中,可以看到重要的代码都放到了顶部。实现的详细细节都在下方,这样的代码当然是更易读的。 |
| 500 | + 下面的示例中,可以看到重要的代码都放到了顶部。实现的详细细节都在下方,显然这样的代码更易读。 |
501 | 501 |
|
502 | 502 | ```javascript |
503 | 503 | /* |
|
534 | 534 |
|
535 | 535 | *为什么?*:把逻辑放到service中,并通过一个function暴露,就可以被多个controller重用。 |
536 | 536 |
|
537 | | - *为什么?*:把逻辑放到service中将会使单元测试的时候更加容易地把它们分离,相反,如果在controller中调用逻辑只会让这变得被别人嘲笑。 |
| 537 | + *为什么?*:把逻辑放到service中将会使单元测试的时候更加容易地把它们分离,相反,如果在controller中调用逻辑就显得很二了。 |
538 | 538 |
|
539 | 539 | *为什么?*:从controller中删除依赖关系并且隐藏实现细节。 |
540 | 540 |
|
|
679 | 679 |
|
680 | 680 | - facotry是一个单例,它返回一个包含service成员的对象。 |
681 | 681 | |
682 | | - 注意:[所有的AngularJS services都是单例](https://docs.angularjs.org/guide/services),这意味着每个injector都只有一个实例化的service。 |
| 682 | + 注:[所有的AngularJS services都是单例](https://docs.angularjs.org/guide/services),这意味着每个injector都只有一个实例化的service。 |
683 | 683 |
|
684 | 684 | ###可访问的成员放到顶部### |
685 | 685 |
|
|
962 | 962 |
|
963 | 963 | ###一个文件限制一个 |
964 | 964 |
|
965 | | - - 在一个文件中只创建一个directive,并依照directive来命名文件。 |
| 965 | + - 一个文件中只创建一个directive,并依照directive来命名文件。 |
966 | 966 |
|
967 | 967 | *为什么?*:把所有directive放到一个文件中很容易,但是当一些directive是跨应用的,一些是跨模块的,一些仅仅在一个模块中使用时,想把它们独立出来是非常困难的。 |
968 | 968 |
|
|
1046 | 1046 | } |
1047 | 1047 | ``` |
1048 | 1048 |
|
1049 | | - 注意:directive有很多命名选项,特别是从它们能够在一个狭隘的或者广泛的作用域中使用时,选择一个让directive和文件都清楚分明的名字。下面有一些例子,不过更多的建议去看命名章节。 |
| 1049 | + 注:directive有很多命名选项,特别是从它们能够在一个狭隘的或者广泛的作用域中使用时,选择一个让directive和文件都清楚分明的名字。下面有一些例子,不过更多的建议去看命名章节。 |
1050 | 1050 |
|
1051 | 1051 | ###限制DOM操作 |
1052 | 1052 |
|
|
1131 | 1131 |
|
1132 | 1132 | 注意:下面的directive演示了一些你可以在link和directivedirective控制器中使用scope的方法,用controllerAs。这里把template放在行内是为了在一个地方写出这些代码。 |
1133 | 1133 |
|
| 1134 | + 注意:关于依赖注入的内容,请看[手动依赖注入](#手动依赖注入)。 |
| 1135 | +
|
1134 | 1136 | ```html |
1135 | 1137 | <div my-example max="77"></div> |
1136 | 1138 | ``` |
|
1151 | 1153 | controller : ExampleController, |
1152 | 1154 | controllerAs: 'vm' |
1153 | 1155 | }; |
| 1156 | + |
| 1157 | + ExampleController.$inject = ['$scope']; |
1154 | 1158 | return directive; |
1155 | 1159 |
|
1156 | | - ExampleController.$inject = ['$scope']; |
1157 | 1160 | function ExampleController($scope) { |
1158 | 1161 | // Injecting $scope just for comparison |
1159 | 1162 | /* jshint validthis:true */ |
|
1283 | 1286 | } |
1284 | 1287 | ``` |
1285 | 1288 | |
1286 | | - 注意:示例代码中的`movieService`不是安全压缩的做法,可以到[依赖注入](#依赖注入)和[压缩和注释](#压缩和注释)部分学习如何安全压缩。 |
| 1289 | + 注意:示例代码中的`movieService`不是安全压缩的做法,可以到[手动依赖注入](#手动依赖注入)和[压缩和注释](#压缩和注释)部分学习如何安全压缩。 |
1287 | 1290 |
|
1288 | 1291 |
|
1289 | 1292 | **[返回顶部](#目录)** |
|
2079 | 2082 | } |
2080 | 2083 | ``` |
2081 | 2084 |
|
2082 | | -### 运行块 |
| 2085 | +### 运行代码块 |
2083 | 2086 |
|
2084 | | - - 任何在应用程序启动时需要运行的代码都应该在factory中声明,通过一个function暴露出来,然后注入到[运行块](https://docs.angularjs.org/guide/module#module-loading-dependencies)。 |
| 2087 | + - 任何在应用程序启动时需要运行的代码都应该在factory中声明,通过一个function暴露出来,然后注入到[运行代码块](https://docs.angularjs.org/guide/module#module-loading-dependencies)中。 |
2085 | 2088 |
|
2086 | | - *为什么?*:直接在运行块处写代码将会使得测试变得很困难,相反,如果放到facotry则会使的抽象和模拟变得很简单。 |
| 2089 | + *为什么?*:直接在运行代码块处写代码将会使得测试变得很困难,相反,如果放到facotry则会使的抽象和模拟变得很简单。 |
2087 | 2090 |
|
2088 | 2091 | ```javascript |
2089 | 2092 | angular |
|
2440 | 2443 |
|
2441 | 2444 | ###过程 |
2442 | 2445 | 1. 在一个Issue中讨论这个问题。 |
2443 | | - 1. 打开一个pull request,引用这个问题,解释你做的修改和为什么要这样做。 |
2444 | | - 1. pull request将会被进行评估,结果就是合并或是拒绝。 |
| 2446 | + 2. 打开一个pull request,引用这个问题,解释你做的修改和为什么要这样做。 |
| 2447 | + 3. pull request将会被进行评估,结果就是合并或是拒绝。 |
2445 | 2448 |
|
2446 | 2449 | ## 许可证 |
2447 | 2450 |
|
|
0 commit comments