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

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

《AngularJS开发下一代Web应用.pdf》是一本针对AngularJS初学者的教程，由作者“懒虫一个”翻译自英文原著，旨在帮助读者掌握AngularJS的基本知识和核心概念。该书共160页，适合在四天内完成学习。书中涵盖了AngularJS的多个关键主题，如： 1. **AngularJS简介**：章节详细解释了AngularJS的概念，包括客户端模板，其在Web应用中的作用以及模型视图控制器（MVC）模式。这部分内容是理解AngularJS框架的基础。 2. **数据绑定**：展示了Angular如何自动将数据同步到页面元素，使得开发者无需频繁手动更新视图，提高了开发效率。 3. **依赖注入（DI）**：介绍了Angular的DI机制，这是其架构中的一个重要特性，能够简化组件之间的交互和管理。 4. **指令**：讲解了如何创建自定义指令，扩展Angular的功能，并通过实例——购物车示例，展示了指令在实际项目中的应用。 5. **非侵入性JavaScript建议**：提倡在使用Angular时保持JavaScript代码的简洁和模块化，避免过度侵入性的修改。 6. **高级主题**：涉及更深入的内容，如模块的组织和依赖管理，如何利用过滤器处理和格式化数据，以及UI与控制器的分离等高级开发技巧。此外，译者还提供了配套资源，如GitHub上的源代码和推荐的进一步学习资源，如《MasteringWebApplicationDevelopmentwithAngularJS》。在整个翻译过程中，译者强调尊重原作版权，并欢迎读者提出反馈和建议，以不断完善译文质量。通过阅读这本书，读者可以快速上手AngularJS，并为其Web应用开发打下坚实的基础。对于想要在现代前端开发中探索MVW（Model-View-Whatever）架构的开发者来说，这是一本不可或缺的参考资料。

懒虫一个翻译

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应用指南

用AngularJS开发下一代Web应用.pdf

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

用AngularJS开发下一代Web应用（英文）PDF版本下载.txt

AngularJS开发下一代Web应用（中英两套）

用AngularJS开发下一代Web应用(AngularJS 2013)-中英双版本

AngularJS开发下一代Web应用（中文高清版 带标签）

AngularJS：下一代Web应用开发

最新资源

AngularJS开发下一代Web应用（中文高清版带标签）