Angular js原文解析

来源：互联网发布：java架设http代理编辑：程序博客网时间：2024/05/01 16:09

之前对Angular JS的国内教程进行了学习，但是在实际应用中发现对Angular JS还是一知半解，公司师傅告诉我让我看英文原版教材比较好些，这样更容易理解些。现在开始对Angular JS的英文介绍和教材进行解析。

我们先从一个简单的应用实例来对Angular JS进行解析：

<html ng-app="myApp"><head><title>Your shopping Cart</title></head><body ng-controller="CartController"><h1>Your Order</h1><div ng-repeat="item in items"><span>{{item.title}}</span><input ng-model="item.quantity"><span>{{item.price | currency}}</span><span>{{item.price * item.quantity | currency}}</span><button ng-click="remove($index)">Remove</button></div><script src="angular.js"></script><script>function CartController($scope){$scope.item = [{title:"Paint pots",quantity:8,price:3.95},{title:"Polka dots",quantity:5,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 js所要管理的页面区域。这里我们将ng-app放在了HTML元素中，也就是告诉Angular JS我们希望它来管理整个页面。这个属性我们可以放在任意区域内，但是如果想要在其他方法管理的APP区域中利用Angular，我们可以将ng-app属性放在一个app的<div>区域内。

<body ng-controller="CartController">

在Angular中，我们把用Javascript类来管理页面的方式称为controllers。通过在<body>控件中引入一个controller，我们定义CartController来管理<body>和</body>之间的所有事务。

<div ng-repeat="item in items">

ng-repeats表明将items数组中的所有元素拷贝到这个<div>中。在<div>的每一份copy中，给每个元素设定一个名为item的属性，这样我们就可以在模板中利用这个属性了。就像上述代码中运行结果中，在三个<div>控件中，分别包含了产品的名称，单价，总价以及一个可以删除当前条目的按钮。

<span>{{ item.title }}</span>

就像最简单的Hello，World动态显示中一样，我们通过{{ }}来实现数据绑定，同时允许我们在页面中改变变量值时能够同步的修改页面的显示值。{{ item.title }}表达式在循环中接收当前item的数值，并将这个item的title属性值插入到DOM中。

<input ng-model="item.quantity">

通过ng-model的定义能够将input控件和item.quantity值绑定到一起。在<span>区域中的{{ }}设定了一种单方面的数据绑定，表明在这个区域内插入一个值。但是在应用中用户需要能够在quantity变化时得知总价的变化。通过ng-model来实现数据的同步改变。ng-model将item.quantity的值插入到文本区域，同时也在用户在文本区域内输入新的数值时自动同步更新item.quantity的值。

<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>

在页面下显示中用户其他单价和总价以$的形式显示。Angular中有一个filters的特性，可以将文本进行相应的转换，同时也有一个名为currency的filter能够将文本转换成$形式。对于filters的介绍将会在下一此重点介绍。

<button ng-click="remove($index)">Remove</button>

这个代码允许用户通过点击页面中用户商品选项条目旁的删除按钮将用户购物选项删除。我们给这个点击按钮设定一个remove函数。同时也会将包含ng-repeat中迭代序列号的$item传递给该函数，这样我们就能知道移除哪一个item了。

function CartController($scope){

这个CartController管理着购物卡的管理逻辑。通过在Angular中需要对controller传递$scope参数，这样才可以在此处运行。$scope在UI层将数据和UI层元素绑定到一起。

$scope.item = [
{title:"Paint pots",quantity:8,price:3.95},
{title:"Polka dots",quantity:5,price:12.95},
{title:"Pebbles",quantity:5,price:6.95},
];

通过定义$scope.items，创建一个虚拟的数据散列集来表示用户购物车中的物品。可以通过在每个item之前加上$scope来将数据绑定到UI中。当然，在正真的实用中这个不可能在内存中工作，它需要与服务器通信来保存数据。

$scope.remove = function(index)
{
$scope.items.splice(index,1);
}

我们希望将remove函数绑定到UI中，所以需要再函数前添加$scope。在当前前台内存处理版本中，remove函数能够将数组中的items删除。因为<div>序列是通过ng-repeat将数据进行绑定的，所以当items删除后，<div>列表也将同步进行收缩。注意这个remove函数在用户点击去除按钮时将会在UI层引发。

0 0