angularjs的到底怎么用的？angularjs的框架实例详细解析（附完整实例）-tutorial js-php.cn

本篇文章介绍了angularjs的框架知识点汇总，里面有完整的实例，还有完整标签的详细解释。接下来就让我们一起来看这篇文章吧

1. AngularJS是什么？

它是Google开发的一款具有MVC结构的前端框架。在Angular应用中，视图层就是DOM，控制器就JavaScript类，模型数据存储在对象属性中。

2. 数据绑定

通过声明界面的某一部分映射到 JavaScript 的属性，让他们自动的同步，这种编程方式就是数据绑定。不需要对字段注册监听器，就可以做到对象属性与界面显示同步变化。

3. 依赖注入

不需要重新创建对象，将需要使用的对象$scope或$loaction按照以下方式注入到构造函数中。这就是依赖注入。

function HelloController($scope, $location) {
$scope.greeting = { text: &#39;Hello&#39; };
// use $location for something good here...
}

Salin selepas log masuk

4. 指令

框架的核心层有一个强大的 DOM 转换引擎，可以让你扩展 HTML 语法。HTML中的ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。我们称这些叫 HTML 扩展指令。

5. 依据示例解释各个标签

<!DOCTYPE html>
<html  ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller=&#39;CartController&#39;>
<h1>Your Order</h1>
<p ng-repeat=&#39;item in items&#39;>
<span>{{item.title}}</span>
<input ng-model=&#39;item.quantity&#39;/>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)"> Remove </button>
</p>
<script>
function CartController($scope) {
////@formatter:off
$scope.items = [{
title : &#39;Paint pots&#39;,
quantity : 8,
price : 3.95
}, {
title : &#39;Polka dots&#39;,
quantity : 17,
price : 12.95
}, {
Title : &#39;Pebbles&#39;,
quantity : 5,
price : 6.95
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>

Salin selepas log masuk

依照上面的代码，对关键内容做个解释：

1）

ng-app 属性告诉 Angular它应该管理页面的哪一部分。由于我们把它放在html元素上，告知Angular管理整个页面。如果你正在集成Angular和一个已存在的使用其他方式管理页面的应用，那么你可能需要放在应用的p上。

2）

在 Angular 中，用JavaScript类管理的页面区域叫做控制器。通过在body标签中包含一个控制器，声明的CartController将管理body标签之间的任何东西。

3）

ng-repeat 代表为 items数组中每个元素拷贝一次这p中的DOM。在p每次拷贝中，同时设置了一个叫item的属性代表当前的元素，所以我们能够在模板中使用。正如你看到的，每个p中都包含了产品名称，数量，单价，总价和一个移除按钮。

4） {{item.title}}

正如演示的‘Hello World’示例，数据绑定是通过{{ }}把变量的值插入到页面某部分和保持同步。完整的表达式{{item.title}}检索迭代中的当前项，然后将当前项的titile属性值插入到DOM中。

5）

ng-model 定义创建了输入字段和 item.quantity之间的数据绑定。span标签中的{{ }}建立了一个单向联系，在这里插入值。但是应用程序需要知道当用户改变数量时，能够改变总价，这是我们想要的效果。通过使用ng-model我们将与我们的模型保持同步更改。ng-model申明将item.quantity的值插入到输入框中，无论何时用户输入一个新值将自动更新item.quantity。

6） {{item.price | currency}}

我们希望单价格式化成美元形式。Angular 带有一个叫过滤器的特性，能够让我们转换文本，有一个叫 currency 的过滤器将为我们做这个美元形式格式化。

7）

点击这个按钮就可以调用 remove()函数。同时传递了$index，这个包含了ng-repeat的迭代顺序，以便知道要移除哪一项。

8）function CartController($scope) {

CartController 管理这购物车的逻辑。通过这个我们告知 Angular控制器

需要一个叫$scope 的对象。$scope就是用来把数据绑定到界面上的元素的。

9）$scope.remove = function(index) {

$scope.items.splice(index, 1);

};

我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这

个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建

的这些

是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除

按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）

6. 调用 Angular

任何应用使用 Angular 必须做两件事：

1）加载 angular.js

2）使用 ng-app告知Angular管理哪一部分的DOM

7. 加载脚本

很简单：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

Salin selepas log masuk

推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app=&#39;myApp&#39;>
<body ng-controller=&#39;TextController&#39;>
<p>{{someText.message}}</p>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module(&#39;myApp&#39;, []);
myAppModule.controller(&#39;TextController&#39;,
function($scope) {
var someText = {};
someText.message = &#39;You have started your journey.&#39;;
$scope.someText = someText;
});
</script>
</body>
</html>

Salin selepas log masuk

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini