AngularJS 官方英文版

angularjs

需积分: 12 4 浏览量更新于2024-07-23 1 收藏 7.88MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"AngularJS英文版相关知识" AngularJS是由Brad Green和Shyam Seshadri编写的，这本书是关于AngularJS的详细指南，版权属于作者。本书在美国出版，由O'Reilly Media, Inc发行，这是一家知名的科技图书出版公司，同时也提供在线版本的书籍服务。AngularJS是一个强大的JavaScript框架，主要用于构建单页Web应用程序（SPA）。 AngularJS的核心概念包括数据绑定、依赖注入和指令系统。数据绑定使得视图和模型之间的数据同步变得简单，开发者无需手动同步这两者。依赖注入允许模块化代码并简化了组件间的协作，使得代码更易于测试和维护。指令系统扩展了HTML，让开发者能够创建自定义的DOM元素和属性，增强了页面的表现力和交互性。书中可能涵盖了MVC（Model-View-Controller）架构模式，这是AngularJS的基础。在MVC模式中，模型负责管理数据和业务逻辑，视图用于展示数据，而控制器作为模型和视图之间的桥梁，处理用户输入并更新视图。此外，书中可能还介绍了Scope的概念，它是AngularJS中的一个核心对象，连接着控制器和视图。服务（Services）是AngularJS中的另一个关键部分，它们是可重用的代码单元，提供了诸如HTTP通信、数据存储和状态管理等功能。例如，$http服务用于与服务器进行异步通信，$rootScope是所有scope的父scope，而$cookieStore则用于在浏览器端存储数据。模块（Modules）是组织AngularJS应用的基本单位，它们允许你按功能划分代码，并且可以引入其他模块以增强功能。路由（Routing）是单页应用的重要特性，AngularJS的$router或后来版本的$stateProvider允许根据URL导航到不同的视图。表单处理和验证也是AngularJS的重要组成部分，它提供了内置的表单和字段验证机制，可以实时显示错误信息，提升用户体验。此外，书中可能会讲解如何使用AngularJS的测试工具，如ngMock和Protractor，进行单元测试和端到端测试，确保代码质量。最后，AngularJS的版本迭代快速，从1.x版本到Angular 2+，进行了大量的重构和优化。Angular 2+引入了更现代的基于组件的架构，以及TypeScript支持，提高了开发效率和代码可维护性。Angular 4、5、6等后续版本主要关注性能改进和新特性的添加。这本书将深入探讨AngularJS的各种特性，帮助读者理解并掌握这个强大的前端开发框架，无论是初学者还是有经验的开发者，都能从中受益。

资源详情

资源推荐

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

rongyaott

粉丝: 0
资源: 1

AngularJS 官方英文版

Pro AngularJS 英文版

Pro AngularJS 英文版 源代码

AngularJS中、英文API参考文档

angularjs学习路线图

我不会angularjs怎么办

angularjs 学习网站

angularjs的生命周期

angularjs 入门

学习 angularjs

学习 angularJs

angularjs入门与进阶pdf

vue和AngularJS的区别

angularjs和thymeleaf区别

使用angularjs开发的好处

angularjs下载

angularjs对于页面的渲染顺序

angularjs教学

angularjs ztree

angularjs教程

angularjs 使用jointjs

最新资源

Pro AngularJS 英文版源代码