|
51 | 51 | 1. [JSHint](#js-hint)
|
52 | 52 | 1. [常量](#常量)
|
53 | 53 | 1. [文件模板和片段](#文件模板和片段)
|
| 54 | + 1. [Yeoman Generator](#yeoman-generator) |
| 55 | + 1. [路由](#路由) |
| 56 | + 1. [任务自动化](#任务自动化) |
54 | 57 | 1. [AngularJS文档](#angularjs文档)
|
55 | 58 | 1. [贡献](#贡献)
|
56 | 59 | 1. [许可](#许可)
|
|
730 | 733 | ###可访问的成员放到顶部###
|
731 | 734 | ###### [Style [Y052](#style-y052)]
|
732 | 735 |
|
733 |
| - - 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service中可调用的成员暴露到顶部, |
| 736 | + - 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service(它的接口)中可调用的成员暴露到顶部, |
734 | 737 |
|
735 | 738 | *为什么?*:把可调用的成员放到顶部使代码更加易读,并且让你可以立即识别service中的哪些成员可以被调用,哪些成员必须进行单元测试(或者被别人嘲笑)。
|
736 | 739 |
|
|
1097 | 1100 | }
|
1098 | 1101 | ```
|
1099 | 1102 |
|
1100 |
| - 注:directive有很多命名选项,特别是从它们能够在一个狭隘的或者广泛的作用域中使用时,选择一个让directive和文件都清楚分明的名字。下面有一些例子,不过更多的建议去看命名章节。 |
| 1103 | + 注:directive有很多命名选项,特别是从它们能够在一个狭隘的或者广泛的作用域中使用时。选择一个让directive和它的文件名都清楚分明的名字。下面有一些例子,不过更多的建议去看命名章节。 |
1101 | 1104 |
|
1102 | 1105 | ###在directive中操作DOM
|
1103 | 1106 | ###### [Style [Y072](#style-y072)]
|
|
1209 | 1212 | },
|
1210 | 1213 | link: linkFunc,
|
1211 | 1214 | controller : ExampleController,
|
1212 |
| - controllerAs: 'vm' |
| 1215 | + controllerAs: 'vm', |
| 1216 | + bindToController: true // because the scope is isolated |
1213 | 1217 | };
|
1214 | 1218 |
|
1215 | 1219 | return directive;
|
1216 | 1220 |
|
1217 | 1221 | function linkFunc(scope, el, attr, ctrl) {
|
1218 |
| - console.log('LINK: scope.max = %i', scope.max); |
1219 |
| - console.log('LINK: scope.vm.min = %i', scope.vm.min); |
1220 |
| - console.log('LINK: scope.vm.max = %i', scope.vm.max); |
| 1222 | + console.log('LINK: scope.min = %s *** should be undefined', scope.min); |
| 1223 | + console.log('LINK: scope.max = %s *** should be undefined', scope.max); |
| 1224 | + console.log('LINK: scope.vm.min = %s', scope.vm.min); |
| 1225 | + console.log('LINK: scope.vm.max = %s', scope.vm.max); |
1221 | 1226 | }
|
1222 | 1227 | }
|
1223 | 1228 |
|
|
1227 | 1232 | // Injecting $scope just for comparison
|
1228 | 1233 | var vm = this;
|
1229 | 1234 |
|
1230 |
| - vm.min = 3; |
1231 |
| - vm.max = $scope.max; |
1232 |
| - console.log('CTRL: $scope.max = %i', $scope.max); |
1233 |
| - console.log('CTRL: vm.min = %i', vm.min); |
1234 |
| - console.log('CTRL: vm.max = %i', vm.max); |
| 1235 | + vm.min = 3; |
| 1236 | + |
| 1237 | + console.log('CTRL: $scope.vm.min = %s', $scope.vm.min); |
| 1238 | + console.log('CTRL: $scope.vm.max = %s', $scope.vm.max); |
| 1239 | + console.log('CTRL: vm.min = %s', vm.min); |
| 1240 | + console.log('CTRL: vm.max = %s', vm.max); |
1235 | 1241 | }
|
1236 | 1242 |
|
1237 | 1243 |
|
1238 | 1244 | ```
|
1239 | 1245 |
|
1240 | 1246 | ```html
|
1241 |
| - /* example.directive.html */ |
| 1247 | + <!-- example.directive.html --> |
1242 | 1248 | <div>hello world</div>
|
1243 | 1249 | <div>max={{vm.max}}<input ng-model={vm.max"/></div>
|
1244 | 1250 | <div>min={{vm.min}}<input ng-model={vm.min"/></div>
|
1245 | 1251 | ```
|
1246 | 1252 |
|
| 1253 | +###### [Style [Y076](#style-y076)] |
| 1254 | +
|
| 1255 | + - 当directive中使用了`controller as`语法时,如果你想把父级作用域绑定到directive的controller作用域时,使用`bindToController = true`。 |
| 1256 | +
|
| 1257 | + *为什么?*:这使得绑定作用域到controller变得更加简单。 |
| 1258 | +
|
| 1259 | + 注意:Angular 1.3.0才介绍了`bindToController`。 |
| 1260 | +
|
| 1261 | + ```html |
| 1262 | + <div my-example max="77"></div> |
| 1263 | + ``` |
| 1264 | +
|
| 1265 | + ```javascript |
| 1266 | + angular |
| 1267 | + .module('app') |
| 1268 | + .directive('myExample', myExample); |
| 1269 | + |
| 1270 | + function myExample() { |
| 1271 | + var directive = { |
| 1272 | + restrict: 'EA', |
| 1273 | + templateUrl: 'app/feature/example.directive.html', |
| 1274 | + scope: { |
| 1275 | + max: '=' |
| 1276 | + }, |
| 1277 | + controller: ExampleController, |
| 1278 | + controllerAs: 'vm', |
| 1279 | + bindToController: true |
| 1280 | + }; |
| 1281 | + |
| 1282 | + return directive; |
| 1283 | + } |
| 1284 | + |
| 1285 | + function ExampleController() { |
| 1286 | + var vm = this; |
| 1287 | + vm.min = 3; |
| 1288 | + console.log('CTRL: vm.min = %s', vm.min); |
| 1289 | + console.log('CTRL: vm.max = %s', vm.max); |
| 1290 | + } |
| 1291 | + ``` |
| 1292 | +
|
| 1293 | + ```html |
| 1294 | + <!-- example.directive.html --> |
| 1295 | + <div>hello world</div> |
| 1296 | + <div>max={{vm.max}}<input ng-model="vm.max"/></div> |
| 1297 | + <div>min={{vm.min}}<input ng-model="vm.min"/></div> |
| 1298 | + ``` |
| 1299 | +
|
1247 | 1300 | **[返回顶部](#目录)**
|
1248 | 1301 |
|
1249 | 1302 | ## 解决Controller的Promises
|
|
2366 | 2419 |
|
2367 | 2420 | *为什么?*:更新源代码的时候可以更简单地在同一时间更新测试代码。
|
2368 | 2421 |
|
| 2422 | + *为什么?*:方便源码阅读者了解组件如何使用,也便于发现其中的局限性。 |
| 2423 | +
|
2369 | 2424 | *为什么?*:方便找。
|
2370 | 2425 |
|
2371 | 2426 | *为什么?*:方便使用grunt或者gulp。
|
|
2597 | 2652 |
|
2598 | 2653 | **[返回顶部](#目录)**
|
2599 | 2654 |
|
| 2655 | +## Yeoman Generator |
| 2656 | +###### [Style [Y260](#style-y260)] |
| 2657 | +
|
| 2658 | +你可以使用[HotTowel yeoman generator](http://jpapa.me/yohottowel)来创建一个遵循本指南的Angular起步应用。 |
| 2659 | +
|
| 2660 | +1. 安装generator-hottowel |
| 2661 | +
|
| 2662 | + ``` |
| 2663 | + npm install -g generator-hottowel |
| 2664 | + ``` |
| 2665 | +
|
| 2666 | +2. 创建一个新的文件夹并定位到它 |
| 2667 | +
|
| 2668 | + ``` |
| 2669 | + mkdir myapp |
| 2670 | + cd myapp |
| 2671 | + ``` |
| 2672 | +
|
| 2673 | +3. 运行生成器 |
| 2674 | +
|
| 2675 | + ``` |
| 2676 | + yo hottowel helloWorld |
| 2677 | + ``` |
| 2678 | +**[返回顶部](#目录)** |
| 2679 | +
|
| 2680 | +## 路由 |
| 2681 | +客户端路由对于在视图和很多小模板和指令组成的构成视图中创建导航是非常重要的。 |
| 2682 | +###### [Style [Y270](#style-y270)] |
| 2683 | +
|
| 2684 | + - 用[AngularUI Router](http://angular-ui.github.io/ui-router/)来做路由控制。 |
| 2685 | +
|
| 2686 | + *为什么?*:它包含了Angular路由的所有特性,并且增加了一些额外的特性,如嵌套路由和状态。 |
| 2687 | +
|
| 2688 | + *为什么?*:语法和Angular路由很想,很容易迁移到UI Router。 |
| 2689 | +
|
| 2690 | +###### [Style [Y271](#style-y271)] |
| 2691 | +
|
| 2692 | + - Define routes for views in the module where they exist. |
| 2693 | + Each module should contain the routes for the views in the module. |
| 2694 | +
|
| 2695 | + *为什么?*:每个模块应该是独立的。 |
| 2696 | +
|
| 2697 | + *为什么?*:当删除或增加一个模块时,应用程序只包含指向现存视图的路由。(也就是说删除模块和增加模块都需更新路由) |
| 2698 | +
|
| 2699 | + *为什么?*:这使得可以在不关心孤立的路由时很方便地启用或禁用应用程序的某些部分。 |
| 2700 | +
|
| 2701 | +**[返回顶部](#目录)** |
| 2702 | +
|
| 2703 | +## 任务自动化 |
| 2704 | +用[Gulp](http://gulpjs.com)或者[Grunt](http://gruntjs.com)来创建自动化任务。Gulp偏向于代码在配置之上,Grunt更倾向于配置高于代码。我更倾向于使用gulp,因为gulp写起来比较简单。 |
| 2705 | +
|
| 2706 | +###### [Style [Y400](#style-y400)] |
| 2707 | +
|
| 2708 | + - 用任务自动化在其它JavaScript文件之前列出所有模块的定义文件`*.module.js`。 |
| 2709 | +
|
| 2710 | + *为什么?*:Angular中,模块使用之前必须先注册。 |
| 2711 | +
|
| 2712 | + *为什么?*:带有特殊规则的模块命名,例如`*.module.js`,会让你很轻松地识别它们。 |
| 2713 | +
|
| 2714 | + ```javascript |
| 2715 | + var clientApp = './src/client/app/'; |
| 2716 | + |
| 2717 | + // Always grab module files first |
| 2718 | + var files = [ |
| 2719 | + clientApp + '**/*.module.js', |
| 2720 | + clientApp + '**/*.js' |
| 2721 | + ]; |
| 2722 | + ``` |
| 2723 | +
|
| 2724 | +**[返回顶部](#目录)** |
| 2725 | +
|
2600 | 2726 | ## AngularJS文档
|
2601 | 2727 | [Angular文档](//docs.angularjs.org/api)。
|
2602 | 2728 |
|
|
2653 | 2779 |
|
2654 | 2780 |
|
2655 | 2781 | ###过程
|
2656 |
| - 1. 在一个Issue中讨论这个问题。 |
2657 |
| - 2. 打开一个pull request,引用这个问题,解释你做的修改和为什么要这样做。 |
| 2782 | + 1. 在Github Issue中讨论这个问题。 |
| 2783 | + 2. 在develop分支中开一个pull request,引用这个问题,解释你做的修改和为什么要这样做。 |
2658 | 2784 | 3. pull request将会被进行评估,结果就是合并或是拒绝。
|
2659 | 2785 |
|
2660 | 2786 | ## 许可证
|
|
0 commit comments