构建轻量级Web应用：AngularJS入门指南

需积分: 10 176 浏览量更新于2024-07-21 收藏 8.73MB PDF 举报

《AngularJS (O'Reilly英文版)》是一本由Brad Green和Shyam Seshadri合著的手把手教程，旨在帮助开发者构建更小型、更轻量级的Web应用。该书聚焦于AngularJS，一个开源的JavaScript框架，它采用Model-View-Controller (MVC)架构，结合数据绑定、客户端模板以及依赖注入等技术，为Web应用开发提供了所需的结构。 AngularJS的核心理念在于其模块化和可扩展性，它鼓励开发者创建可复用组件，并且在应用程序的增长过程中保持代码的简洁性和测试性。书中详细介绍了以下关键知识点： 1. **MVC架构**：MVC是一种软件设计模式，将应用程序分为模型（Model）、视图（View）和控制器（Controller）三个部分，这有助于组织代码，提高代码的可维护性和清晰度。 2. **数据绑定**：AngularJS的数据绑定机制允许组件之间的数据实时同步，简化了开发者管理应用程序状态的工作，减少了手动更新UI的复杂性。 3. **客户端模板**：AngularJS支持HTML模板与JavaScript逻辑的无缝结合，使得开发者可以编写动态、可重用的模板，提高了前端开发的效率。 4. **依赖注入**：AngularJS通过依赖注入机制来管理组件间的交互和服务，使组件之间的解耦更加高效，增强了应用程序的灵活性和测试性。 5. **指令（Directives）**：AngularJS中的指令是自定义元素或属性，允许开发者扩展HTML的功能，实现复杂的用户界面和交互。 6. **服务（Services）**：AngularJS的服务是可复用的函数集合，用于封装业务逻辑和数据访问，确保代码的模块化和可测试性。 7. **模块（Modules）**：AngularJS的应用程序由一系列模块组成，每个模块负责特定的功能，这种模块化的架构使得代码组织有序，易于扩展和维护。 8. **测试和调试**：书中还介绍了如何使用AngularJS提供的测试工具，如 Karma 和 Jasmine，进行单元测试和端到端测试，确保应用的质量。 9. **最佳实践和性能优化**：作者分享了在实际项目中如何避免常见陷阱，提升性能，以及如何有效地处理大型应用程序的挑战。《AngularJS (O'Reilly英文版)》适合初级到中级的Web开发者阅读，无论是希望学习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页未读，继续阅读

xiaoruo123

粉丝: 0

构建轻量级Web应用：AngularJS入门指南

angularjs-book:AngularJS O'Reilly的第一本书中的示例和代码片段现已严重过时！

O'Reilly Media《AngularJS》中文版, AngularJS中文版, AngularJS翻译-附件资源

AngularJS 官方英文版

Learning AngularJS A Guide to AngularJS Development

[AngularJS 2013 4 ] Brad Green 文字版 pdf

book-desenvolvendo-com-angularjs:Novatec 书籍 - 使用 AngularJS 进行开发

AngularJS入门与英文原著翻译：核心技术详解

AngularJS：英文入门指南

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

AngularJS入门指南

最新资源