AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
Angular js 下载地址
<div ng-controller="hello">
<input ng-model="text" class="form-control" />
<h1 ng-bind="text+',world'">,world</h1>
<h1 ng-cloak class="ng-cloak">{{text}}</h1>
<div class="{{text}}">{{text}}</div>
</div>
在DIV里面加入ng-controller 控制他，在脚本里调用.controller 设置方法控制。用$scope绑定数据和视图层的数据绑定
在对input里面绑定想要改变的数据，运用ng-model=“”你设置的变量，这里是“text”
用{{}}进行关联，里面放text.
可能有人觉得{{}}放在DOM结构里很丑，我们还可以用ng-bind 或者ng-cloak 来设置，效果是一样的。
在复杂一点
<body ng-app='app'>
<div ng-controller="hello">
<input ng-model="text" class="form-control" />
<h1 ng-bind="text+',world'">,world</h1>
<h1 ng-cloak class="ng-cloak">{{text}}</h1>
<div class="{{text}}">{{text}}</div>
</div>
<div ng-controller="shopping">
<div ng-repeat="item in item">
<span>{{item.title}}</span>
<input type="" name="" id="" value=""ng-model="item.quantity" />
<span>{{item.price|currency}}</span>
<span>{{item.price*item.quantity|currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
js代码
angular.module('app',[])
.controller('hello',function($scope){
$scope.text='hello'
})
.controller('shopping',function($scope){
$scope.item=[
{title:'A',quantity:8,price:3.95},
{title:'B',quantity:12,price:55},
{title:'C',quantity:28,price:95}
]
$scope.remove = function(index){
$scope.item.splice(index,1)
}
})
这里实现了按照input里面填的数量，计算后面的总价格，点击旁边的REMOVE 移除当前这一行
利用了.js里面设定的数组，在HTML里面 ng-repeat 遍历数组里面的对象值
ng-repeat的意思是对于item数组中的每个元素，都把<div>中的DOM结构复制一份（包括DIV本身），对与DIV的每一分拷贝，都会把一个ITEM的属性给它，这样就可以在模板中使用这份拷贝的元素了