AngularJS：简化Web应用开发的神奇框架

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

Angular Js 是一个强大的前端 JavaScript 框架，由 Google 的团队在面对构建大型 Web 应用程序（如 Gmail、Maps 和 Calendar）的过程中提炼出的经验基础上开发而成。它的目标是简化 AJAX 应用程序的开发过程，减轻开发者在编写复杂 web 应用时所面临的挑战，让编程体验更像初学者初次创作时的惊喜和创造过程，而非满足浏览器底层机制的繁琐工作。 Angular Js 诞生于 2013 年，由 Brad Green 和 Shyam Seshadri 联合撰写，其版权归属于他们。本书以深入浅出的方式介绍了 Angular 的核心概念和实践，包括但不限于模块化、依赖注入、指令、数据绑定、服务和组件等关键特性。它旨在帮助开发者快速上手，通过Angular 构建高效、可维护的单页面应用（SPA），提升用户体验。 Angular 的设计理念强调组件化开发，每个组件都独立于其他部分，使得代码结构清晰，易于复用。这种架构允许开发者专注于业务逻辑，而将界面渲染和数据管理交给框架处理。Angular 的 MVC（Model-View-Controller）模式将应用程序分为三个主要部分：模型（数据层）、视图（用户界面）和控制器（处理用户交互和数据操作）。通过这种方式，Angular 促进了开发人员的生产力，并鼓励模块化的开发方法。此外，Angular 还提供了诸如指令（Directives）这样的高级功能，它们允许开发者扩展 HTML 的能力，实现自定义元素和行为。Angular 的双向数据绑定功能使得数据的变化能够自动反映在视图上，反之亦然，减少了手动更新状态的需要。服务（Services）则作为应用程序中的共享资源，可以减少重复代码，提高代码的可测试性和可重用性。本书《AngularJS》不仅涵盖了基础知识，还包含了Angular 的进阶主题，如单元测试、性能优化以及与后端技术的集成，以确保开发者能够构建出健壮且高效的 web 应用。对于希望进入现代前端开发领域的工程师，特别是那些寻求构建复杂 web 应用的开发者来说，这是一本不可多得的参考资料。 Angular Js 是一个强大且成熟的前端开发工具，它通过提供一套完整的解决方案，降低了开发者的负担，提升了开发效率，是构建现代 web 应用的首选框架之一。通过深入学习和实践，开发者能够充分利用 Angular 提供的这些工具和技术，为用户提供卓越的 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页未读，继续阅读

wzh34

粉丝: 0
资源: 2

AngularJS：简化Web应用开发的神奇框架

angularjs+bootstrap+SSM简单示例

angular js代码食谱（recipes with angular js）

angular js

Angular html 怎么调用Angular js中的函数

angular js开发工具

怎么用Angular Js和ionic JavaScript写一个类似美团点餐的App

使用Angular JS完成增删查改界面

angular JS $scope

angular js写增删改查代码实现

angular js 保留两位小数

最新资源