個(gè)人博客搭建完成，歡迎大家來(lái)訪問(wèn)哦
黎默丶lymoo的博客
博主最近了解學(xué)習(xí)了一下angularJS，記錄一下心得給大家分享一下~
什么是AngularJS
AngularJS是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架，提供給大家一種新的開(kāi)發(fā)應(yīng)用方式，這種方式可以讓你擴(kuò)展HTML的語(yǔ)法，以彌補(bǔ)在構(gòu)建動(dòng)態(tài)WEB應(yīng)用時(shí)靜態(tài)文本的不足，從而在WEB應(yīng)用程序中使用HTML聲明動(dòng)態(tài)內(nèi)容怀伦。
AngularJS有5個(gè)主要核心特性
雙向數(shù)據(jù)綁定
實(shí)現(xiàn)了把model與view完全綁定在一起，model變化山林，view也變化房待，反之亦然。
模板
在AngularJS中驼抹，模板相當(dāng)于HTML文件被瀏覽器解析到DOM中桑孩，AngularJS遍歷這些DOM，也就是說(shuō)AngularJS把模板當(dāng)做DOM來(lái)操作框冀，去生成一些指令來(lái)完成對(duì)view的數(shù)據(jù)綁定流椒。
MVVM
吸收了傳統(tǒng)的MVC設(shè)計(jì)模式但又不是傳統(tǒng)意義上的MVC，更接近于MVVM(Moodel-View-ViewModel)明也。
依賴注入
AngularJS擁有內(nèi)建的依賴注入子系統(tǒng)宣虾，可以幫助開(kāi)發(fā)人員更容易的開(kāi)發(fā)，理解和測(cè)試應(yīng)用温数。
指令
可以用來(lái)創(chuàng)建自定義的標(biāo)簽绣硝，也可以用來(lái)裝飾元素或者操作DOM屬性。
AngularJS的特點(diǎn)
前后端分離撑刺，后端只需提供數(shù)據(jù)接口鹉胖，路由，模板渲染等都在前端完成
html和js分離够傍，展示和邏輯分離
減少JS代碼次员，減少DOM元素查找，事件綁定等代碼
適合API開(kāi)發(fā)
AngularJS的一些簡(jiǎn)單使用方式
首先在頁(yè)面引入angular.js文件王带！
AngularJS有一套完整的、可擴(kuò)展的市殷、用來(lái)幫助web應(yīng)用開(kāi)發(fā)的指令集愕撰，它使得HTML可以轉(zhuǎn)變成“特定領(lǐng)域語(yǔ)言(DSL)”，是用來(lái)擴(kuò)展瀏覽器能力的技術(shù)之一，在DOM編譯期間搞挣，和HTML關(guān)聯(lián)著的指令會(huì)被檢測(cè)到带迟，并且被執(zhí)行，這使得指令可以為DOM指定行為囱桨，或者改變它仓犬。
AngularJS通過(guò)稱(chēng)為指令的新屬性來(lái)擴(kuò)展的HTML，帶有前綴ng-舍肠，我們也可以稱(chēng)之為“指令屬性”搀继，它就是綁定在DOM元素上的函數(shù)，可以調(diào)用方法翠语、定義行為叽躯、綁定controller及$scope對(duì)象、操作DOM肌括，等等点骑。
AngularJS指令指示的是“當(dāng)關(guān)聯(lián)的HTML結(jié)構(gòu)進(jìn)入編譯階段時(shí)應(yīng)該執(zhí)行的操作”，它本質(zhì)上只是一個(gè)當(dāng)編譯器編譯到相關(guān)DOM時(shí)需要執(zhí)行的函數(shù)谍夭，可以寫(xiě)在元素的名稱(chēng)里黑滴，屬性里，css類(lèi)名里紧索，注釋里袁辈。
當(dāng)瀏覽器啟動(dòng)、開(kāi)始解析HTML時(shí)齐板，DOM元素上的指令屬性就會(huì)跟其他屬性一樣被解析吵瞻，也就是說(shuō)當(dāng)一個(gè)Angular.js應(yīng)用啟動(dòng)，AngularJS編譯器就會(huì)遍歷DOM樹(shù)來(lái)解析HTML甘磨，尋找這些指令屬性函數(shù)橡羞，在一個(gè)DOM元素上找到一個(gè)或多個(gè)這樣的指令屬性函數(shù)，它們就會(huì)被收集起來(lái)济舆、排序卿泽，然后按照優(yōu)先級(jí)順序被執(zhí)行。
Angular.js應(yīng)用的動(dòng)態(tài)性和響應(yīng)能力滋觉，都要?dú)w功于指令屬性签夭，常見(jiàn)的有：ng-app、ng-init椎侠、ng-model第租、ng-bind、ng-repeat等等我纪。
ng-app
ng-app指令來(lái)標(biāo)明一個(gè)AngularJS應(yīng)用程序慎宾，并通過(guò)AngularJS完成自動(dòng)初始化應(yīng)用和標(biāo)記應(yīng)用根作用域丐吓，同時(shí)載入和指令內(nèi)容相關(guān)的模塊，并通過(guò)擁有ng-app指令的標(biāo)簽為根節(jié)點(diǎn)開(kāi)始編譯其中的DOM趟据。
引用方法很簡(jiǎn)單券犁，如下所示：
<div ng-app>
</div>
如上引用，一個(gè)AngularJS應(yīng)用程序初始化就完成了并標(biāo)記了作用域汹碱，也就是div元素就是AngularJS應(yīng)用程序的”所有者”粘衬，在它里面的指令也就會(huì)被AngularJS編譯器所編譯、解析了咳促。
ng-init
ng-init指令初始化應(yīng)用程序數(shù)據(jù)稚新，也就是為AngularJS應(yīng)用程序定義初始值，通常情況下等缀，我們會(huì)使用一個(gè)控制器或模塊來(lái)代替它枷莉，后面我們會(huì)介紹有關(guān)控制器和模塊的知識(shí)。
如下所示尺迂，我們?yōu)閼?yīng)用程序變量name賦定初始值笤妙。
<div ng-app=“” ng-init=“name=‘zhangsan’”>
</div>
我們不僅可以賦值字符串，也可以賦值為數(shù)字噪裕、數(shù)組蹲盘、對(duì)象，而且可以為多個(gè)變量賦初始值膳音，如下所示：
<div ng-app=“” ng-init=“width=3;length=5”>
</div>
ng-model
在AngularJS中召衔，只需要使用ng-model指令就可以把應(yīng)用程序數(shù)據(jù)綁定到HTML元素，實(shí)現(xiàn)model和view的雙向綁定祭陷。
如下示例苍凛，使用ng-model指令對(duì)數(shù)據(jù)進(jìn)行綁定。
<div ng-app=“”>
請(qǐng)輸入任意值：<input type=“text” ng-model=“name”>
你輸入的為： {{ name }}
</div>
ng-model把相關(guān)處理事件綁定到指定標(biāo)簽上兵志，這樣我們就可以不用在手工處理相關(guān)事件(比如change等)的條件下完成對(duì)數(shù)據(jù)的展現(xiàn)需求醇蝴。
以上介紹了ng-model的單向綁定(view->model)后面控制器我們會(huì)用到它的雙向綁定功能。
ng-model原理
angularJS加載完成之后會(huì)啟動(dòng)想罕，首先找 ng-app指令
找到后認(rèn)為ng-app里面的所有的內(nèi)容都?xì)wangularJS來(lái)管
找子層標(biāo)簽里所有的指令悠栓，然后就可以找到ng-model
找到后會(huì)生成數(shù)據(jù)模型，然后掛在根作用域上面按价。
然后下面所有的標(biāo)簽都可以讀取ng-model的值惭适。
ng-bind
指令ng-bind和AngularJS表達(dá)式有異曲同工之妙，但不同之處就在于ng-bind是在angularJS解析渲染完畢后才將數(shù)據(jù)顯示出來(lái)的楼镐。
如下使用ng-bind指令綁定把應(yīng)用程序數(shù)據(jù)癞志。
<div ng-app=“”>
請(qǐng)輸入一個(gè)名字：<input type=“text” ng-model=“name”>
Hello <span ng-bind=“name”></span>
</div>
PS：使用花括號(hào)語(yǔ)法時(shí)，因?yàn)闉g覽器需要首先加載頁(yè)面框产，渲染它今阳，然后AngularJS才能把它解析成你期望看到的內(nèi)容师溅，所以對(duì)于首個(gè)頁(yè)面中的數(shù)據(jù)綁定操作，建議采用ng-bind盾舌，以避免其未被渲染的模板被用戶看到。
ng-click
AngularJS也有自己的HTML事件指令蘸鲸，比如說(shuō)通過(guò)ng-click定義一個(gè)AngularJS單擊事件妖谴。
對(duì)按鈕、鏈接等酌摇，我們都可以用ng-click指令屬性來(lái)實(shí)現(xiàn)綁定膝舅，如下簡(jiǎn)單示例：
<div ng-app=“” ng-init=“click=false”>
<button ng-click=“click= !click”>隱藏/顯示</button>
<div ng-hide=“click”>
請(qǐng)輸入一個(gè)名字：<input type=“text” ng-model=“name”>
Hello <span ng-bind=“name”></span>
</div>
</div>
PS：ng-hide=“true”，設(shè)置HTML元素不可見(jiàn)窑多。
ng-click指令將DOM元素的鼠標(biāo)點(diǎn)擊事件(即mousedown)綁定到一個(gè)方法上仍稀，當(dāng)瀏覽器在該DOM元素上鼠標(biāo)觸發(fā)點(diǎn)擊事件時(shí)，AngularJS就會(huì)調(diào)用相應(yīng)的方法埂息。
ng-repeat
ng-repeat指令技潘，遍歷一個(gè)數(shù)據(jù)集合中的每個(gè)數(shù)據(jù)元素，并且加載HTML模版把數(shù)據(jù)渲染出來(lái)千康，當(dāng)我們要向HTML容器節(jié)點(diǎn)中添加更多類(lèi)似DOM元素的時(shí)候享幽，使用ng-repeat是再好不過(guò)了。
ng-repeat指令對(duì)于集合中(數(shù)組中)的每一項(xiàng)都會(huì)渲染一次HTML元素拾弃。
例1:
<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<ul>
<li ng-repeat=“x in arr”>{{x}}</li>
</ul>
</body>
例2:
<body ng-app=“” ng-init=“obj={‘user’:’zhangsan’,’pass’:’12345’,’sex’:’man’}”>
<table border=“1”>
<tr ng-repeat=“(key,value) in obj”>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</body>
ng-class
ng-class是AngularJS預(yù)設(shè)的一個(gè)指令值桩，用于動(dòng)態(tài)自定義dom元素的css class name
<head>
<meta charset=“utf-8”>
<title></title>
<style type=“text/css”>
.active{
color: red;
}
.inactive{
color: green;
}
</style>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
</head>
<body ng-app=“” ng-init=“isActive=false”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div ng-class=“{true:’active’,false:’inactive’}[isActive]”>
{{name1 +” “+ name2}}
</div>
</body>
ng-include
ng-include就是將多個(gè)頁(yè)面的公共頁(yè)面提取出來(lái)，如header.html豪椿，footer.html等奔坟，在每個(gè)頁(yè)面用
<div ng-include=“’header.html’”></div>
來(lái)引入。
**注意: **
必須用web容器打開(kāi)站點(diǎn)才能成功搭盾，用本地文件的模式訪問(wèn)會(huì)報(bào)錯(cuò)
ng-include的值是如果要寫(xiě)為文件名的話需要加單引號(hào)咳秉，否則會(huì)被當(dāng)作一個(gè)變量來(lái)處理。
自定義指令
控制器scope
AngularJS控制器控制AngularJS應(yīng)用程序的數(shù)據(jù)增蹭，是常規(guī)的JavaScript對(duì)象滴某。
ng-controller指令就是用來(lái)定義應(yīng)用程序控制器的，并且同時(shí)創(chuàng)建了一個(gè)新的作用域關(guān)聯(lián)到相應(yīng)的DOM元素上滋迈。
所謂作用域就是一個(gè)指向應(yīng)用模型的對(duì)象霎奢，它是表達(dá)式的執(zhí)行環(huán)境，作用域有層次結(jié)構(gòu)饼灿，這個(gè)層次和相應(yīng)的DOM幾乎是一樣的幕侠，作用域能監(jiān)控表達(dá)式和傳遞事件并且可以從父作用域繼承屬性。
每一個(gè)AngularJS應(yīng)用都有一個(gè)絕對(duì)的根作用域碍彭。但也可能有多個(gè)子作用域晤硕。 一個(gè)應(yīng)用可以有多個(gè)作用域悼潭，因?yàn)橛幸恍┲噶顣?huì)生成新的子作用域，當(dāng)新作用域被創(chuàng)建的時(shí)候舞箍，他們會(huì)被當(dāng)成子作用域添加到父作用域下舰褪，這使得作用域會(huì)變成一個(gè)和相應(yīng)DOM結(jié)構(gòu)一個(gè)的樹(shù)狀結(jié)構(gòu)。
控制器上的屬性
現(xiàn)在我們就用ng-controller指令來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的控制器定義疏橄，如下所示：
<div ng-app=“” ng-controller=“MyController”>
請(qǐng)輸入一個(gè)名字：<input type=“text” ng-model=“person.name”>
Hello <span ng-bind=“person.name”></span>
</div>
<script>
function MyController ($scope) {
$scope.person = {
name: “zhangsan”
};
}
</script>
如上所述占拍，我們通過(guò)ng-controller指令創(chuàng)建了一個(gè)JavaScript對(duì)象 —— MyController并帶有name屬性，那參數(shù)$scope是什么呢捎迫，代表什么意思呢晃酒。
現(xiàn)在我們就來(lái)解答MyController對(duì)象參數(shù) —— $scope。
$scope就是把一個(gè)DOM元素連結(jié)到控制器上的對(duì)象窄绒，它提供一個(gè)綁定到DOM元素(以及其子元素)上的執(zhí)行上下文贝次。它也是一個(gè)JavaScript對(duì)象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文彰导。
要明確創(chuàng)建一個(gè)$scope對(duì)象蛔翅，我們就要給DOM元素安上一個(gè)controller對(duì)象，使用的是ng-controller 指令屬性螺戳。
所有$scope都遵循原型繼承搁宾，這意味著它們都能訪問(wèn)父$scope們,對(duì)任何屬性和方法，如果AngularJS在當(dāng)前$scope上找不到倔幼，就會(huì)到父$scope上去找盖腿，如果在父$scope上也沒(méi)找到，就會(huì)繼續(xù)向上回溯损同，一直到$rootScope上翩腐，這個(gè)$rootScope是最頂級(jí)的$scope，它對(duì)應(yīng)著含有 ng-app指令屬性的那個(gè)DOM元素膏燃，也就是說(shuō)根作用域關(guān)聯(lián)的DOM就是ng-app指令定義的地方茂卦。
也就是說(shuō)，擁有了$scope组哩，我們就可以操作作用域內(nèi)任何我們想要獲取的對(duì)象數(shù)據(jù)等龙。
控制器上的方法
控制器不僅聲明屬性也可以聲明方法，如下所示：
<div ng-app=“” ng-controller=“MyController”>
名稱(chēng):
<input type=“text” ng-model=“username”>
<button ng-click=“sayHello()”>打招呼</button>
<hr>
{{greeting}}
</div>
<script>
function MyController($scope) {
$scope.username = ‘zhangsan’;
$scope.sayHello = function() {
$scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
};
}
</script>
注意事項(xiàng)
不要試圖去復(fù)用controller,一個(gè)控制器一般只負(fù)責(zé)一小塊視圖
不要在controller中操作DOM伶贰，這不是控制器的職責(zé)蛛砰，是指令的職責(zé)。
不要在controller里做數(shù)據(jù)格式化黍衙，ng有很好用的過(guò)濾器實(shí)現(xiàn)此功能泥畅。
不要在controller里面做數(shù)據(jù)過(guò)濾操作，ng有$filter服務(wù)
一般來(lái)說(shuō)琅翻，controller是不會(huì)互相調(diào)用的位仁，控制器這間的交互是通過(guò)事件進(jìn)行的柑贞。
創(chuàng)建指令
指令定義對(duì)象的常用屬性如下：
template : string
使用template指定的HTML標(biāo)記替換指令內(nèi)容（或指令自身）
restrict : string
用來(lái)限定指令在HTML模板中出現(xiàn)的位置。
replace : true|false
使用這個(gè)屬性指明template的替換方式聂抢。
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="testController">
<text-directive></text-directive>
</body>
AngularJS的服務(wù)
AngularJS提供了一些功能的封裝钧嘶，但是當(dāng)你試圖通過(guò)全局對(duì)象angularJS去 訪問(wèn)這些功能時(shí)，卻發(fā)現(xiàn)與以往遇到的庫(kù)大不相同涛浙。
$http
比如康辑，在jQuery中，我們知道它的API通過(guò)一個(gè)全局對(duì)象：$ 暴露出來(lái)轿亮，當(dāng)你需要 進(jìn)行ajax調(diào)用時(shí)，使用$.ajax()就可以了胸墙。這樣的API很符合思維的預(yù)期我注。
AngularJS也暴露了一個(gè)全局對(duì)象：angularJS，也對(duì)ajax調(diào)用進(jìn)行封裝提供了一個(gè) $http對(duì)象迟隅，但是但骨，但是，當(dāng)你試圖沿用舊經(jīng)驗(yàn)訪問(wèn)angular.$http時(shí)智袭，發(fā)現(xiàn)不是 那么回事奔缠！在angularJS中是以一個(gè)參數(shù)的形式傳遞到控制器中，如果要使用它吼野，需要在 controller 中定義校哎。
$http服務(wù)
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<span ng-bind-html="content"></span>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function ($scope, $http) {
$http.get("content.html").success(function (res) {
$scope.content = res;
})
});
</script>
定時(shí)器
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$timeout){
$timeout(function (){
alert(‘a(chǎn)’);
},2000);
});
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$interval){
//循環(huán)定時(shí)器
$interval(function (){
alert(‘a(chǎn)’);
},2000);
});
## 模仿百度搜索功能
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="wd" ng-change="change()">
<ul>
<li ng-repeat="item in query">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-sanitize.js"></script>
<script>
var app = angular.module("myApp", ["ngSanitize"]);
function myControllerCb ($scope, $http) {
$scope.wd = "";
$scope.change = function () {
$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$scope.wd+"&cb=JSON_CALLBACK").then(function (res) {
console.log(res.data);
$scope.query = res.data.s;
});
}
}
app.controller("myController", myControllerCb);
</script>
</html>
AngularJS過(guò)濾器
過(guò)濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。
currency——格式化數(shù)字為貨幣格式瞳步。
filter——從數(shù)組項(xiàng)中選擇一個(gè)子集闷哆。
lowercase——格式化字符串為小寫(xiě)。
orderBy——根據(jù)某個(gè)表達(dá)式排列數(shù)組单起。
uppercase——格式化字符串為大寫(xiě)抱怔。
例1(格式化數(shù)字為貨幣格式):
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<span>相乘</span>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” /><br />
<!—currency:”￥” 中文—>
結(jié)果為：{{myFn() | currency}}
</div>
</body>
<script type="text/javascript">
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.num1=5;
$scope.num2=10;
$scope.myFn = function (){
return $scope.num1*$scope.num2;
}
});
</script>
例2(字體大小轉(zhuǎn)換):
<body ng-app=“”>
<div>
<!—{{‘HelloWorld’ | lowercase}}—>
{{‘HelloWorld’ | uppercase}}
</div>
</body>
例3(篩選):
<body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
搜索：<input type=“text” ng-model=“name” />
<ul>
<li ng-repeat=“x in arr | filter:name”>{{x}}</li>
</ul>
</body>
例4(篩選加排序):
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<ul>
<li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}</li>
</ul>
</div>
</body>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.friends = [{name:’John’, phone:’555-1212’, age:21},
{name:’Mary’, phone:’555-9876’, age:19},
{name:’Mike’, phone:’555-4321’, age:10},
{name:’Adam’, phone:’555-5678’, age:35},
{name:’Julie’, phone:’555-8765’, age:29}];
$scope.order=“phone”;
});
</script>
