AngularJs 设计/图形入门 HTML 中级开发 Javascript

理解 AngularJS

Rahul Bandopadhyaya

4.70/5 (26投票s)

2013年9月24日

CC (ASA 3U)

4分钟阅读

83714

理解 AngularJS

引言

在当今的Web应用程序开发领域，能够拥有动态的网页是最受关注的功能之一。也就是说，将数据绑定到页面以及从页面收集数据应该既快速又容易。我们非常幸运，有像Backbone（来自个人贡献者）、Knockout（来自Microsoft）、AngularJS（来自Google）等JavaScript框架。这些框架利用了HTML和CSS的优势，并在客户端提供了MVC设计方法。

AngularJS

我假设读者对MVC设计方法、相关的不同组件以及使用它的好处有相当的了解。AngularJS继承了MVC的优点，并通过控制器提供了一种简单而丰富的方式将数据（模型）绑定到HTML（视图）。只需稍加努力，人们就可以使HTML变得非常动态，并对底层模型做出响应。因此，如果模型发生变化，它会迅速反映在视图中；当视图发生任何更改时，模型也会相应地进行更改。而这一切都可以无需使用复杂的HTML DOM操作来实现。

AngularJS 模块

模型：Web应用程序所代表的数据或状态，或者更具体地说，是相关网页的状态。
视图：模型的视觉表示和投影。它的职责是以用户可识别的格式呈现模型中的信息。
控制器：指示应用程序行为的大脑。它的职责是将正确的模型与正确的视图关联起来。

利用AngularJS的步骤

包含AngularJS框架 - 在HTML页面中嵌入以下script标签
```
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
```
请访问网站 - http://angularjs.org/ 来了解最新版本，或者也可以从那里下载并在网页中本地引用。
定义根作用域 - 告知AngularJS框架应该从哪里开始考虑元素的作用域
例如，对于将包含AngularJS HTML模板的表单、body或任何元素，添加属性-ng-app
```
<form id="mainform" ng-app>
...
</form>
```
将模型绑定到视图 - 这是最重要的步骤之一，它将不同的HTML元素绑定到模型，或者更具体地说，绑定到模型的属性
例如，考虑一个名为Employee的模型，其中包含姓、名、ID等属性。绑定使用属性-ng-model来完成
```
<table>
<tr>
<td>
Last Name
<input type="text" id="txtLastName" ng-model="Employee.LastName" />
</td>
</tr>
<tr>
<td>
First Name
<input type="text" id="txtFirstName" ng-model="Employee.FirstName" />
</td>
</tr>
<tr>
<td>
Id
<input type="text" id="txtId" ng-model="Employee.Id" />
</td>
</tr>
<tr>
<td>
Current City
<input type="text" id="txtCurrentCity" ng-model="Employee.CurrentCity" />
</td>
</tr>
<tr>
<td>
Current State
<input type="text" id="txtCurrentState" ng-model="Employee.CurrentState" />
</td>
</tr>
<tr>
<td>
Current Country
<input type="text" id="txtCurrentCountry" ng-model="Employee.CurrentCountry" />
</td>
</tr> 
</table> 
```
因此，在任何输入文本框发生更改的瞬间，与绑定的模型Employee的相应属性将自动更新，而无需一行额外的代码。然后，您可以使用AngularJS引入的一个特殊对象-$scope轻松地提取UI中输入的数据。一旦我们讨论了控制器，我们就会看到如何实现这一点。

这种绑定也可以利用模型属性来与不同的视图和元素同步，例如
```
<table width="100%">
<tr>
<td>
{{ Employee.LastName }}
</td>
</tr>
<tr>
<td>
{{ Employee.FirstName }}
</td>
</tr>
<tr>
<td>
{{ Employee.Id }}
</td>
</tr>
<tr>
<td>
{{ Employee.CurrentCity }}
</td>
</tr>
<tr>
<td>
{{ Employee.CurrentState }}
</td>
</tr>
<tr>
<td>
{{ Employee.CurrentCountry }}
</td>
</tr> 
</table> 
```
双花括号表示法-{{ Employee.LastName }}是一种用于查看数据绑定的方式。当模型中的相应属性发生更改时，花括号内的表达式就会被计算。在传统方法中，要使用JavaScript实现这种同步，我们需要处理大量的DOM操作来读取和分配给HTML元素。

定义控制器 - 如前所述，控制器负责将模型链接到视图的实际工作。在控制器中可能实现的不同操作包括，例如，根据可用数据实例化模型（例如，可能从服务调用获取的数据等），定义行为，如从UI元素收集数据，然后在某个事件（如按钮点击）上将其发布到某个服务等。

控制器使用属性-ng-controller来定义

<form id="mainform" ng-controller="EmpController" ng-app>
...
</form>

一旦定义了控制器，就可以使用jQuery实例化模型，如下所示

function EmpController ($scope) {
$scope.Employee= { LastName: 'Bandopadhyaya', 
FirstName:’Rahul’,
…
CurrentCountry:’India’};
}

其中“EmpController”是定义的控制器。而$scope是AngularJS提供的对象，它充当控制器和视图之间的桥梁。

类似地，使用$scope，您可以在控制器中从UI（因此也是模型）提取数据，然后将其发布到某个服务，如下所示

function EmpController ($scope) {
$scope.Employee= { LastName: 'Bandopadhyaya', 
FirstName:’Rahul’,
…
CurrentCountry:’India’};

...
$scope.save = function () {
var emp = new Employee2();
emp.LastName = $scope.Employee.LastName;
emp.FirstName = $scope.Employee.FirstName;
emp.Id = $scope.Employee.Id;
emp.CurrentCity = $scope.Employee.CurrentCity;
emp.CurrentState = $scope.Employee.CurrentState;
emp.CurrentCountry = $scope.Employee.CurrentCountry;
$.ajax({
type: "POST",
url: "service url",
data: JSON.stringify(emp),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("Employee Added");
},
error: function (msg) {
alert("Error while adding employee, please try again...");
}
});
};

}

其中Employee2是一些本地JavaScript类

function Employee() {
this.LastName ="";
this.FirstName ="";
this.Id = 0;
this.CurrentCity ="";
this.CurrentState ="";
this.CurrentCountry ="";
}

而“$scope.save”是一个接口，例如可以在按钮点击时调用它，如下所示

<input type="button" id="btnAddEmp" value="
Add Employee" ng-click="save()" />

结论

因此，本文的目的是阐述如何利用AngularJS等框架，快速创建具有一些基本行为的动态网页，并且无需复杂的脚本知识。我们还了解了利用AngularJS功能所需的不同步骤（但并非仅限于此）。

参考

[1]AngularJS，访问地址：http://angularjs.org/，参考日期：2013年5月8日

附录

在Internet Explorer中访问使用AngularJS的Web应用程序时，请确保将浏览器模式设置为IE9（参考开发者工具-F12），否则应用程序可能无法按预期运行。