实践教程在 HTML page 里面加入 AngularJS在您的 JavaScript 文件中加入以下代码，即可使用 AngularJS。
清单 1.加入 AngularJS 引用1
2
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"
></script>
|
从双向数据绑定开始双向数据绑定是 AngularJS 的一个重要特性，它提供了一个简单的机制，能够让您通过{{ 表达式 }}这个形式轻松地绑定数据到 HTML 上，请看下面这个简单的数据绑定的例子。
清单 2.双向数据绑定1
2
3
4
5
6
7
8
9
10
11
12
13
| index.html
!DOCTYPE html><html>
<head>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{data.message + " world"}}</h1>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</body>
</html>
|
在最外层的 div 中设置了一个 ng-app 属性(少了这个属性，AngularJS 就没办法工作)， 一般这个属性表明这个元素已经这个元素内部的所有元素都是属于设定的这个 app 的。在后面我们会详细说到 ng-app 这个属性。
在这个 div 内部，设置了一个 input，并对 data.message 这个 Model 做双向数据绑定。最后，使用{{data.message}}告诉 AngularJS 在指定的 HTML 处显示 data.message 这个 Model 的数据，也就是用户输入的数据。
就这么几句话，就已经是完成了一个本来要耗费多得多的时间和代码来开发的动态应用。在这里，我们不需要给双向数据绑定写任何规则，不需要给更新 Model 和 View 写任何代码，甚至不需要编写任何 Model。事实上，我们根本都还没开始碰 JavaScript。我们不需要写代码，直到我们想开发更个性化的应用行为为止。
controller 和$scope 的使用controller 在 AngularJS 里面也是非常重要的，它把数据和前端显示内容联系在一起，这里将会提供一个例子演示 controller 和$scope 的基本用法。
清单 3.controller 和$scope1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="MyFirstCtrl">
<h1>{{data.message + " world"}}</h1>
</div>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</body>
</html>
main.js
function MyFirstCtrl($scope){
$scope.data = {message: "Hello"};
}
|
使用 ng-controller 这个属性替代上个例子中的 ng-model 属性。"MyFirstCtrl"这个 controller 的作用域是当前 div 以及其所有子元素。
在新建的 main.js 中，定义一个叫 FirstCtrl 的处理函数，传入$scope(这个$scope 关联于当前 div 元素及其所有子元素)。
现在我们可以在有 ng-controller= MyFirstCtrl 属性的 DOM 元素的任何子元素里访问这个 data 对象，因为它在$scope 上。
$scope 实际上就是一个 JavaScript 对象，controller 和 view 都可以访问它，所以我们能利用它在两者间传递信息。在这个$scope 对象里，我们既存储数据，又存储将要运行在 view 上的函数。
多个 controller 之间共享数据本例将会使用 Service factory 来处理多个 controller 共享数据的问题
清单 4.Controller 之间的共享数据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
| index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyFirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
<div ng-controller="MySecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
return {message: "I'm data from a service"}
})
function FirstCtrl($scope, Data){
$scope.data = Data;
}
function SecondCtrl($scope, Data){
$scope.data = Data;
}
|
现在我们定义第一个 app 命名为"myApp",它其实就是一个 AngularJS 的模块。[] 代表这个定义的模块没有任何依赖模块。注意，在 HTML 中的名字需要跟 JavaScript 中定义的 app 的名字一致。
有个这个 myApp,我们可以创建一个 factory 来提供我们需要的 service。在这个例子中，我们的 service 名字叫 Data,它返回了一个字符串"I'm Data from a service"。刷新页面，可以看到从 service 返回的数据。
图 1. 运行结果 创建一个 service 就是简单的返回一个函数，这个函数返回一个对象。这个对象是在创建应用实例的时候创建的（记住，这个对象是单例对象）。
从这个例子可以看到，两个 controller 之间是完全独立的，并没有 root controller 或者 controller 直接的继承关系，仅仅是把 service 和这个对象传入两个 controller 中。 |
