摘要：入門一前言目前來(lái)說(shuō)相對(duì)于現(xiàn)在流行的高版本以及來(lái)說(shuō)實(shí)屬是老套的前端框架了，當(dāng)然這都不重要，沒(méi)有完美的框架，只有不斷優(yōu)化的代碼。通過(guò)使用我們稱為指令的結(jié)構(gòu)，讓瀏覽器能夠識(shí)別新的語(yǔ)法。使用作為輸入，而不是字符串，是區(qū)別于其它的框架的最大原因。

AngularJs目前來(lái)說(shuō)相對(duì)于現(xiàn)在流行的高版本ng2、ng4,以及Vue2.0、React來(lái)說(shuō)實(shí)屬是老套的前端框架了，當(dāng)然這都不重要，沒(méi)有完美的框架，只有不斷優(yōu)化的代碼。其實(shí)只是符合公司水平要求才這么整的啊。。話不多說(shuō)，開搞吧。

一、什么是AngularJs

1、AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。HTML是一門很好的為靜態(tài)文本展示設(shè)計(jì)的聲明式語(yǔ)言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。

通常，我們是通過(guò)以下技術(shù)來(lái)解決靜態(tài)網(wǎng)頁(yè)技術(shù)在構(gòu)建動(dòng)態(tài)應(yīng)用上的不足：
1> 類庫(kù) - 類庫(kù)是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼，由你來(lái)決定何時(shí)使用類庫(kù)。類庫(kù)有：jQuery等。
2> 框架 - 框架是一種特殊的、已經(jīng)實(shí)現(xiàn)了的WEB應(yīng)用，你只需要對(duì)它填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的，由它來(lái)根據(jù)具體的應(yīng)用邏輯來(lái)調(diào)用你的代碼。框架有：knockout、sproutcore等。

AngularJS使用了不同的方法，它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷。AngularJS通過(guò)使用我們稱為指令(directives)的結(jié)構(gòu)，讓瀏覽器能夠識(shí)別新的語(yǔ)法。例如：

使用雙大括號(hào){{}}語(yǔ)法進(jìn)行數(shù)據(jù)綁定；

使用DOM控制結(jié)構(gòu)來(lái)實(shí)現(xiàn)迭代或者隱藏DOM片段；

支持表單和表單的驗(yàn)證；

能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上；

能將HTML分組成可重用的組件。

還有很多事情，這里大概提一下。到了模塊介紹和具體項(xiàng)目中會(huì)詳細(xì)講解。

二、特性     

1>雙向的數(shù)據(jù)綁定。

它能夠幫助你避免書寫大量的初始代碼從而節(jié)約開發(fā)時(shí)間。一個(gè)典型的web應(yīng)用可能包含了80%的代碼用來(lái)處理，查詢和監(jiān)聽DOM。數(shù)據(jù)綁定是的代碼更少，你可以專注于你的應(yīng)用。我們想象一下Model是你的應(yīng)用中的簡(jiǎn)單事實(shí)。你的Model是你用來(lái)讀取或者更新的部分。數(shù)據(jù)綁定指令提供了你的Model投射到view的方法。這些投射可以無(wú)縫的，毫不影響的應(yīng)用到web應(yīng)用中。傳統(tǒng)來(lái)說(shuō)，當(dāng)model變化了。
開發(fā)人員需要手動(dòng)處理DOM元素并且將屬性反映到這些變化中。這個(gè)一個(gè)雙向的過(guò)程。一方面，model變化驅(qū)動(dòng)了DOM中元素變化，另一方面，DOM元素的變化也會(huì)影響到Model。這個(gè)在用戶互動(dòng)中更加復(fù)雜，因?yàn)殚_發(fā)人員需要處理和解析這些互動(dòng)，然后融合到一個(gè)model中，并且更新View。這是一個(gè)手動(dòng)的復(fù)雜過(guò)程，當(dāng)一個(gè)應(yīng)用非常龐大的時(shí)候，將會(huì)是一件非常費(fèi)勁的事情。這里肯定有更好的解決方案！那就是AngularJS的雙向數(shù)據(jù)綁定，能夠同步DOM和Model等等。

2> 一個(gè)模板就是一個(gè)HTML文件。

但是HTML的內(nèi)容擴(kuò)展了，包含了很多幫助你映射model到view的內(nèi)容。HTML模板將會(huì)被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會(huì)遍歷DOM模板來(lái)生成一些指導(dǎo)，即，directive（指令）。所有的指令都負(fù)責(zé)針對(duì)view來(lái)設(shè)置數(shù)據(jù)綁定。我們要理解AuguarJS并不把模板當(dāng)做String來(lái)操作。輸入AngularJS的是DOM而非string。數(shù)據(jù)綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區(qū)別于其它的框架的最大原因。使用DOM允許你擴(kuò)展指令詞匯并且可以創(chuàng)建你自己的指令，甚至開發(fā)可重用的組件。最大的好處是為設(shè)計(jì)師和開發(fā)者創(chuàng)建了一個(gè)緊密的工作流。設(shè)計(jì)師可以像往常一樣開發(fā)標(biāo)簽，然后開發(fā)者拿過(guò)來(lái)添加上功能，通過(guò)數(shù)據(jù)綁定將會(huì)使得這個(gè)過(guò)程非常簡(jiǎn)單。

3> 服務(wù)和依賴注入

AngularJS擁有內(nèi)建的依賴注入（DI）子系統(tǒng)，可以幫助開發(fā)人員更容易的開發(fā)，理解和測(cè)試應(yīng)用。DI允許你請(qǐng)求你的依賴，而不是自己找尋它們。比如，我們需要一個(gè)東西，DI負(fù)責(zé)找創(chuàng)建并且提供給我們。為了而得到核心的AngularJS服務(wù)，只需要添加一個(gè)簡(jiǎn)單服務(wù)作為參數(shù)，AngularJS會(huì)偵測(cè)并且提供給你。

4>指令（Directives）

指令是我個(gè)人最喜歡的特性。你是不是也希望瀏覽器可以做點(diǎn)兒有意思的事情？那么AngularJS可以做到。指令可以用來(lái)創(chuàng)建自定義的標(biāo)簽。它們可以用來(lái)裝飾元素或者操作DOM屬性。可以作為標(biāo)簽、屬性、注釋和類名使用。然后，你可以使用這個(gè)自定義的directive來(lái)使用：使用一系列的組件來(lái)創(chuàng)建你自己的應(yīng)用將會(huì)讓你更方便的添加，刪除和更新功能。

5>模塊化設(shè)計(jì)

模塊是提供一些特殊服務(wù)的功能塊，比如本地化模塊負(fù)責(zé)文字本地化，驗(yàn)證模塊負(fù)責(zé)數(shù)據(jù)驗(yàn)證。一般來(lái)說(shuō)，服務(wù)在模塊內(nèi)部，當(dāng)我們需要某個(gè)服務(wù)的時(shí)候，是先把模塊實(shí)例化，然后再調(diào)用模塊的方法。但Angular模塊和我們通常理解的模塊不一樣，Angular模塊只保留服務(wù)的聲明，服務(wù)的實(shí)例化是由服務(wù)注入器完成的，實(shí)例化之后服務(wù)就留在了服務(wù)注入器中，和模塊沒(méi)有關(guān)系了，這就是為什么我們使用的服務(wù)全部來(lái)自注入器的原因。
每調(diào)用一次angular.boostrap()方法會(huì)創(chuàng)建一個(gè)新的Angular應(yīng)用和一個(gè)新的服務(wù)注入器，因此，每個(gè)應(yīng)用都對(duì)應(yīng)一個(gè)服務(wù)注入器，彼此互不沖突。
在angular中，模塊可以是對(duì)象、方法（如果是數(shù)組，數(shù)組的最后一個(gè)元素必須是方法，前面的元素都是方法按順序排列的參數(shù)名稱）。后面講的模塊屬性和方法，都屬于通過(guò)angular.module()定義的模塊對(duì)象。如果模塊是方法，是不需要經(jīng)過(guò)angular.module()定義的，只需寫入依賴數(shù)組（就是說(shuō)依賴數(shù)組的元素可以是方法），模塊在加載依賴關(guān)系的時(shí)候直接執(zhí)行了。
注意：通過(guò)angular.module()方法定義的模塊是唯一的，如果重復(fù)定義就會(huì)覆蓋前面的定義。
高內(nèi)聚低耦合法則 
1)官方提供的模塊：ng、ngRoute、ngAnimate、ngTouch
2)用戶自定義的模塊：angular.module("模塊名",[ ])