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

5星 · 超过95%的资源需积分: 12 166 浏览量更新于2024-07-25 收藏 7.88MB PDF 举报

"AngularJS(2013.4)是由Brad Green和Shyam Seshadri合著的一本关于JavaScript框架的权威指南。该书在2013年4月首次发布，版权由两位作者所有，享有保留。这本著作是O'Reilly Media出版的，一家专注于技术出版的公司，位于美国加利福尼亚州Sebastopol。本书详细介绍了AngularJS，一个由Google开发并维护的前端Web应用程序开发框架，它在当时的版本（2013年）对于构建动态、可扩展的单页应用（SPA）具有显著优势。AngularJS的设计目标是简化双向数据绑定、依赖注入以及模块化的架构，使开发者能够构建高效且易于维护的复杂Web应用。书中涵盖了AngularJS的核心概念，包括指令（Directives）、控制器（Controllers）、模板（Templates）、服务（Services）和过滤器（Filters），这些都是AngularJS架构中的关键组件。此外，作者还探讨了如何利用AngularJS的特性如指令模板、路由（Routing）和指令的自定义行为来构建现代Web应用的功能。对于那些希望通过AngularJS进行Web开发的专业人士，这本书提供了丰富的实践案例和深入的理论知识，帮助读者掌握AngularJS的基础和高级技巧。书中还包含了当时的最新技术和最佳实践，但请注意，随着AngularJS的发展，特别是AngularJS 2.x版本的推出，部分内容可能已经过时，但对于学习早期版本的AngularJS仍然具有很高的参考价值。编辑们如Simon St. Laurent和Meghan Blanchette对本书进行了精心打磨，确保了内容的质量。从排版到设计，这本书都体现了O'Reilly的严谨标准，封面设计者Randy Comer和内部设计师David Futato的贡献也值得一提。此外，本书还提供了一个在线资源链接，方便读者获取更多相关资料和更新内容。《AngularJS(2013.4)》是一本不可或缺的学习资源，适合那些希望进入或提升AngularJS技能的开发者，无论是初学者还是有经验的开发者都能从中受益匪浅。通过阅读这本书，读者将能够理解并掌握这一强大框架的核心原理，为其Web开发项目打下坚实基础。"

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

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

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页未读，继续阅读

TampAampD

粉丝: 0
资源: 2

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

Learning AngularJS.pdf （0分下载网）

[AngularJS 2013 4 ] Brad Green 文字版 pdf

C++ 100本好书

jQuery and JavaScript Phrasebook (2013.12).Brad.Dayley.文字版

Advanced.Rails(2007)].Brad.Ediger.文字版.pdf

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

《jQuery Mobile快速入门》.((美)Brad Broulik ).[PDF]

Node js+MongoDB+AngularJS Web开发【英文版】 Brad Dayley

Node.js MongoDB AngularJSWeb开发.part2

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

最新资源