AngularJS是为了克服HTML在构建应用上的不足而设计的。通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
- 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
- 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
- 使用双大括号{{}}语法进行数据绑定；
- 使用DOM控制结构来实现迭代或者隐藏DOM片段；
- 支持表单和表单的验证；
- 能将逻辑代码关联到相关的DOM元素上；
- 能将HTML分组成可重用的组件。
Demo
<!doctype html>
<html ng-app="index">
<head>
<title>angularjs test</title>
<script src = "/javascripts/angular-1.0.1.min.js"></script>
<script src = "/javascripts/controller.js"></script>
</head>
<body ng-controller="IndexCtrl" >
<ul>
<li ng-repeat="contact in contacts">
name:{{contact.name}},age:{{contact.age}},hometown:{{contact.hometown}},{{"sb"}}
</li>
</ul>
name:<input type="text" ng-model="new_contact.name" />
age:<input type="text" ng-model ="new_contact.age" />
hometown:<input type="text" ng-model = "new_contact.hometown" />
<button ng-click="add_contact()">新增</button>
</body>
</html>
angular.module('index',[]).controller('IndexCtrl',function($scope){
$scope.contacts = [{
name:'陈冠希,
age:20,
hometown:'hk
},{
name:'张柏芝,
age:22,
hometown:'hk'}];
$scope.reset_contact = function(){
$scope.new_contact = {
name:'',
age:'',
hometown:''
};};
$scope.add_contact = function(){
$scope.contacts.push($scope.new_contact);
$scope.reset_contact();
};});
ng-app表明angularjs将对其标签声明内的dom进行处理,index名字是作用域名，表明属于index作用域。angular.module('index',[]).controller表明在index作用域内定义controller，同理ng-controller表明其内的变量属于IndexCtrl。
ng-model声明此标检绑定在new_contact变量，angularjs控制其值随变量而改变。ng-click声明由add_contact处理点击。在li标签里面的ng-repeat="contact in contacts"语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个li标签作为模板为列表中的每一个联系人创建一个li元素。由此当点击新增按钮时将输入框内所代表的model添加到contacts内，并将add_contact变量置空，而页面的显示由angularjs自动完成。
angularjs只对ng-app内的dom起作用，因此可以在任何页面使用angularjs而不破坏ng-app外的所有dom，js。
angularjs与restful后端交互非常方便，使用ngResource组件，声明好CRUD的路径、http veb，就可方便调用save,update与后端交互。
Demo
app=angular.module("index",["ngResource"])
app.factory "Contact",($resource) ->
$resource("/contacts/:id.json",{id:"@id"},{update:{method:"put"}})
$scope.contacts = Contact.query # /contacts
Contact.save $scope.new_contact #create
contact.$update #更新
转载请注明出处:http://me.angry-arthas.com/blog/2015/09/06/angularjsqian-chang-1/
