0.前言
??已經(jīng)有多天沒有寫博客了户辱，關(guān)鍵是最近實(shí)在是太忙了庐镐，沒時(shí)間寫变逃，前段時(shí)間有朋友讓我多寫一點(diǎn)關(guān)于前端框架的知識(shí)點(diǎn)，目前前端市場(chǎng)的框架技術(shù)分為三大陣營(yíng)——Rect.js名眉、Angular.js损拢、Vue.js，所以今天就和大家分享一下AngularJS這個(gè)目前市場(chǎng)上前端很火的技術(shù)框架掏秩。
1.Angular.js簡(jiǎn)介
（1）什么是Angular.js荆姆？
AngularJS 是一個(gè) JavaScript 框架胆筒。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。
AngularJS 通過 指令 擴(kuò)展了 HTML抒和，且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML派桩。
AngularJS有著諸多特性铆惑，最為核心的是：MVC、模塊化丑蛤、自動(dòng)化雙向數(shù)據(jù)綁定受裹、語義化標(biāo)簽虏束、依賴注入等等镇匀。
（2）Angular.js中的模塊
（3）Angular.js控制器
（4）Angular.js知識(shí)點(diǎn)總結(jié)
（5）Angular.js的常用內(nèi)置指令
2.案例介紹
??上面主要介紹了Angular.js一些基礎(chǔ)知識(shí)幸缕，可能大家還是會(huì)感覺到困惑，表達(dá)的不夠直白熟妓，現(xiàn)在我們來用代碼可能會(huì)更加清晰栏尚。
（1）HelloWorld
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span{
color: red;
font-size: 30px;
}
</style>
<!-- 導(dǎo)入AngularJs -->
<script src="../../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<h1>AngularJS Hello World</h1>
<!-- {{ }}是angularJS中的表達(dá)式 -->
<h2>Hello<span>{{ 1 + 2 }}</span></h2>
</div>
</body>
</html>
運(yùn)行效果：
現(xiàn)在我們來分析一下上述的功能：
ng-app：表示是一個(gè)AngularJS的應(yīng)用程序抵栈，告訴AngularJS管理哪一部分的DOM古劲，初始化AngularJS程序缰猴，但整個(gè)應(yīng)用中不必每一個(gè)標(biāo)簽使用AngularJS滑绒，可以給任何標(biāo)簽聲明ng-app指令。通俗點(diǎn)講杠览，就是AngularJS的標(biāo)識(shí)纵势，標(biāo)明那一塊是用AngularJS管理的钦铁。
注意：一把用在開頭的位置，用以表示這整個(gè)程序都是用AngularJS管理的佛点，也可用在其他位置黎比。
①用在開頭：
<html ng-app=" ">
②用在其他位置
<div ng-app=" ">
...
</div>
我們猜想一下阅虫，如果現(xiàn)在給ng-app=" "加一個(gè)值會(huì)是什么結(jié)果：
<html ng-app=" myApp">
結(jié)果：
注意：暫時(shí)我們先不要給名字书妻，如果給名字的話會(huì)報(bào)Uncaught Error: [$injector:modulerr]過后會(huì)解釋為什么。
最重要的一步见间，要導(dǎo)入AngularJS米诉，否則指令不會(huì)生效
<script src="../../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
{{ }}是angularJS中的表達(dá)式，當(dāng)聲明了AngularJS結(jié)構(gòu)拴泌，他就可以計(jì)算括號(hào)里面的值惊橱，否則就會(huì)當(dāng)成一個(gè)字符串税朴。
當(dāng)我們?cè)诔绦蛑屑尤肴缦鲁绦颍?/p>
<div>
<h1>傳統(tǒng)JS實(shí)現(xiàn)某個(gè)功能</h1>
<input type="text" id="js_input" />
<h2>Hello <span id="js_span"></span></h2>
</div>
<script type="text/javascript">
var input = document.querySelector("#js_input");
var span = document.querySelector("#js_span");
input.onkeyup = function(){
span.innerHTML = this.value;
}
</script>
它是實(shí)現(xiàn)在輸入框中輸入值正林，動(dòng)態(tài)的在span標(biāo)簽中顯示出來。如果用AngularJS的方法的話只需如下代碼：
<div>
<h1>angularJS實(shí)現(xiàn)上述功能</h1>
<input type="text" ng-model="msg" />
<h2>Hello <span ng-bind="msg"></span></h2>
<!-- 表達(dá)式的功和ng-bind一樣 -->
<h2>Hello <span>{{ msg }}</span></h2>
</div>
ng-model一般是給輸入控件使用的鼻忠，在這里可以用來存儲(chǔ)變量名為msg這個(gè)變量帖蔓，然后其他元素可以通過ng-bind指令來綁定這個(gè)變量蝇棉，這樣就實(shí)現(xiàn)數(shù)據(jù)的綁定篡殷，減少了DMO操作。
（2）ng-init和表達(dá)式
ng-init使用來聲明angularJS變量的奇瘦，如果有多個(gè)變量耳标，中間用分號(hào)“;”隔開
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- ng-init使用來聲明angularJS變量的邑跪，如果有多個(gè)變量，中間用分號(hào)“;”隔開 -->
<div ng-init="name = '小雪';person = {name : '小黑',age : 18};arr = [10,20]">
<h1>{{ name }}</h1>
<!-- 可以使用點(diǎn)語法分析出對(duì)象的結(jié)構(gòu) -->
<h2>{{ person.name }}</h2>
<h2>{{ arr }}</h2>
<!-- 可以運(yùn)算 -->
<h2>{{ arr[0] + person.age }}</h2>
<!-- 可以使用結(jié)果的某些方法 -->
<h1>{{ arr.join("===") }}</h1>
<h1>{{ "abc".toUpperCase() }}</h1>
<div ng-init="name = '小紅'">
<!-- 這里和JS不一樣宋距，這里修改完name的值症脂，前面在顯示上也會(huì)被修改掉 -->
<h1>名字：{{name}}</h1>
</div>
</div>
<hr />
<div>
<h1>{{name}}</h1>
<input type="text" ng-model="name" />
<h2>{{ name }}</h2>
</div>
</body>
</html>
運(yùn)行效果：
這里也能訪問到上面div設(shè)置的name變量诱篷，因?yàn)樯厦娴穆暶髅淖兞繒?huì)把name變量存儲(chǔ)到整個(gè)ng-app模塊中棕所，只要是用ng-app模塊來管理的元素，就可以訪問到這個(gè)變量蕾殴。
（3）ng-bind和ng-bind-template
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-init="name = '小雪';age = 18">
<h1>{{ name }}</h1>
<h1>{{ name + " and " + age }}</h1>
<h1>{{ name }} and {{ age }}</h1>
<h1 ng-bind="name"></h1>
<hr />
<h1 ng-bind-template="{{ name }} and {{ age }}"></h1>
</div>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
在這個(gè)程序中我把 script 標(biāo)簽挪到程序的最后面茴肥，運(yùn)行后不停地刷新界面，會(huì)發(fā)現(xiàn)有停頓的現(xiàn)象瞬铸，這大大影響了用戶的體驗(yàn)础锐。
{{}}和ng-bind具有同樣的功能皆警，使用 {{ }} 必須要在之前引入angularJS，否則會(huì)有閃現(xiàn)的效果鸵隧，影響用戶體驗(yàn)意推。
ng-bind-template要顯示值的話菊值，必須用表達(dá)式語法，否則這里都是字符串昵宇。
（4）ng-include
案例：
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- ng-include可以引入其他頁面绽诚，注意：一定要加
''杭煎，否則會(huì)被當(dāng)成變量
-->
<div ng-include="'./footer.html'"></div>
</body>
</html>
footer.html
<footer>
<h1>我是footer</h1>
</footer>
注意：要添加的頁面中只保留body標(biāo)簽里面的內(nèi)容羡铲。
結(jié)果：
（5）創(chuàng)建控制器
<!DOCTYPE html>
<!-- 這里設(shè)置一個(gè)名字，下面會(huì)創(chuàng)建這個(gè)模塊 -->
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<!-- 設(shè)置控制器指令扑媚，讓名字為MainCtrl控制器來控制整個(gè)body -->
<body ng-controller="MainCtrl">
<script type="text/javascript">
//創(chuàng)建模塊
var app = angular.module('myApp',[]);
console.log(app);
//創(chuàng)建控制器 第二個(gè)參數(shù)一般使用[]給括起來
// app.controller('MainCtrl',[function(){
// console.log("我是控制器");
// }])
//這樣寫也可以疆股，但將來構(gòu)建代碼的時(shí)候倒槐，有可能出現(xiàn)問題讨越，所以盡量寫上面的那種形式
// app.controller('MainCtrl',function(){
// console.log("我是控制器");
// })
//以后可以寫鏈?zhǔn)秸Z法，這樣看起老比較簡(jiǎn)潔
angular.module('myApp',[])
.controller('MainCtrl',[function(){
console.log("我叫控制器Ｈ斯着逐！");
}])
</script>
</body>
</html>
程序中有詳細(xì)的注釋滨嘱，這里就不一一解釋了。
3.總結(jié)
??今天就先到這里吟榴，謝謝Ｄ野狻！
