AngularJS 深入指南

需积分: 10 69 浏览量更新于2024-07-23 收藏 8.32MB PDF 举报

"AngularJS.pdf" AngularJS是由Brad Green和Shyam Seshadri编写的，它是一款强大的JavaScript框架，用于构建动态Web应用程序。这个框架由Google维护，自2013年发布以来，已经成为了前端开发的重要工具。AngularJS的核心设计理念是数据绑定和依赖注入，这使得开发人员能够更高效地构建复杂的单页应用程序（SPA）。 AngularJS的主要特点包括： 1. 双向数据绑定：AngularJS通过双向数据绑定简化了模型与视图之间的交互。当模型发生变化时，视图会自动更新，反之亦然。这减少了手动同步数据的需要，提高了代码的可读性和可维护性。 2. MVC架构：AngularJS基于Model-View-Controller（MVC）设计模式，将应用程序逻辑分为三个主要部分，帮助开发者更好地组织代码。 3. 依赖注入（Dependency Injection, DI）：AngularJS的DI系统允许开发者轻松地在组件之间共享服务，而无需手动实例化或管理对象。这有助于降低耦合度，提高代码的可测试性。 4. 指令（Directives）：AngularJS提供了一种创建自定义HTML标签和属性的方式，这些标签和属性可以扩展HTML的功能，用于实现特定的交互和视图逻辑。 5. 表达式（Expressions）：AngularJS支持在模板中使用简洁的JavaScript表达式，这些表达式可以直接在视图中计算和展示模型数据。 6. 路由（Routing）：AngularJS的路由功能允许用户根据URL导航到不同的视图，这对于构建多页面应用和SPA至关重要。 7. 服务（Services）：AngularJS提供了一系列内置服务，如$http服务用于处理HTTP请求，$q服务用于异步编程，$rootScope服务作为全局作用域等。此外，开发者还可以自定义服务以满足特定需求。 8. 模块（Modules）：AngularJS的模块系统帮助组织应用程序代码，允许按功能划分代码，并且可以导入和依赖其他模块。 9. 测试支持：AngularJS提供了内置的测试工具和库，如ngMock，使得单元测试和端到端测试更加方便。 10. 社区支持和生态系统：AngularJS拥有庞大的开发者社区，提供了丰富的插件、教程和最佳实践，使得开发者能够快速学习和解决问题。第一版于2013年4月发布，后续可能有修订和更新以修复错误和改进功能。有兴趣深入学习AngularJS的读者可以通过O'Reilly Media提供的在线版本或其他渠道获取更多详细信息。同时，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

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

普通网友

粉丝: 0
资源:
7

AngularJS 深入指南

Learning AngularJS.pdf （0分下载网）

（2014版）精通AngularJS.pdf&&源代码

AngularJS中文版pdf+精通AngularJS PDF

angularjs .ts文件 filesaver.saveas 保存到指定路径

angularjs 学习网站

angular.js文档

angularjs下载

AngularJS Requests.getFileRead

angularjs 1.x 通过 require.js 引入ngDialog 0.6.3

论述AngularJS React Vue.is

最新资源