- 簡介
AngularJS是一個(gè)基于MVC處理模式辜王，實(shí)現(xiàn)了MVVM數(shù)據(jù)雙向綁定的用于開發(fā)動(dòng)態(tài)web項(xiàng)目的框架。以其數(shù)據(jù)和展現(xiàn)分離疙咸、MVVM、MVC风科、DI等強(qiáng)大的特性活躍于前端開發(fā)市 場(chǎng)撒轮，是前端敏捷開發(fā)使用的主流的必須掌握的框架之一。
AnuglarJS是前后端分離軟件架構(gòu)模型下贼穆，前端業(yè)務(wù)處理的解決方案题山！
注意：庫 VS框架
庫：封裝原生JavaScript實(shí)現(xiàn)的大量函數(shù)的集合，是提供了各種特定功能的函數(shù)庫
通過引入的庫中的函數(shù)故痊，可以快捷實(shí)現(xiàn)一些特定的處理過程顶瞳，如截取字符串等等
框架：一種封裝了原生JavaScript實(shí)現(xiàn)的函數(shù)、功能愕秫、組件慨菱、處理流程的特殊實(shí)現(xiàn)
通過引入框架中的配置，可以實(shí)現(xiàn)一定的邏輯處理功能豫领，如Bootstrap中的輪播圖等等
AngularJS是web應(yīng)用前端的一個(gè)完整的解決方案抡柿，框架不僅提供了優(yōu)雅的DOM操作和基于Ajax的數(shù)據(jù)交互技術(shù)，同時(shí)進(jìn)行了良好的結(jié)構(gòu)整理和常規(guī)的業(yè)務(wù)邏輯處理的封裝等恐，使得Angular構(gòu)建的應(yīng)用能夠靈活的適應(yīng)不同的項(xiàng)目場(chǎng)景洲劣。
注意：AngularJS中提供了如下的解決方案用以前端開發(fā)：
數(shù)據(jù)雙向綁定备蚓、基本模板指令、自定義指令囱稽、表單驗(yàn)證郊尝、路由操作、依賴注入战惊、過濾器流昏、內(nèi)置服務(wù)、自定義服務(wù)吞获、組件况凉、模塊
同樣，AngularJS框架從2013年開始在國內(nèi)出現(xiàn)應(yīng)用各拷，一直到2016年活躍于web前端項(xiàng)目開發(fā)中刁绒，豐富的社區(qū)資源也是一個(gè)非常重要的原因。
外鏈：常見AngularJS社區(qū)
http://www.angularjs.net.cn/tutorial/1.html
https://github.com/aztack/AngularJS-translation
https://github.com/dolymood/learning-angular
https://www.zouyesheng.com/angular.html
http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx
http://blog.jobbole.com/52857/
http://blog.jobbole.com/62999/
外鏈：AngularJS1.x官方網(wǎng)站
AngularJS1.x代碼下載
AngularJS1.x官方教程
https://code.angularjs.org/1.6.4/docs/tutorial
AngularJS1.x官方開發(fā)向?qū)?/p>
https://code.angularjs.org/1.6.4/docs/guide
AngularJS1.x官方API
https://code.angularjs.org/1.6.4/docs/api
- Quick start
入門程序1：實(shí)現(xiàn)一實(shí)時(shí)提取用戶鍵盤輸入內(nèi)容的記錄器
設(shè)計(jì)思路：傳統(tǒng)方式<通過鍵盤按鍵事件進(jìn)行處理>
<input onkeyup=”record()” type=”text”/>
<div>輸出記錄:<span></span></div>
..
function record() {..}
代碼：angular中烤黍，通過數(shù)據(jù)的雙向綁定直接實(shí)現(xiàn)
<html ng-app>
<input type=”text” ng-model=”info”>
<div>輸出記錄：{{info}}</div>
</html>
需求案例1：實(shí)現(xiàn)一個(gè)購物車中更新數(shù)據(jù)的功能
功能要求：修改購買數(shù)量知市，在修改的同時(shí)，商品的小計(jì)購買金額發(fā)生變化速蕊。
代碼：
<div ng-init=”price=12;count=1”>
<input type=”text” ng-model=”count”>
<div>小計(jì)金額：{{price * count}}</div>
</div>
AngularJS應(yīng)用中嫂丙，對(duì)傳統(tǒng)的HTML進(jìn)行了擴(kuò)展，增加并強(qiáng)化了HTML的功能规哲，從入口屬性ng-app(指令)開始加載應(yīng)用跟啤，并逐行編輯解釋這些擴(kuò)展的內(nèi)容。
遇到input標(biāo)簽中的屬性ng-model(指令)媳叨，就會(huì)將它的值當(dāng)成一個(gè)變量進(jìn)行處理
遇到{{}}這樣的結(jié)構(gòu)腥光，就會(huì)將括號(hào)中的值當(dāng)成表達(dá)式進(jìn)行處理
注意：mustache語法关顷，通過兩個(gè)大括號(hào)來包含一個(gè)表達(dá)式的結(jié)構(gòu)
Angular會(huì)對(duì)mustache語法進(jìn)行編譯并解釋成可以運(yùn)算的表達(dá)式進(jìn)行處理
AngularJS就是因?yàn)閷?duì)傳統(tǒng)的HTML進(jìn)行了功能的擴(kuò)展糊秆，所以在一定程度上，實(shí)現(xiàn)了軟件開發(fā)過程中前后端的架構(gòu)級(jí)別的分離——也就是軟件前后端分離架構(gòu)模型议双。
同時(shí)將前端的內(nèi)容展示痘番、業(yè)務(wù)功能處理、數(shù)據(jù)交互有組織的進(jìn)行了規(guī)劃平痰，讓前端HTML更加適合如今的企業(yè)級(jí)平臺(tái)的web軟件開發(fā)汞舱。
擴(kuò)展：傳統(tǒng)軟件模型是前后端耦合架構(gòu)模式，所謂耦合架構(gòu)就是服務(wù)器后端和前端緊密結(jié)合宗雇，這樣的架構(gòu)模型下HTML是不滿足web開發(fā)需要的昂芜。如JavaEE開發(fā)的web軟件，服務(wù)器后端使用java語言以及它的框架來完成開發(fā)赔蒲，前端使用JSP進(jìn)行開發(fā)泌神，JSP是對(duì)HTML的擴(kuò)展良漱，可以在HTML中添加java代碼和java定義的標(biāo)簽，但是JSP是只能用于Java后臺(tái)的視圖欢际。PHP開發(fā)的服務(wù)器后臺(tái)母市，頁面部分使用PHP進(jìn)行開發(fā)，PHP文件也是在HTML中進(jìn)行了大量的功能擴(kuò)展损趋。
AngularJS類似的框架出現(xiàn)之后患久，對(duì)于前端進(jìn)行了大量的封裝和擴(kuò)展，讓HTML能更加友好的支持后端主流的語言并協(xié)同進(jìn)行web軟件的開發(fā)浑槽，也就是前后端開始分離蒋失，不再像以前那樣緊密的耦合。
- 專業(yè)術(shù)語概述
術(shù)語
描述
模板template
包含了Angular特殊擴(kuò)展標(biāo)記的HTML代碼
指令directive
擴(kuò)展的HTML代碼桐玻，自定義的標(biāo)簽高镐、屬性等等
模型model
保存在JS中，用來和用戶交互的數(shù)據(jù)
作用域scope
模型數(shù)據(jù)在HTML頁面中產(chǎn)生作用的范圍
表達(dá)式expression
AngularJS在HTML頁面中可以運(yùn)算的語法
編譯器compiler
被用來解釋HTML代碼中的Angular代碼
過濾器filter
對(duì)HTML頁面中輸出的數(shù)據(jù)進(jìn)行指定格式展示
視圖view
統(tǒng)稱用戶看到的HTML視圖頁面
數(shù)據(jù)綁定data binding
JS中特定的數(shù)據(jù)和HTML頁面上的數(shù)據(jù)的關(guān)聯(lián)關(guān)系
控制器controller
給視圖view提供功能支持的東東
依賴注入
dependency injection
Angular自動(dòng)創(chuàng)建對(duì)象并傳遞對(duì)象的一種方式
注入器
injector
專門用來實(shí)現(xiàn)依賴注入（DI）的容器
模塊module
Angular用來對(duì)項(xiàng)目進(jìn)行最高層次封裝的東東
服務(wù)service
Angular用來對(duì)視圖view提供業(yè)務(wù)功能支持的東東
組件component
用于對(duì)網(wǎng)頁的公共部分進(jìn)行封裝重用的Angular代碼
通常會(huì)包含模板畸冲、指令嫉髓、服務(wù)等等
- 引導(dǎo)程序
任何應(yīng)用程序，運(yùn)行過程中都會(huì)有一個(gè)運(yùn)行的入口邑闲。
AngularJS應(yīng)用程序也是一樣算行，正常情況下，引導(dǎo)Ag應(yīng)用的入口程序有兩種：
l ng-app指令
l bootstrap手工引導(dǎo)
常規(guī)模式下苫耸，是通過ng-app指令引導(dǎo)Angular應(yīng)用進(jìn)行工作的州邢。
網(wǎng)頁中引入Angular之后，程序運(yùn)行時(shí)會(huì)自動(dòng)查找ng-app指令并從這個(gè)入口開始加載編譯并解釋執(zhí)行褪子。
代碼：通常量淌，頁面中會(huì)定義ng-app熟悉來指定入口
在script中通過angular的module來加載ng-app指定的模塊
<html ng-app=”myApp”>
<script>
angular.module(“myApp”, []);
</script>
</html>
代碼：某些特殊情況下，也可以通過腳本來動(dòng)態(tài)控制加載啟動(dòng)Angular應(yīng)用
通過angular.bootstrap(dom, module)來啟動(dòng)應(yīng)用
<html>
<div id=”myDiv”></div>
<script>
angular.module(“myApp”, []);
var _div = document.getElementById(“myDiv”);
angular.bootstrap(_div, “myApp”);
</script>
</html>
- 基礎(chǔ)語法結(jié)構(gòu)
開始深入學(xué)習(xí)AngularJS之前嫌褪，先簡單認(rèn)識(shí)AngularJS中的各個(gè)部分都是怎么定義和使用的呀枢，方便解決后續(xù)學(xué)習(xí)過程中的一些困擾。
ng-app
Angular應(yīng)用運(yùn)行的入口指令笼痛，常規(guī)情況下裙秋，是寫在我們前端項(xiàng)目的入口文件的跟標(biāo)簽上的，用于在項(xiàng)目啟動(dòng)的時(shí)候引導(dǎo)Angular應(yīng)用
angular.module(..)
Angular是通過模塊來管理我們前端項(xiàng)目中的數(shù)據(jù)的缨伊，通常情況下一個(gè)項(xiàng)目中會(huì)包含各種各樣的數(shù)據(jù)摘刑，如管理員、會(huì)員刻坊、商品列表枷恕、商品、新聞列表谭胚、新聞徐块、公告等等
模塊時(shí)需要在應(yīng)用啟動(dòng)的時(shí)候就需要加載的隶校，所以Angular在設(shè)計(jì)的過程中對(duì)于入口指令進(jìn)行了改造可以綁定一個(gè)值，這個(gè)值就是系統(tǒng)的主模塊
基本指令
指令是Angular中使用比較多的一個(gè)部分蛹锰，Angular中的內(nèi)置指令都是ng-開頭的一種特殊的語法結(jié)構(gòu)深胳，如:ng-app等，常見的基本指令如下：
ng-app=”myApp”:程序運(yùn)行的入口铜犬，通過名稱綁定一個(gè)模塊
ng-init:用于在程序運(yùn)行的過程中舞终，初始化一些變量的數(shù)據(jù)的操作
ng-model=”param”:數(shù)據(jù)綁定的指令，主要用于表單元素上的數(shù)據(jù)綁定
ng-bind:數(shù)據(jù)綁定的指令癣猾，用于將變量的數(shù)據(jù)顯示到頁面上敛劝，用于替代mustache語法的
ng-controller:控制器指令，用于在頁面中指定控制器作用范圍纷宇，通常作為屬性出現(xiàn)
ng-[event]:事件指令夸盟，用于在頁面中發(fā)生某些事件時(shí)調(diào)用指令的函數(shù)
基本語法
var app = angular.module(“name”, []):用于定義一個(gè)angular的模塊
l name是模塊的名稱
l []中可以添加其他的模塊
app.controller(“name”, function() {}):用于定義一個(gè)angular的控制器
l name是控制器的名稱
l function(){}是這個(gè)控制器要處理功能的函數(shù)
$scope作用域
$scope是放在控制器函數(shù)中的一個(gè)參數(shù)。這個(gè)參數(shù)不需要傳值像捶，而是angular自動(dòng)賦值
在操作的過程中scope上聲明變量或者函數(shù)，
scope掛載數(shù)據(jù)释簿。
$rootScope作用域
rootScope上的數(shù)據(jù)偏螺，會(huì)被Angular應(yīng)用中的所有模塊下的子模塊和控制器公用。
run()函數(shù)
配合$rootScope使用匆光，用于聲明和初始化全局?jǐn)?shù)據(jù)
app.run(function($rootScope) { // 處理代碼})
watch()
掛載在$scope上套像，用于監(jiān)控?cái)?shù)據(jù)的變化
監(jiān)控單個(gè)變量：watch(“name”,function() {// 處理代碼})
監(jiān)控多個(gè)變量：watch(“name1+ name2 + ..” + function() {})
angular事件處理
AngularJS中的事件操作，由于它自己虛擬DOM結(jié)構(gòu)所以不支持普通事件殴穴，通常通過它自己的事件指令來調(diào)用通過$scope掛在到控制器中的函數(shù)執(zhí)行完成凉夯，事件指令其實(shí)就是對(duì)于常見事件的封裝货葬，以ng-開頭采幌，加上事件名稱即可，如鼠標(biāo)單擊事件ng-click
- MVC處理模式
MVC不是一個(gè)技術(shù)震桶，是一種處理問題的思路休傍，也就是編程思想。
這種編程思想的核心是將數(shù)據(jù)和展示分離蹲姐，通過控制器掛載并進(jìn)行一定的功能邏輯的處理以達(dá)到讓代碼具備強(qiáng)大的擴(kuò)展性的目的磨取。
MVC中主要包含三個(gè)模塊
l View:視圖——用于數(shù)據(jù)的展示和交互
l Model:數(shù)據(jù)模型——用與數(shù)據(jù)的封裝和運(yùn)算
l Controller:控制器——用于對(duì)視圖和數(shù)據(jù)模型之間的聯(lián)系進(jìn)行邏輯關(guān)系的處理
擴(kuò)展：MVC和MVP
MVC是傳統(tǒng)的處理模式人柿，但是隨著近年來前端技術(shù)發(fā)展迅速，數(shù)據(jù)雙向綁定處理模式的出現(xiàn)忙厌，傳統(tǒng)的MVC也進(jìn)行了細(xì)化凫岖，出現(xiàn)了MVP處理模式
MVC:視圖view和數(shù)據(jù)模型model的數(shù)據(jù)是雙向綁定的，控制器只是作為提供邏輯處理服務(wù)的中間件
MVP:視圖view和數(shù)據(jù)模型model的數(shù)據(jù)是單向綁定的逢净，控制器作為視圖view和數(shù)據(jù)模型model之間傳遞數(shù)據(jù)和邏輯處理的橋梁
常規(guī)情況下哥放，由于MVC處理模式下數(shù)據(jù)雙向綁定造成的數(shù)據(jù)源的污染，以及view對(duì)于model嚴(yán)重的依賴性爹土，所以建議在mvc處理模式下甥雕，復(fù)雜業(yè)務(wù)的數(shù)據(jù)的傳遞和邏輯處理過程還是通過控制器進(jìn)行，而不是直接綁定
- 控制器<controller>
AngularJS1.x的核心之一就是控制器部分胀茵，主要對(duì)于視圖中的數(shù)據(jù)和事件處理函數(shù)進(jìn)行掛載社露，同時(shí)進(jìn)行一定的業(yè)務(wù)功能的底層封裝和處理。
控制器在AngularJS中的作用
l 通過$scope進(jìn)行數(shù)據(jù)狀態(tài)的初始化操作
l 通過$scope進(jìn)行事件處理函數(shù)的掛載操作
注意：不要使用控制器做下面的事情
l DOM操作：使用AngularJS中的數(shù)據(jù)雙向綁定和自定義指令執(zhí)行操作
l 表單處理：使用Angular中的form controls進(jìn)行操作
l 數(shù)據(jù)格式化展示：使用Angular中的過濾器Filter來進(jìn)行操作
l 不同控制器之間的數(shù)據(jù)共享：使用Angular中的自定義服務(wù)Service進(jìn)行處理
l 組件生命周期的操作：使用Angular中的自定義服務(wù)Service進(jìn)行處理
代碼：控制器語法結(jié)構(gòu)
var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope) {
// 控制器函數(shù)操作部分
// 控制器主要進(jìn)行數(shù)據(jù)的初始化操作和事件函數(shù)的定義
});
7.1. scope作為控制器函數(shù)一個(gè)非常重要的參數(shù)琼娘，AngularJS通過依賴注入的方式進(jìn)行自動(dòng)賦值峭弟，掛載數(shù)據(jù)完成控制器中的數(shù)據(jù)處理。每個(gè)$scope都擁有自己控制器的作用域脱拼，并且都獨(dú)立于當(dāng)前的控制器孟害。
7.2. $rootScope作用域
每一個(gè)AngularJS應(yīng)用，都有唯一的一個(gè)全局作用域范圍挪拟，也稱為根作用域挨务，Angular中其他的作用域都是這個(gè)根作用域的后代/子作用域。
AngularJS的根作用域/全局作用域：$rootScope
根作用域使用時(shí)玉组，通過注入的方式添加到控制器處理函數(shù)的入?yún)⒅小?/p>
7.3. 依賴注入
7.4. 全局控制器和局部控制器
7.5. 控制器嵌套
注意：控制器的改進(jìn)
在Angular1.2版本之前谎柄，控制器是通過靜態(tài)函數(shù)直接定義的，并且控制器中的變量是作用于全局的惯雳。但是全局控制器的作用域造成了控制器數(shù)據(jù)的全局污染朝巫。所以在AngularJS1.2版本以后，進(jìn)行了更新石景，不再添加任何全局控制器劈猿，而是將控制器掛載到模塊上注冊(cè)成為局部作用域，方便數(shù)據(jù)的高可控性和可操作性潮孽。
- 組件化<component>
AngularJS作為一個(gè)模塊化組件開發(fā)的web前端框架揪荣，對(duì)于視圖進(jìn)行組件化封裝以達(dá)到重用的目的，是它非常優(yōu)秀的一個(gè)亮點(diǎn)往史。
什么是組件化仗颈？組件化是將頁面中一部分UI封裝起來進(jìn)行重復(fù)使用，UI中的數(shù)據(jù)可以是不同的椎例，甚至組件中可以對(duì)UI進(jìn)行適當(dāng)?shù)臉I(yè)務(wù)邏輯處理挨决，如鏈接跳轉(zhuǎn)请祖、數(shù)據(jù)運(yùn)算等等
代碼：組件定義語法結(jié)構(gòu)
var app = angular.module(“myApp”, []);
app.component(“name”, {
settings
});
組件選項(xiàng)：
l template:組件替換模板字符串
l templateUrl:組件替換html模板頁面
l controller:組件控制器
代碼：組件定義語法結(jié)構(gòu)
var app = angular.module(“myApp”, []);
app.component(“myComp”, {
template:”<h1>組件化開發(fā)</h1>”,
controller:function($scope) {
控制器處理代碼
}
});
注意：組件命名規(guī)則
組件的命名有框架自己的規(guī)則和使用規(guī)范，都是根據(jù)實(shí)際項(xiàng)目需要進(jìn)行封裝處理的
組件命名規(guī)則：駝峰命名法脖祈，見名知意肆捕，如：myComp
使用規(guī)則：W3C命名規(guī)則，將大寫字母轉(zhuǎn)換成小寫字母盖高，前面加中劃線福压，如<my-ctrl></my-comp>
