AngularJS入门指南：探索 Brad Green 和 Shyam Seshadri 的著作

需积分: 10 37 浏览量更新于2024-07-22 收藏 1.64MB PDF 举报

"AngularJS 入门书籍" AngularJS 是一款由 Google 主导开发的前端 JavaScript 框架，用于构建动态 web 应用程序。这本书由 Brad Green 和 Shyam Seshadri 合著，详细介绍了 AngularJS 的相关技术，旨在帮助读者快速掌握这一强大的框架。在 AngularJS 中，核心概念包括数据绑定、依赖注入、指令和服务等。数据绑定是 AngularJS 的一大特色，它允许开发者轻松地将视图与模型进行同步，减少了手动操作 DOM（文档对象模型）的需要。通过双向数据绑定，当模型发生变化时，视图会自动更新；反之亦然，用户在界面的交互也能实时反映到模型上。依赖注入是 AngularJS 的另一个关键特性，它简化了代码的组织和测试。开发者无需关心对象如何被创建或找到，而是声明所需的服务，框架会自动管理这些依赖。这使得代码更加模块化，提高了可重用性和可测试性。书中详细讲解了 AngularJS 的 MVC（模型-视图-控制器）架构模式，控制器负责处理业务逻辑，模型存储数据，视图则展示数据。此外，AngularJS 的指令系统允许开发者扩展 HTML，创建自定义的可复用组件。通过指令，可以实现如表单验证、动态加载内容等功能。服务在 AngularJS 中扮演着重要角色，它们是可注入的实体，可以跨控制器共享数据和功能。常见的服务有 $http 用于与服务器通信，$scope 作为控制器和视图之间的数据桥梁，$resource 用于处理 RESTful API 等。本书还会涵盖模块（ngModule）、过滤器（filter）、路由（routing）以及单元测试等方面，这些都是构建复杂应用不可或缺的部分。模块组织应用的结构，过滤器用于数据格式化和转换，路由则支持页面间的导航。在学习 AngularJS 的过程中，读者将了解到如何使用 AngularJS 的指令来增强 HTML，如何通过控制器处理用户输入，以及如何利用服务与后端进行数据交互。此外，了解如何编写单元测试，确保代码的质量和稳定性，也是学习的重要环节。《AngularJS》这本书提供了全面且深入的教程，适合初学者和有一定经验的开发者，帮助他们掌握这一强大的前端开发工具，提升构建现代 web 应用的能力。

Libraries like jQuery extended this model to the client and let us follow a similar style,

but with the ability to upda

te, part of the DOM separately, rather than updating the

whole page. Here, we merge template HTML strings with data, then insert the result

where we want it in the DOM by setting innerHtml on a placeholder element.

This all works pretty well, but when you want to insert fresher data into the UI, or change

the data based on user input, you need to do quite a bit of non-trivial work to make sure

you get the data into the correct state, both in the UI and in JavaScript properties.

But what if we could have all this work done for us without writing code? What if we

could just declare which parts of the UI map to which JavaScript properties and have

them sync automatically? This style of programming is called data binding. We included

it in Angular because it works great with MVC to eliminate code when writing your

view and model. Most of the work in moving data from one to the other just happens

automatically.

To see this in action, let’s take the first example and make it dynamic. As is, the Hello

Controller sets the model greeting.text once and it never changes from then on. To

make it live, let’s change the example by adding a text input that can change the value

of greeting.text as the user types.

Here’s the new template:

<head>

</head>

<body>

<p>{{greeting.text}}, World</p>

</div>

</body>

</html>

The controller, HelloController, can stay exactly the same.

Loading it in a browser, we’d see the screen captured in Figure 1-2.

Figure 1-2. The default state of the greeting app

If we replace Hello with Hi in the in

put field, we’d see the screen captured in Figure 1-3.

4 | Chapter 1: Introduction to AngularJS

Figure 1-3. The Greeting App with input changed

ithout ever registering a change listener on the input field, we have a UI that will

dynamically update. The same would be true for changes coming to and from the server.

In our controller, we could make a request to our server, get the response, and set

$scope.greeting.text to equal what it returns. Angular would automatically update

both the input and the text in the curly braces to that value.

Dependency Injection

We mentioned it before, but it bears repeating that there’s a lot going on with Hello

Controller that we didn’t have to write. For example, the $scope object that does our

data binding is passed to us automatically; we didn’t have to create it by calling any

function. We just asked for it by putting it in HelloController’s constructor.

As we’ll find out in later chapters, $scope isn’t the only thing we can ask for. If we want

to data bind to the location URL in the user’s browser, we can ask for an object that

manages this by putting $location in our constructor, like so:

function HelloController($scope, $location) {

$scope.greeting = { text: 'Hello' };

// use $location for something good here...

}

We get this magical effect through Angular’s dependency injection system. Dependency

injection lets us follow a development style in which, instead of creating dependencies,

our classes just ask for what they need.

This follows a design pattern called the Law of Demeter, also known as the principle of

least knowledge. Since our HelloController’s job is to set up the initial state for the

greeting model, this pattern would say that it shouldn’t worry about anything else, like

how $scope gets created, or where to find it.

This feature isn’t just for objects created by the Angular framework. You can write the

rest of this code as well.

Directives

One of the best parts of Angular is that you can write your templates as HTML. You can

do this because at the core of the framework we’ve included a powerful DOM trans‐

formation engine that lets you extend HTML’s syntax.

Concepts | 5

The {{ }} in the <span> sets up a one-way relationship that says “insert a value here.”

We want that effect, but the application also needs to know when the user changes the

quantity so it can change the total price.

We’ll keep changes in sync with our model by using ng-model. The ng-model declaration

inserts the value of item.quantity into the text field, but it also automatically updates

item.quantity whenever the user types a new value.

<span>{{item.price | currency}}</span>

<span>{{item.price * item.quantity | currency}}</span>

We want the unit price and total price to be formatted as dollars. Angular comes with

a feature called filters that lets us transform text, and there’s a bundled filter called

currency that will do this dollar formatting for us. We’ll look at filters more in the next

chapter.

<button ng-click='remove($index)'>Remove</button>

This allows users to remove items from their carts by clicking a Remove button next to

the product. We’ve set it up so that clicking this button calls a remove() function. We’ve

also passed in $index, which contains the iteration number of the ng-repeat, so we

know which item to remove.

function CartController($scope) {

This CartController manages the logic of the shopping cart. We’ll tell Angular that

the controller needs something called $scope by putting it here. The $scope is what lets

us bind data to elements in the UI.

$scope.items = [

{title: 'Paint pots', quantity: 8, price: 3.95},

{title: 'Polka dots', quantity: 17, price: 12.95},

{title: 'Pebbles', quantity: 5, price: 6.95}

];

By defining $scope.items, I’ve created a dummy data hash to represent the collection

of items in the user’s shopping cart. We want to make them available to data bind with

the UI, so we’ll add them to $scope.

Of course, a real version of this can’t just work in memory, and will need to talk to a

server to properly persist the data. We’ll get to that in later chapters.

$scope.remove = function(index) {

$scope.items.splice(index, 1);

}

We want the remove() function available to bind in the UI, so we’ve added this to $scope

as well. For the in-memory version of the shopping cart, the remove() function can just

delete items from the array. Because the list of <div>s created by ng-repeat is data

8 | Chapter 1: Introduction to AngularJS

剩余195页未读，继续阅读

xiaojiewozai

粉丝: 0
资源: 3

AngularJS入门指南：探索 Brad Green 和 Shyam Seshadri 的著作

angular相关学习书籍

AngularJS书两本

AngularJS入门到精通指南

AngularJS入门教程：快速上手指南

AngularJS入门指南：从HelloWorld开始

AngularJS入门教程：从基础到实践

AngularJS入门教程PDF：快速上手指南

BradGreen和ShyamSeshadri合著的英文AngularJS入门指南

AngularJS入门教程：快速上手与核心概念

AngularJS入门指南：移动应用开发核心技术

最新资源