1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
|
---
category: framework
framework: AngularJS
contributors:
- ["Walter Cordero", "http://waltercordero.com"]
filename: learnangular-cn.html
translators:
- ["Jiang Haiyun", "http://www.atjiang.com"]
lang: zh-cn
---
## AngularJS 教程。
AngularJS 1.0 版在 2012 年发布。
Miško Hevery, 一位 Google 员工， 从 2009 年开始开发 AngularJS。
结果发现这个想法很好，从而该项目现在也被 Google 官方所支持了。
AngularJS 是一个 JavaScript 框架。它可以通过一个 "script" 标签添加到一个 HTML 页面中。
AngularJS 通过指令扩展了 HTML 属性，并且通过表达式将数据绑定到 HTML。
## 你应该已经了解了的知识
在学习 AngularJS 之前， 你应该对以下知识有了基本的了解：
- HTML
- CSS
- JavaScript
```html
// AngularJS 是一个 JavaScript 框架。它是一个用 JavaScript 写的库。
// AngularJS 以一个 JavaScript 文件的形式发布，并且能通过一个 script 标签添加到一个网页中：
// <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
///////////////////////////////////
// AngularJS 扩展 HTML
//AngularJS 通过 ng-directives 扩展 HTML。
//ng-app 指令定义一个 AngularJS 应用。
//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
//ng-bind 指令将应用的数据绑定到 HTML 视图上。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
/*
* 例子解析：
* AngularJS 在网页加载后自动开启。
* ng-app 指令告诉 AngularJS： <div> 元素是 AngularJS 应用的 "所有者"。
* ng-model 指令将 input 输入框的值绑定到应用的 name 变量上。
* ng-bind 指令将 <p> 元素的 innerHTML 绑定到应用的 name 变量上。
*/
<tag> 这里是要解析的内容 </tag>
///////////////////////////////////
// AngularJS 表达式
// AngularJS 表达式写在双括号内： {{ 表达式 }}。
// AngularJS 表达式采用和 ng-bind 指令一样的方式将数据绑定到 HTML。
// AngularJS 将在编写表达式的原样位置上 "输出" 数据。
// AngularJS 表达式非常像 JavaScript 表达式：它们能包含文本，运算符和变量。
// 例如 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
//如果你删除了 ng-app 指令， HTML 将原样显示表达式，不对它进行解析：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
// AngularJS 表达式采用和 ng-bind 指令一样的方式将 AngularJS 数据绑定到 HTML。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
// AngularJS 的数字类似 JavaScript 的数字：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
//AngularJS 的字符串类似 JavaScript 的字符串：
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
//AngularJS 的对象类似 JavaScript 的对象：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
//AngularJS 的数组类似 JavaScript 的数组：
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
// 和 JavaScript 表达式一样， AngularJS 表达式能包含文本，运算符和变量。
// 和 JavaScript 表达式不同， AngularJS 表达式能写在 HTML 内。
// AngularJS 表达式不支持条件，循环和异常，而 JavaScript 表达式却支持。
// AngularJS 表达式支持过滤器，而 JavaScript 表达式不支持。
///////////////////////////////////
// AngularJS 指令
//AngularJS 指令使用前缀 ng- 扩展 HTML 属性。
//ng-app 指令初始化一个 AngularJS 应用。
//ng-init 指令初始化应用的数据。
//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
//使用 ng-init 并不常见。你将在有关控制器的章节中学习如何初始化数据。
//ng-repeat 指令会重复一个 HTML 元素：
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
//ng-repeat 指令用在一个对象数组上：
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
// AngularJS 最适合用于数据库 CRUD (Create Read Update Delete) 的应用。
// 只需设想这些对象都是来自一个数据库的记录。
// ng-app 指令定义一个 AngularJS 应用的根元素。
// ng-app 指令将在页面加载后自动启动（自动初始化）应用。
// 稍后你将学习如何为 ng-app 设置一个值（如 ng-app="myModule"）， 来连接代码模块。
// ng-init 指令为一个 AngularJS 应用定义初始值。
// 通常，你不太使用 ng-init。你会转而使用一个控制器或模块。
// 你将在稍后学到更多有关控制器和模块的内容。
//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
//ng-model 指令还能：
//为应用的数据提供类型验证 (number, email, required)。
//为应用的数据提供状态信息 (invalid, dirty, touched, error)。
//为 HTML 元素提供 CSS 类。
//将 HTML 元素绑定到 HTML 表单。
//ng-repeat 指令为集合（一个数组）中的每个元素克隆出 HTML 元素。
///////////////////////////////////
// AngularJS 控制器
// AngularJS 控制器控制 AngularJS 应用中的数据。
// AngularJS 控制器就是常规的 JavaScript 对象。
// AngularJS 应用由控制器控制。
// ng-controller 指令定义应用的控制器。
// 一个控制器就是一个 JavaScript 对象， 通过标准的 JavaScript 对象构建器创建。
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
//应用的解析：
//AngularJS 应用通过 ng-app="myApp" 定义。该应用运行在 <div> 内。
//ng-controller="myCtrl" 属性是一个 AngularJS 指令。它定义了一个控制器。
//myCtrl 函数是一个 JavaScript 函数。
//AngularJS 将使用一个 $scope 对象来调用控制器。
//AngularJS 中， $scope 就是该应用对象（应用的变量和函数的所有者）。
//该控制器在 $scope 内创建了两个属性（即变量 firstName 和 lastName）。
//ng-model 指令将输入表单项绑定到控制器的属性上（firstName 和 lastName）。
//以上的例子演示了一个包含有两个属性 lastName 和 firstName 的控制器。
//一个控制器也可以有方法（函数的变量）：
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
//在较大型的应用中， 通常是将控制器代码保存在外部文件中。
//只需将 <script> </script> 标签之间的代码复制到一个名为 personController.js 的外部文件中：
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
// 为方便下个例子使用，我们将创建一个新的控制器文件：
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
//将文件保存为 namesController.js：
//然后在一个应用中使用该控制器：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
///////////////////////////////////
// AngularJS 过滤器
// 过滤器可以通过一个管道符添加到表达式和指令上。
// AngularJS 过滤器能用来转换数据：
- **currency**: 将一个数字格式化成货币格式。
- **filter**: 从一个数组中选择一组子集元素。
- **lowercase**: 将一个字符串格式化成小写形式。
- **orderBy**: 依据一个表达式排序一个数组。
- **upper**: 将一个字符串格式化成大写形式。
//一个过滤器可以通过一个管道符 (|) 及一个过滤器表达式添加到一个表达式上。
//（在下面的两个例子中，我们将使用前一章中的 person 控制器）
//uppercase 过滤器将字符串格式化成大写格式：
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
//lowercase 过滤器将字符串格式化成小写格式：
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
//currency 过滤器将一个数字格式化成货币格式：
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
//一个过滤器可以通过一个管道符 (|) 及一个过滤器表达式添加到一个指令上。
//orderBy 过滤器根据一个表达式排序一个数组：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
//一个输入框过滤器可以通过一个管道符 (|)
//以及后跟一个冒号和模式名的 filter 添加到一个指令上。
//该过滤器从一个数组中选择一个子集：
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
///////////////////////////////////
// AngularJS AJAX - $http
//$http 是一个从远程服务器读取数据的 AngularJS 服务。
// 以下数据可由一个 web 服务器提供：
// http://www.w3schools.com/angular/customers.php
// **访问 URL 来查看数据格式**
// AngularJS $http 是一个从 web 服务器上读取数据的核心服务。
// $http.get(url) 这个函数用来读取服务器数据。
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
// 应用解析：
// AngularJS 应用由 ng-app 定义。该应用运行在一个 <div> 中。
// ng-controller 指令命名控制器对象。
// customersCtrl 函数是一个标准的 JavaScript 对象构造器。
// AngularJS 会使用一个 $scope 和 $http 对象来调用 customersCtrl。
// $scope 就是该应用对象（应用的变量和函数的所有者）。
// $http 是一个用于请求外部数据的 XMLHttpRequest 对象。
// $http.get() 从 http://www.w3schools.com/angular/customers.php 读取 JSON 数据。
// 如果成功， 该控制器会根据来自服务器的 JSON 数据，在 $scope 中创建一个属性 (names)。
// 向不同的服务器（不同于请求页）请求数据，称作跨站 HTTP 请求。
// 跨站请求在网站上很普遍。许多网页会从不同的服务器加载 CSS，图片和脚本。
// 在现代浏览器中，基于安全原因，从脚本内进行跨站 HTTP 请求是被禁止的。
// 下面的这行代码，已被加入到我们的 PHP 例子中，以便允许跨站访问。
header("Access-Control-Allow-Origin: *");
///////////////////////////////////
// AngularJS 表格
// 使用 angular 显示表格非常简单：
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
// 要排序表格，添加一个 orderBy 过滤器：
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
// 要显示表格索引值，添加一个带有 $index 的 <td>：
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
// 使用 $even 和 $odd
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
///////////////////////////////////
// AngularJS HTML DOM
//AngularJS 有用于将应用的数据绑定到 HTML DOM 元素属性的指令。
// ng-disabled 指令将 AngularJS 应用的数据绑定到 HTML 元素的 disabled 属性上。
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
</div>
//应用解析：
// ng-disabled 指令将应用的 mySwitch 数据绑定到 HTML 按钮的 disabled 属性上。
// ng-model 指令将 HTML checkbox 元素的值绑定到 mySwitch 的值上。
// 如果 mySwitch 的值求值为 true，则该按钮将被禁用：
<p>
<button disabled>Click Me!</button>
</p>
// 如果 mySwitch 的值求值为 false，则该按钮将不会被禁用：
<p>
<button>Click Me!</button>
</p>
// ng-show 指令显示或隐藏一个 HTML 元素。
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
// ng-show 指令基于 ng-show 的值显示（或隐藏）一个 HTML 元素。
// 你可以使用任何能求值成 true 或 false 的表达式：
<div ng-app="">
<p ng-show="hour > 12">I am visible.</p>
</div>
///////////////////////////////////
// AngularJS 事件
// AngularJS 有它自己的 HTML 事件指令。
// ng-click 指令定义一个 AngularJS 点击事件。
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
// ng-hide 指令可用于设置一个应用的部分区域的可见性。
// 值 ng-hide="true" 使得一个 HTML 元素不可见。
// 值 ng-hide="false" 使得一个 HTML 元素可见。
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
//应用解析：
// personController 的第一部分和讲述控制器章节中的一样。
// 该应用有一个默认属性（一个变量）：$scope.myVar = false：
// ng-hide 指令依据 myVar 的值（true 或 false），
// 设置 <p> 元素的可见性，该元素含有两个输入框。
// 函数 toggle() 将 myVar 在 true 和 false 间进行切换。
// 值 ng-hide="true" 使得该元素不可见。
// ng-show 指令也能用来设置一个应用的某部分的可见性。
// 值 ng-show="false" 使得一个 HTML 元素不可见。
// 值 ng-show="true" 使得一个 HTML 元素可见。
// 这个例子与上面的一样，但用 ng-show 替代了 ng-hide：
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
///////////////////////////////////
// AngularJS 模块
// 一个 AngularJS 模块定义一个应用。
// 模块是一个应用的不同部分所在的一个容器。
// 模块是应用控制器的一个容器。
// 控制器总是隶属于一个模块。
// 这个应用 ("myApp") 有一个控制器 ("myCtrl")：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
// 在 AngularJS 应用中通常将模块和控制器放置在 JavaScript 文件中。
// 在本例中，"myApp.js" 包含了一个应用模块的定义，而 "myCtrl.js" 包含了控制器：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
//myApp.js
var app = angular.module("myApp", []);
// 模块定义中的 [] 参数可用来定义依赖的模块。
// myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
// JavaScript 中应该避免使用全局函数。它们会非常容易地被覆盖
// 或被其它脚本破坏。
// AngularJS 脚本通过将所有函数保存在模块内，缓解了这种问题。
// 虽然 HTML 应用中通常是将脚本放置在
// <body> 元素的末尾，但还是推荐你要么在
// <head> 中要么在 <body> 的开头处加载 AngularJS 库。
// 这是因为对 angular.module 的调用只有在库被加载后才能被编译。
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
///////////////////////////////////
// AngularJS 应用
// AngularJS 模块定义 AngularJS 应用。
// AngularJS 控制器控制 AngularJS 应用。
// ng-app 指令定义该应用，ng-controller 定义该控制器。
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
// AngularJS 模块定义应用：
var app = angular.module('myApp', []);
// AngularJS 控制器控制应用：
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
```
|
