AngularJS技术详解 - Brad Green & Shyam Seshadri

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

"AngularJS(2013.4)由Brad Green和Shyam Seshadri撰写，是关于AngularJS框架的早期版本的详细指南。本书由O'Reilly Media, Inc.出版，旨在教育、商业或销售推广使用。" AngularJS是由Google支持的一个开源JavaScript框架，用于构建动态web应用程序。在2013年的这个版本中，Brad Green和Shyam Seshadri详细介绍了AngularJS的核心概念和功能，帮助开发者理解如何利用它来构建高效、可维护的前端应用。 AngularJS的主要特点包括： 1. 双向数据绑定：AngularJS的核心特性之一是双向数据绑定，它使得模型（Model）和视图（View）之间保持同步。当模型数据改变时，视图会自动更新；反之，用户在视图中的操作也会反映到模型中。 2. 模块化：AngularJS鼓励使用模块来组织代码，允许开发者将应用程序拆分为更小、更易管理的部分，提高了代码的可重用性和可维护性。 3. 控制器（Controllers）：控制器是应用程序逻辑的主要载体，负责处理用户交互和业务逻辑。 4. 视图（Templates）：视图使用HTML扩展（指令）来呈现动态内容。AngularJS提供了一系列内置指令，如ng-repeat用于迭代，ng-if用于条件渲染，ng-click用于事件绑定等。 5. 服务（Services）：AngularJS的服务提供了一种方式来封装和共享代码，如$http服务用于与服务器通信，$scope服务作为模型和视图之间的桥梁。 6. 过滤器（Filters）：过滤器用于数据格式化，如日期格式化、货币转换等，它们可以应用于视图中的数据。 7. 路由（Routing）：AngularJS的路由系统允许根据URL导航到不同的视图，实现单页应用程序（SPA）的功能。 8.依赖注入（Dependency Injection）：AngularJS的依赖注入机制简化了组件之间的依赖关系，使得代码更加松耦合。 9.单元测试和端到端测试：AngularJS提供了方便的工具和API，支持编写和执行单元测试和端到端测试，确保代码质量。本书可能涵盖了AngularJS的安装、基本概念的介绍、指令的使用、服务的创建和使用、数据绑定的工作原理、模块的构建、控制器的设计、以及如何进行测试等内容。作者通过实例和实践指导读者逐步掌握AngularJS的开发技巧。然而，需要注意的是，此书是基于2013年4月的AngularJS版本，那时AngularJS还处于1.x时代。随着时间的推移，AngularJS经历了重大升级，目前最新的版本是Angular，它与AngularJS有显著的不同，包括架构、性能优化和API的变化。因此，虽然这本书对理解早期AngularJS有帮助，但若要学习最新版Angular，可能需要查找更现代的资源。

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

小白的编程日志

粉丝: 2361
资源: 838

AngularJS技术详解 - Brad Green & Shyam Seshadri

Learning AngularJS.pdf （0分下载网）

[AngularJS 2013 4 ] Brad Green 文字版 pdf

C++ 100本好书

Brad Soblesky .exe

图书推荐系统+前端代码

asp.net.mvc图书管理系统参考文献资料

汇编语言中的.word

brad和chatgpt比较

Objective-C

最新资源