AngularJS 2013: Brad Green & Shyam Seshadri经典著作

4星 · 超过85%的资源需积分: 9 46 浏览量更新于2024-07-26 收藏 8.38MB PDF 举报

"AngularJS 2013 - Brad Green & Shyam Seshadri" 本书是关于AngularJS的早期版本，由Brad Green和Shyam Seshadri撰写，版权于2013年。AngularJS是一款由Google维护的前端JavaScript框架，它极大地简化了Web应用程序的开发，特别是在构建单页应用（SPA）时。这本书可能是AngularJS 1.x系列的一个版本，因为AngularJS 2是在几年后发布的。 AngularJS的核心特性包括双数据绑定、依赖注入、指令系统和模块化。双数据绑定使得视图和模型之间的同步变得简单，开发者无需手动更新DOM。依赖注入允许组件之间轻松地共享服务和对象，而无需硬编码引用。指令系统扩展了HTML，允许创建自定义的可重用的UI组件。模块化则帮助组织代码，使其更易于管理和测试。书中的内容可能涵盖了以下主题： 1. **基础概念**：介绍AngularJS的基本概念，如MVC架构，以及如何设置一个基本的AngularJS项目。 2. **数据绑定**：详述双向数据绑定的工作原理，包括`ng-model`指令的使用。 3. **指令**：讨论自定义指令的创建和使用，如`ng-repeat`、`ng-if`等内置指令。 4. **服务**：讲解服务的概念，如$http服务用于处理HTTP请求，$scope服务作为数据模型的载体。 5. **路由**：阐述AngularJS的路由机制，如何使用`ngRoute`或`ui-router`实现页面导航。 6. **过滤器**：解释如何使用和创建过滤器来格式化和转换数据。 7. **表单处理**：介绍如何在AngularJS中处理用户输入，验证表单，以及使用`ng-form`和`ng-model`。 8. **依赖注入**：深入理解AngularJS的依赖注入机制，如何注册和注入服务。 9. **单元测试**：教导如何使用Karma和Jasmine进行AngularJS应用的单元测试。 10. **最佳实践**：提供关于代码组织、性能优化和避免常见陷阱的建议。 11. **模块化**：探讨如何使用模块来组织应用程序的结构。 12. **部署与性能**：涵盖如何部署AngularJS应用，以及优化性能的策略。书中可能还包括实际示例和案例研究，帮助读者将理论知识应用到实际项目中。此外，它可能还提到了AngularJS与其他技术（如RESTful API、JSON、Bootstrap等）的集成方法。本书的出版由O'Reilly Media负责，该出版社是技术书籍领域的领导者，提供了大量的在线资源，如勘误表和在线版图书。书中可能包含了对初学者友好的教学方式，同时也适合有一定经验的开发者深入学习和参考。

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

but with the ability to update, 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 input field, we’d see the screen captured in Figure 1-3.

4 | Chapter 1: Introduction to AngularJS

www.it-ebooks.info

Figure 1-3. The Greeting App with input changed

Without 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

www.it-ebooks.info

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

www.it-ebooks.info

剩余195页未读，继续阅读

dangmail

粉丝: 0
资源: 5

AngularJS 2013: Brad Green & Shyam Seshadri经典著作

AngularJS-translation, Brad & Shyam Sesbadri中文AngularJS的中文翻译.zip

[AngularJS 2013 4 ] Brad Green 文字版 pdf

AngularJS原版：Brad Green & Shyam Seshadri 著

2013年Brad Green与Shyam Seshadri的AngularJS深度解析

AngularJS技术详解 - Brad Green & Shyam Seshadri

AngularJS入门指南 - Brad Green & Shyam Seshadri

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

Brad Green与Shyam Seshadri合著的AngularJS英文版指南

AngularJS开发下一代Web应用指南：Brad Green与Shyam Seshadri详解

AngularJS 2013权威指南：创新Web框架详解

最新资源