AngularJS入门指南：实战与资源推荐

AngularJS

需积分: 33 161 浏览量更新于2024-07-19 收藏 5.86MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

懒虫一个翻译

16 / 163

页面的某一部分。

<html>

…

…

</div>

…

</html>

模型视图控制器(MVC)

在第一章，我们曾经提到 Angular 支持 MVC 的应用程序设计风格。尽管你在设计 Angular

应用时有很多灵活性，但是你将会发现更多：

 模型中包含了代表应用当前状态的数据

 视图显示了这些数据

 控制器管理这模型和视图的关系

使用对象属性，或者只是原型包含的数据来创建模型。模型层变量没有什么特别的。如

果想向用户展示文本，你可以设置成字符串，就想这样：

var someText = 'You have started your journey.';

你可以通过写一个模板作为 HTML 页面，创建视图层，然后用模型中的数据合并它。正

如我们看到的，你可以在 DOM 中插入一个占位符，设置它的内容，就像这样：

<p>{{someText}}</p>

我们称这个为二次解析赋值（doule-curly syntax interpolation），因为它把新的内容值插

入到一个已存在的模板中。

控制器是一些类或者是你写的类型告知 Angular 哪个对象或者原型通过将他们指定到

$scope 对象传递到控制器填充模型

function TextController($scope) {

$scope.someText = someText;

}

结合起来，就是：

<p>{{someText}}</p>

懒虫一个翻译

18 / 163

var myAppModule = angular.module('myApp', []);

myAppModule.controller('TextController',

function($scope) {

var someText = {};

someText.message = 'You have started your journey.';

$scope.someText = someText;

});

</script>

</body>

</html>

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了 Angular

对象创建一个名为 myApp 的模块，传递了控制器函数给模块的控制器函数。

We’ll get to all the whys and hows of modules in a bit.现在，只要记住，远离全局命名空间

是一件好事。模块化这是我们通用的机制。

模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML 文档或者是定义在<script>标

签中的一些静态资源。你在模板中定义界面，在界面组件中使用标准的 HTML 加上 Angular

标识符。

一旦在 WEB 浏览器中，Angular 通过合并模板和数据扩展这些模板到整个应用。之前当

我们显示购物车中的物品列表时，在第一章看过这样的例子

<span>{{item.title}}</span>

...

</div>

这里，除了<div>外部，里面的所有内容，数组中的每个元素运行一次。

那么这些数据来自哪里？在我们购物车示例中，我们只是以代码的形式定义了一个数组。

当你开始构建 UI 和只是想测试它如何运作这将能够运作的非常好。然而大多数应用会在服

务器端使用一些持久化数据的代码。你的应用在浏览器中连接到服务端，为用户请求它需要

的任何内容，Angular 将它和模板合并。

基本的启动流程就像这样：

1. 用户请求应用的第一页面。

2. 用户的浏览器发出一个 HTTP 链接到你服务器，加载包含模板的 index.html 页面。

3. Angular 加载到页面，等待页面完全加载完成，然后寻找 ng-app 定义模板的边界。

4. Angular 经过模板寻找标识符和捆绑。这样的结果是监听器和 DOM 操作完成了注册，同

时从服务器查询初始化数据。这块工作的最终结果是应用完成了自举（启动完成，计算

懒虫一个翻译

19 / 163

机专业用语），就像 DOM 一样将模板转换成是视图。

5. 你连接到服务器按需加载你额外需要展示给用户的数据。

步骤 1 至 3 是每个 Angular 应用标准的步骤。步骤 4 和 5，你可以做选择。这些步骤可

以同步或异步发生。为了性能，应用需要展示给用户的一个视图数据可以随 HTML 模板一起

加载，可以避免多次请求。

通过使用 Angular 结构化你的应用，应用程序的模板和填充它们的数据是分离开的。这

样的好处就是这些模板现在可缓存了。在第一次加载后，只有新数据加载到浏览器。只有

JavaScript，图片，CSS 和其他资源，缓存这些模板可以给应用更好的性能。

显示文本

你可以在界面中使用 ng-bind 标识符显示和更新文本。它有两种等价的形式。之前我们

看到过使用两个大括号的形式：

<p>{{greeting}}</p>

另外一个基于属性标识符的叫做 ng-bind:

以上两个在输出上是等价的。如果模型变量 greeting 的值是‘Hi there,’，Angular 生成

HTML：

<p>Hi there</p>

浏览器上会显示‘Hi there’。

那么，你为什么会使用一种形式，而不是另外一种。我们创造了双括号插补语法，阅读

起来更加自然，需要更少的输入。然而两种形式产生等价的输出，使用双括号语法，在应用

的 index.html 每次页面加载上，在 Angular 用数据替换大括号之前，用户是有可能看到未渲

染的模板。后面的视图就不会遇到这样的情况。

原因是这样的，浏览器加载 HTML 页面，渲染，最后 Angular 才能按照你的意图解析它。

好消息是你仍可以在大多数模板中使用{{ }}。然而，为了在 index.html 页面做数据绑定，

用 ng-bind 代替之。这样一来，直到数据加载用户才能看到内容。

表单输入

在 Angular 中使用表单元素很简单的。正如我们在几个示例中所看到的，你可以使用

ng-model 属性来绑定元素到模型的属性上。这个能够和像输入框，单选按钮，复选框等等

所有标准的元素正常工作。我们可以像这样绑定一个复选框到属性：

懒虫一个翻译

20 / 163

</form>

这意味着：

1. 如果选中它，SomeController 中的$scope 一个叫 youCheckedIt 属性值会变成 true。不选

中的话 youCheckedIt 就是 false。

2. 如果你在 SomeController 中设置$scope.youCheckedIt 为 true，那么界面上就会选中复选

框。相反则不选中。

现在让我们讨论下当用户操作时我们实际上想要做的。对于输入框，用 ng-change 属性

来指定一个控制器的方法，当用户输入的值发生变化时将被调用。让我们做一个简单的计算

示例，来帮助创业者了解他们需要多少资金支持。

Starting: <input ng-change="computeNeeded()"

ng-model="funding.startingEstimate">

Recommendation: {{funding.needed}}

</form>

对于我们这个单纯的例子，我们只是设置了输出是用户的价值的 10 倍。同时我们设置了一

个默认值 0 作为开始：

function StartUpController($scope) {

$scope.funding = { startingEstimate: 0 };

$scope.computeNeeded = function() {

$scope.funding.needed = $scope.funding.startingEstimate * 10;

};

}

然而，处理代码的策略上这里有个潜在的问题。问题是，当用户在输入框中输入时，我

们只是重新计算了需要的数量。如果在这种场景下当用户输入时，输入框只是做了更新，这

看上去运行的很好。但是倘若其他的输入框也绑定到这个模型的属性该怎么办？倘若当来自

服务器的数据，是否会更新呢？

我们可以用$scope 的$watch 函数更新这个字段，无论它是如何被更新的。我们将在章

后面详细讨论$wath 函数。简单的说就是你可以调用$watch()，传递一个观察的表达式和一

个回调函数，当表达式改变时，将调用回调函数。

既然这样，我们希望监控 funding.startingEstimate ，每当它改变时就调用

computeNeeded()；然后我们就可以使用这项技术重写 StartUpController：

function StartUpController($scope) {

$scope.funding = { startingEstimate: 0 };

computeNeeded = function() {

$scope.funding.needed = $scope.funding.startingEstimate * 10;

批注 [spy2]: 原文有错误

剩余162页未读，继续阅读

BrunoMe

粉丝: 0
资源: 3

AngularJS入门指南：实战与资源推荐

用AngularJS开发下一代Web应用一书源代码

使用AngularJS开发下一代Web应用 配套 代码

用AngularJS开发下一代Web应用.英文版.196页完整版.带书签.高清文字版PDF

angularjs 1.x 通过 require.js 引入ngDialog 0.6.3

angularjs 学习网站

angularjs .ts文件 filesaver.saveas 保存到指定路径

webOffice.js

Angularjs相关介绍

论述AngularJS React Vue.is

使用angularjs开发的好处

angularjs webapi

angularjs入门与进阶pdf

使用 html css angularjs 开发的可行性

大型单页web应用是什么

Web应用程序开发代码

angularjs 入门

angularjs和angular的区别

Angularjs可输入的下拉框

angularjs写的webui怎么发布到网络

angularjs教学

最新资源

使用AngularJS开发下一代Web应用配套代码