Angularjs -- 核心概念

浏览数：221 / 时间：2015年06月09日

angularjs旨在减轻使用AJAX开发应用程序的复杂度，使得程序的创建、測试、扩展和维护变得easy。以下是angularjs中的一些核心概念。

1. client模板

多页面的应用通过组装和拼接server上的数据来生成HTML，然后输出到浏览器。Angularjs不同于此的是，传递模板和数据到浏览器，然后在浏览器端进行组装。浏览器的角色编程了仅仅提供模板的静态资源和模板所须要的数据。

hello.html

<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>

controllers.js

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

2. 模型视图控制器(MVC)

MVC的核心概念是，在代码之间明白分离管理数据（模型），应程序逻辑（控制器），并将数据呈现给用户（视图）。在Angular应用中，视图就是DOM，控制器就是Javascript类，模型数据存储在对象属性中。

3. 数据绑定

典型的DOM操作，都是先将数据处理完成之后，再通过元素上设置innerHTML将结果插入到所要的DOM中。这种工作反复性非常高，还要确保界面和javascript属性中获取到数据时正确的状态。

而Angular中包含这中功能，只声明界面的某一部分银蛇到Javascript的属性，让它们自己主动完毕同步。

<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>

controllers.js

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

input的值（用户的输入）与greeting.text绑定在一起，并及时呈如今<p>中。绑定是双向的，也可用通过设置$scope.greeting.text的值，并自己主动同步到输入框和双大括号（{{}}）中

4. 依赖注入

$scope对象吧数据绑定自己主动通过HelloController构造函数传递给开发人员，$scope并非我们唯一须要的，还能够加入一个$location对象，如：

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

通过Angular的依赖注入系统，我们可以遵循迪米特法则（最少知识原则），仅仅关注我们最须要的部分。

5. 指令

Angular包含一个强大的DOM转换引擎，使得开发人员有能力扩展HTML语法。在之前的实例中我们看到{{}}是用绑定数据的，ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。

Angular包括非常多标识符来定义视图，这些标识符能够定义常见的视图作为模板。除此之外，开发人员还能够编写自己的标识符来扩展HTML模板。

购物车演示样例：

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>

<div ng-repeat='item in items'>
    <span ng-bind="item.title"></span>
    <input ng-model='item.quantity'/>
    <span ng-bind="item.price | currency"></span>
    <span ng-bind="item.price * item.quantity | currency"></span>
    <button ng-click="remove($index)">Remove</button>
</div>
<script src="../js/angular-1.2.2/angular.js"></script>
<script>
    function CartController($scope) {
        $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}
        ];
        $scope.remove = function (index) {
            $scope.items.splice(index, 1);
        }
    }
</script>
</body>
</html>

<html ng-app>
ng-app告诉Angular管理页面的那一部分。依据须要ng-app也能够放在<div>上
<body ng-controller="CartController">
Javascript类叫做控制器，它能够管理对应页面区域中的不论什么东西。
<div ng-repeat="item in items">
ng-repeat代表为items数组中每一个元素拷贝一次该DIV中的DOM，同一时候设置item作为当前元素，并可在模板中使用它。
<span>{{item.title}}</span>
表达式{{item.title}}检索迭代中的当前项，并将当前项的title属性值插入到DOM中
<input ng-model="item.quantity">
ng-model定义输入字段和item.quantity之间的数据绑定
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
单位价格和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。
<button ng-click="remove($index)"> Remove </button>
通过ng-repeat的迭代顺序$index，移除数据和对应的DOM（双向绑定特性）
function CartController($scope) {
CartController 管理这购物车的逻辑，$scope 就是用来把数据绑定到界面上的元素
$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} ];
通过定义$scope.items，我们已经创建一个虚拟数据代表了用户购物车中物品集合，购物车是不能仅工作在内存中，也须要通知server端持久化数据。
$scope.remove = function(index) {$scope.items.splice(index, 1);};
remove()函数可以绑定到界面上，因此我们也把它添加到$scope 中

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Angularjs -- 核心概念