Skip to content

Commit 882f32b

Browse files
committed
Merge pull request johnpapa#275 from natee/master
Update to latest version
2 parents 4a82ed3 + 4880563 commit 882f32b

File tree

1 file changed

+140
-14
lines changed

1 file changed

+140
-14
lines changed

i18n/zh-CN.md

Lines changed: 140 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@
5151
1. [JSHint](#js-hint)
5252
1. [常量](#常量)
5353
1. [文件模板和片段](#文件模板和片段)
54+
1. [Yeoman Generator](#yeoman-generator)
55+
1. [路由](#路由)
56+
1. [任务自动化](#任务自动化)
5457
1. [AngularJS文档](#angularjs文档)
5558
1. [贡献](#贡献)
5659
1. [许可](#许可)
@@ -730,7 +733,7 @@
730733
###可访问的成员放到顶部###
731734
###### [Style [Y052](#style-y052)]
732735
733-
- 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service中可调用的成员暴露到顶部,
736+
- 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service(它的接口)中可调用的成员暴露到顶部,
734737
735738
*为什么?*:把可调用的成员放到顶部使代码更加易读,并且让你可以立即识别service中的哪些成员可以被调用,哪些成员必须进行单元测试(或者被别人嘲笑)。
736739
@@ -1097,7 +1100,7 @@
10971100
}
10981101
```
10991102
1100-
注:directive有很多命名选项,特别是从它们能够在一个狭隘的或者广泛的作用域中使用时,选择一个让directive和文件都清楚分明的名字。下面有一些例子,不过更多的建议去看命名章节。
1103+
注:directive有很多命名选项,特别是从它们能够在一个狭隘的或者广泛的作用域中使用时。选择一个让directive和它的文件名都清楚分明的名字。下面有一些例子,不过更多的建议去看命名章节。
11011104
11021105
###在directive中操作DOM
11031106
###### [Style [Y072](#style-y072)]
@@ -1209,15 +1212,17 @@
12091212
},
12101213
link: linkFunc,
12111214
controller : ExampleController,
1212-
controllerAs: 'vm'
1215+
controllerAs: 'vm',
1216+
bindToController: true // because the scope is isolated
12131217
};
12141218

12151219
return directive;
12161220

12171221
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);
12211226
}
12221227
}
12231228

@@ -1227,23 +1232,71 @@
12271232
// Injecting $scope just for comparison
12281233
var vm = this;
12291234

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);
12351241
}
12361242

12371243

12381244
```
12391245
12401246
```html
1241-
/* example.directive.html */
1247+
<!-- example.directive.html -->
12421248
<div>hello world</div>
12431249
<div>max={{vm.max}}<input ng-model={vm.max"/></div>
12441250
<div>min={{vm.min}}<input ng-model={vm.min"/></div>
12451251
```
12461252
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+
12471300
**[返回顶部](#目录)**
12481301
12491302
## 解决Controller的Promises
@@ -2366,6 +2419,8 @@
23662419
23672420
*为什么?*:更新源代码的时候可以更简单地在同一时间更新测试代码。
23682421
2422+
*为什么?*:方便源码阅读者了解组件如何使用,也便于发现其中的局限性。
2423+
23692424
*为什么?*:方便找。
23702425
23712426
*为什么?*:方便使用grunt或者gulp。
@@ -2597,6 +2652,77 @@
25972652
25982653
**[返回顶部](#目录)**
25992654
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+
26002726
## AngularJS文档
26012727
[Angular文档](//docs.angularjs.org/api)。
26022728
@@ -2653,8 +2779,8 @@
26532779
26542780
26552781
###过程
2656-
1. 在一个Issue中讨论这个问题。
2657-
2. 打开一个pull request,引用这个问题,解释你做的修改和为什么要这样做。
2782+
1. 在Github Issue中讨论这个问题。
2783+
2. 在develop分支中开一个pull request,引用这个问题,解释你做的修改和为什么要这样做。
26582784
3. pull request将会被进行评估,结果就是合并或是拒绝。
26592785
26602786
## 许可证

0 commit comments

Comments
 (0)