AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。通常莉撇，我們是通過以下技術(shù)來解決靜態(tài)網(wǎng)頁技術(shù)在構(gòu)建動(dòng)態(tài)應(yīng)用上的不足：
- 類庫 - 類庫是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用惶傻。起主導(dǎo)作用的是你的代碼，由你來決定何時(shí)使用類庫其障。類庫有：jQuery等
- 框架 - 框架是一種特殊的银室、已經(jīng)實(shí)現(xiàn)了的WEB應(yīng)用，你只需要對它填充具體的業(yè)務(wù)邏輯励翼。這里框架是起主導(dǎo)作用的蜈敢，由它來根據(jù)具體的應(yīng)用邏輯來調(diào)用你的代碼∑В框架有：knockout抓狭、sproutcore等。
AngularJS使用了不同的方法造烁，它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷否过。AngularJS通過使用我們稱為標(biāo)識符(directives)的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法惭蟋。例如：
- 使用雙大括號{{}}語法進(jìn)行數(shù)據(jù)綁定苗桂；
- 使用DOM控制結(jié)構(gòu)來實(shí)現(xiàn)迭代或者隱藏DOM片段；
- 支持表單和表單的驗(yàn)證告组；
- 能將邏輯代碼關(guān)聯(lián)到相關(guān)的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將對其標(biāo)簽聲明內(nèi)的dom進(jìn)行處理,index名字是作用域名，表明屬于index作用域便锨。angular.module('index',[]).controller表明在index作用域內(nèi)定義controller围辙，同理ng-controller表明其內(nèi)的變量屬于IndexCtrl。
ng-model聲明此標(biāo)檢綁定在new_contact變量放案，angularjs控制其值隨變量而改變姚建。ng-click聲明由add_contact處理點(diǎn)擊。在li標(biāo)簽里面的ng-repeat="contact in contacts"語句是一個(gè)AngularJS迭代器卿叽。這個(gè)迭代器告訴AngularJS用第一個(gè)li標(biāo)簽作為模板為列表中的每一個(gè)聯(lián)系人創(chuàng)建一個(gè)li元素桥胞。由此當(dāng)點(diǎn)擊新增按鈕時(shí)將輸入框內(nèi)所代表的model添加到contacts內(nèi)，并將add_contact變量置空考婴，而頁面的顯示由angularjs自動(dòng)完成贩虾。
angularjs只對ng-app內(nèi)的dom起作用，因此可以在任何頁面使用angularjs而不破壞ng-app外的所有dom沥阱，js缎罢。
angularjs與restful后端交互非常方便，使用ngResource組件考杉，聲明好CRUD的路徑策精、http veb，就可方便調(diào)用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 #更新
轉(zhuǎn)載請注明出處:http://me.angry-arthas.com/blog/2015/09/06/angularjsqian-chang-1/
