Introduction to AngularJS

Our ability to create amazing web-based apps is incredible, but the complexity involved in making these apps is similarly incredible. We on the Angular team wanted to relieve the pain involved with developing AJAX applications. At Google, wersquo;d worked through the hard lessons of building large web applications like Gmail, Maps, Calendar, and several others. We thought we might be able to use these experiences to benefit everyone.
We wanted writing web apps to feel more like the first time we wrote a few lines of code and stood back in amazement at what wersquo;d made happen. We wanted the coding process to feel more like creating and less like trying to satisfy the strange inner workings of web browsers.
At the same time, we wanted an environment that helped us make the design choices that make apps easy to create and understand from the start, but that continue to be the right choices to make our apps easy to test, extend, and maintain as they grow large.
Wersquo;ve tried to do this in the Angular framework. Wersquo;re very excited about the results wersquo;ve achieved. A lot of credit goes to the open source community around Angular who do a fantastic job supporting each other and who have taught us many things. We hope yoursquo;ll join our community and help us learn how Angular can be even better.
Some of the larger and more involved examples and code snippets are available on a GitHub repository for you to look at, fork, and play with at our GitHub page.

Concepts

There are a few core ideas that yoursquo;ll use throughout an Angular app. As it turns out, we didnrsquo;t invent any of these. Instead, wersquo;ve borrowed heavily from successful idioms in other development environments and implemented them in a way that embraces HTML, browsers, and many other familiar web standards.

Client-Side Templates

Multi-page web applications create their HTML by assembling and joining it with data on the server, and then shipping the finished pages up to the browser. Most single-page applications—also known as AJAX apps—do this as well, to some extent. Angular is different in that the template and data get shipped to the browser to be assembled there. The role of the server then becomes only to serve as static resources for the templates and to properly serve the data required by those templates. Letrsquo;s see an example of what assembling this data and template on the browser looks like in Angular. Wersquo;ll take the obligatory Hello, World example, but instead of writing “Hello, World” as a single string, letrsquo;s structure the greeting “Hello” as data that we could change later. For it, wersquo;ll create our template in hello.html:

lt;html ng-appgt;

lt;headgt;

lt;script src='angular.js'gt;lt;/scriptgt;

lt;script src='controllers.js'gt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div ng-controller=HelloControllergt;

lt;pgt;{{greeting.text}}, Worldlt;/pgt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;

And our logic in controllers.js:

function HelloController($scope) {

$scope.greeting = { text: Hello };

}

Loading hello.html into any browser will then produce what we see in Figure 1-1:

Figure 1-1. Hello, World

There are a few interesting things to note here in comparison with most methods in widespread use today:
There are no classes or IDs in the HTML to identify where to attach event listeners.
bull; When HelloController set the greeting.text to Hello, we didnrsquo;t have to register any event listeners or write any callbacks.
bull; HelloController is a plain JavaScript class, and doesnrsquo;t inherit from anything that Angular provides.
bull; HelloController got the $scope object that it needed without having to create it.
bull; We didnrsquo;t have to call the HelloControllerrsquo;s constructor ourselves, or figure out when to call it.
Wersquo;ll look at more differences soon, but it should be clear already that Angular applications are structured very differently than similar applications were in the past.
Why have we made these design choices and how does Angular work? Letrsquo;s look at some good ideas Angular stole from elsewhere.

Model View Controller (MVC)

MVC application structure was introduced in the 1970s as part of Smalltalk. From its start in Smalltalk, MVC became popular in nearly every desktop development environment where user interfaces were involved. Whether you were using C , Java, or Objective-C, there was some flavor of MVC available. Until recently, however, MVC was all but foreign to web development.
The core idea behind MVC is that you have clear separation in your code between managing its data (model), the application logic (controller), and presenting the data to the user (view).
The view gets data from the model to display to the user. When a user interacts with the application by clicking or typing, the controller responds by changing data in the model. Finally, the model notifies the view that a change has occurred so that it can update what it displays. In Angular applications, the view is the Document Object Model (DOM), the controllers are JavaScript classes, and the model data is stored in object properties.
We think MVC is neat for several reasons. First, it gives you a mental model for where to put what, so you donrsquo;t have to invent it every time. Other folks collaborating on your project will have an instant leg up on understanding what yoursquo;ve written, as theyrsquo;ll know yoursquo;re using MVC structure to organize your code. Perhaps most importantly, wersquo;ll claim that it delivers great benefits in making your app easier to extend, maintain, and test.

Data Binding

Befo

剩余内容已隐藏，支付完成后下载完整资料

---

外文题目： AngularJS By Brad Green and Shyam Seshadri

2016年 4 月 15 日

AngularJS简介

我们能够写出令人惊叹的基于web的应用程序是不可思议的,但所涉及的复杂性使写出这些应用程序非常的困难。我们Angular团队想减少开发AJAX应用程序的难度。在谷歌,我们构建像Gmail,地图,日历,和其他几个大型web应用程序时得到了很多经验。我们想我们可以用这些经验让所有人受益。
我们想让编写web应用程序像我们第一次写几行代码一样,使我们感到惊奇。我们希望编码过程感觉更像创建而不是试图满足web浏览器奇怪的内部运作。

与此同时,我们想要一个可以帮助我们设计的环境，使程序变得易于创建和理解,当然,我们也要做到让应用程序容易测试,扩展和维护。
我们尝试了用Angular框架来达到这个目标。结果令我们十分兴奋。Angualr开源社区是一个帮助大家相互学习的很好的平台。我们希望你能加入我们的社区，和帮助我们把Angular变得更强大。
Github库上有很多相关的例子和代码片段供大家查看、拷贝和学习。

概念

这里有一些贯穿于Angular应用程序的核心概念。我们并没有虚构这些概念。相反,我们大举借鉴在其他开发环境中的成功案列并对HTML、各个浏览器,和许多其他常用的web标准进行了测试。

客户端模板

多页面的web应用程序通过服务器上的数据来创建交互HTML,当服务器完成页面后再返回给浏览器。在某种程度上，大多数单页面应用程序（也被称为AJAX应用）也是这样做的。Angualr与它们不同，模板和数据直接在浏览器上进行绑定。服务器的角色就变成了只为模板服务的静态资源和提供模板所需的数据。让我们看看Angular是怎样在浏览器上绑定模板和数据的。我们使用最常用的Hello,World这个例子,但我们不是简单的写“Hello,World'字符串,我们先构造问候语'Hello”作为我们之后要改变的数据，为此，我们在hello.html中创建模板:

lt;html ng-appgt;

lt;headgt;

lt;script src='angular.js'gt;lt;/scriptgt;

lt;script src='controllers.js'gt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div ng-controller=HelloControllergt;

lt;pgt;{{greeting.text}}, Worldlt;/pgt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;

在 controllers.js中的函数如下:

function HelloController($scope) {

$scope.greeting = { text: Hello };

}

在任何浏览器中打开hello.html将会看到如图1-1所示内容：

图 1-1 Hello,World

与目前广泛使用的许多方法相比，这里有一些有趣的事情要注意:
HTML中没有类或id来让我们添加事件侦听器。
bull; 当在HelloController函数中把greeting对象的text赋值Hello时,我们不需要注册事件侦听器或写任何回调。
bull; HelloController是i纯JavaScript函数,不继承任何Angular提供的函数。
bull; HelloController中所需的$scope对象不需要去创建。
bull; 我们不需要调用HelloController构造函数或是设置什么时候调用。
很快我们将看更多的差异,但现在已经可以很清楚的看到Angular应用程序的构造与过去类似的应用程序的构造有很大不同。
为什么我们这样设计和Angular是如何工作的呢?让我们来看看Angular从其他地方借鉴的一些好的思想。

模型-视图-控制器 (MVC)

MVC应用程序结构作为Smalltalk的一部分在1970年被引进。从Smalltalk开始,MVC几乎流行在每一个用户界面桌面开发环境。无论你是否在使用c 、Java或objective - C,它们都有一些MVC的影子。然而最近MVC广泛应用在web开发中。
MVC的核心理念是管理数据(模型),应用程序逻辑(控制器),向用户呈现数据(视图)，在代码中它们高度分离，。
视图从模型得到数据显示给用户。当用户通过点击或输入与应用程序交互时,控制器通过改变模型中的数据来响应用户的操作。最后,模型通知视图数据发生了变化让,视图更新显示的内容。
在Angular的应用程序中,视图是文档对象模型(DOM),控制器是JavaScript类，模型数据存储在对象的属性中。
我们认为MVC轻巧的原因有几个。首先,它提供模型让你可以绑定数据,所以你不需要每次都改变结构。与你合作的其他人能够很快的理解你所写的内容,因为他们知道你使用MVC结构来组织你的代码。或许最重要的是,我们确信它能提供极大的帮助使应用程序更容易扩展,维护和测试。

数据绑定

像jQuery一样的库将这个模型扩展到了客户端,让我们遵循类似的风格,但是更新DOM的一部分,而不是更新整个页面。在这里,我们将模板的HTML字符串和数据合并,然后通过设置innerHtml占位符元素将结果插入DOM中。
这样的方式来实现很好,但无论是在UI还是JavaScript属性中，当你想将新的数据插入到用户界面,或根据用户的输入更改数据,你需要做相当繁琐的工作以确保数据的正确性和准确性,。但如果我们可以在不写代码的情况下完成所有这些工作呢？如果我们可以声明JavaScripnt属性和UI一一对应,让他们自动同步呢?这种编程风格被称为数据绑定。我们在Angular中应用数据绑定,因为在编写视图和模型时数据绑定能和MVC完美结合以简化代码。大部分将数据从一个移动到另一个的工作都自动发生。
看到这,我们来看第一个动态的例子。Hello Controller只需设置模型greeting.text一次就不用再改变它。通过添加一个文本输入框来改变greeting.text的值,当用户输入文本时greeting.text的值会动态的改变。
模板如下所示:

lt;html ng-appgt;

lt;headgt;

lt;script src='angular.js'gt;lt;/scriptgt;

lt;script src='controllers.js'gt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div ng-controller=HelloControllergt;

lt;input ng-model=greeting.textgt;

lt;pgt;{{greeting.text}}, Worldlt;/pgt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;

控制器HelloController保持不变。

在浏览器中打开html，可以看到如图1-2所示的界面:

图1-2 greeting程序默认状态

如果我们将input输入框的Hello改为Hi，可以看到如图1-3所示界面:

图1-3 input值改变后的界面

没有给输入框注册一个改变监听器,我们有一个动态更新的UI。这同样也适用于从服务器来的改变。在我们的控制器中,我们可以向我们的服务器发送请求,得到响应,并设置scope.greeting的值为返回的内容。Angular将自动更新输入框和花括号中的文本值。

依赖注入

我们之前提到过这点,但是值得重复的是,在Hello Controller中有很多我们不需要写的代码。例如,$scope对象会自动帮我们进行数据绑定,我们不需要调用任何函数创建它。我们只是把它放到HelloController的构造函数来使用。
在后面的章节,我们会发现$scope不是我们唯一可以使用的对象。如果我们想将数据绑定在用户浏览器的URL位置,我们可以在我们的构造函数中添加管理这个的$location对象,如下所示:

function HelloController($scope, $location) {

$scope.greeting = { text: Hello }; // use $location for something good here...

}

我们通过Angular的依赖注入系统来实现这个神奇的效果。依赖注入让我们遵循的开发风格是我们的类只寻找他们所需要的东西,而不是创建依赖关系。
这是一个叫迪米特法则的设计模式,也称为最小知识原理。由于HelloController的工作是建立greeting模型的初始状态,这种模式不会涉及到其它东西,比如怎样创建$scope,或在哪里可以找到它。这个功能不只是实用于由Angular框架创建的对象。你也可以自己创建对象。

指令

Angular最好的一个部分是,你可以写自己的HTML模板。你可以这样做事因为我们的核心框架包括一个强大的DOM转换引擎,允许您扩展HTML的语法。
我们在模板中已经看到一些不符合HTML规范的新属性。例子包括double-curly符号进行数据绑定,ngcontroller指定控制器负责哪一部分的视图,ngmodel约束模板的输入。我们称这些HTML扩展为指令。
Angular有许多指令帮助你为应用程序定义视图。很快我们将会看到更多的指令。这些指令可以将我们常用的视图定义成模板。他们可以声明你的应用程序如何工作或被用来创建可重用的组件。
你不会局限于Angular自带的指令。你可以编写你自己的指令扩展HTML的模板去实现你想要的功能。

购物车的例子

让我们看一个稍大的例子,展示更多的Angular的能力。假设我们要建立一个购物应用。在应用中我们需要显示用户的购物车,并让他编辑它。让我们直接跳到这一部分。

lt;html ng-app=myAppgt;

lt;headgt;

lt;titlegt;Your Shopping Cartlt;/titlegt;

lt;/headgt;

lt;body ng-controller=CartControllergt;

lt;h1gt;Your Orderlt;/h1gt;

lt;div ng-repeat=item in itemsgt;

lt;spangt;{{item.title}}lt;/spangt;

lt;input ng-model=item.quantitygt;

lt;spangt;{{item.price | currency}}lt;/spangt;

lt;spangt;{{item.price * item.quantity | currency}}lt;/spangt;

lt;button ng-click='remove($index)'gt;Removelt;/buttongt;

lt;/divgt;

lt;script src='angular.js'gt;lt;/scriptgt;

lt;scriptgt;

function CartController($scope) {

$scope.items =

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[152314]，资料为PDF文档或Word文档，PDF文档可免费转换为Word