AngularJS：革新Web应用开发的实战指南

需积分: 9 127 浏览量更新于2024-07-21 收藏 8.38MB PDF 举报

AngularJS开发下一代Web应用是一种基于JavaScript的前端框架，旨在利用HTML固有的优点，并弥补其在构建动态和复杂Web应用程序时的局限性。该框架采用Model-View-Controller (MVC) 设计模式，提供了全新的开发体验。 AngularJS的核心概念包括： 1. **标识符（Directives）**：AngularJS的核心特性，使得浏览器能够识别并响应HTML中的新语法，如数据绑定（{{ }}）。这允许开发者将数据与UI元素直接关联，实现动态更新。通过自定义指令，开发者可以扩展HTML的功能，创建可复用的组件。 2. **数据绑定（Data Binding）**：AngularJS的强大之处在于其双向数据绑定机制，开发者可以在模型（Model）的变化时自动更新视图（View），反之亦然。这大大简化了应用程序状态管理，提高了开发效率。 3. **DOM操作**：AngularJS允许开发者使用DOM控制结构，比如ng-repeat用于迭代渲染列表，ng-show或ng-hide用于条件隐藏或显示DOM片段。这使得操作DOM元素变得更加直观和高效。 4. **表单处理**：AngularJS内置表单管理系统，支持表单验证，开发者无需手动处理输入验证，框架会自动跟踪用户输入并提供错误提示。 5. **模块化和组件化**：AngularJS鼓励组件化开发，将复杂的UI逻辑拆分为可重用的独立组件，提高代码的可维护性和复用性。《AngularJS实战》这本书，由Brad Green 和 Shyam Seshadri 合著，版权信息表明此书于2013年发布，适用于那些希望深入了解AngularJS的读者。书中详细介绍了框架的基础知识、高级特性和最佳实践，适合初级到中级的开发者学习和参考。 AngularJS不仅是一个强大的前端工具，还提供了一种现代Web开发的思维方式，即通过声明式的编程方式，让开发者可以更专注于业务逻辑，而非底层的DOM操作。随着Web技术的发展，AngularJS在移动应用开发、单页应用（SPA）等领域都有着广泛的应用。随着AngularJS版本的更新，现在的Angular（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

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

______拥有

粉丝: 0
资源: 4

AngularJS：革新Web应用开发的实战指南

用AngularJS开发下一代Web应用(AngularJS 2013)-中英双版本

使用AngularJS开发下一代Web应用 配套 代码

使用angularjs开发的好处

angularjs webapi

使用 html css angularjs 开发的可行性

Angularjs可输入的下拉框

angularjs和angular的区别

学习 angularjs

学习 angularJs

angularjs写的webui怎么发布到网络

最新资源

使用AngularJS开发下一代Web应用配套代码