AngularJs 入門（一）--前言

AngularJs 入門（一）

前言

---

AngularJs目前來講相對於如今流行的高版本ng二、ng4,以及Vue2.0、React來講實屬是老套的前端框架了，固然這都不重要，沒有完美的框架，只有不斷優化的代碼。其實只是符合公司水平要求才這麼整的啊。。話很少說，開搞吧。

1、什麼是AngularJs

一、AngularJS是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。

一般，咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足：
1> 類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等。
2> 框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout、sproutcore等。

AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們稱爲指令(directives)的結構，讓瀏覽器可以識別新的語法。例如：

• 使用雙大括號{{}}語法進行數據綁定；
• 使用DOM控制結構來實現迭代或者隱藏DOM片斷；
• 支持表單和表單的驗證；
• 能將邏輯代碼關聯到相關的DOM元素上；
• 能將HTML分組成可重用的組件。

還有不少事情，這裏大概提一下。到了模塊介紹和具體項目中會詳細講解。

2、特性

1>雙向的數據綁定。

它可以幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定是的代碼更少，你能夠專一於你的應用。咱們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。數據綁定指令提供了你的Model投射到view的方法。這些投射能夠無縫的，絕不影響的應用到web應用中。傳統來講，當model變化了。
開發人員須要手動處理DOM元素而且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另外一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加複雜，由於開發人員須要處理和解析這些互動，而後融合到一個model中，而且更新View。這是一個手動的複雜過程，當一個應用很是龐大的時候，將會是一件很是費勁的事情。這裏確定有更好的解決方案！那就是AngularJS的雙向數據綁定，可以同步DOM和Model等等。

2> 一個模板就是一個HTML文件。

可是HTML的內容擴展了，包含了不少幫助你映射model到view的內容。HTML模板將會被瀏覽器解析到DOM中。DOM而後成爲AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。全部的指令都負責針對view來設置數據綁定。咱們要理解AuguarJS並不把模板當作String來操做。輸入AngularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的鏈接或者innerHTML變化。使用DOM做爲輸入，而不是字符串，是AngularJS區別於其它的框架的最大緣由。使用DOM容許你擴展指令詞彙而且能夠建立你本身的指令，甚至開發可重用的組件。最大的好處是爲設計師和開發者建立了一個緊密的工做流。設計師能夠像往常同樣開發標籤，而後開發者拿過來添加上功能，經過數據綁定將會使得這個過程很是簡單。

3> 服務和依賴注入

AngularJS擁有內建的依賴注入（DI）子系統，能夠幫助開發人員更容易的開發，理解和測試應用。DI容許你請求你的依賴，而不是本身找尋它們。好比，咱們須要一個東西，DI負責找建立而且提供給咱們。爲了而獲得核心的AngularJS服務，只須要添加一個簡單服務做爲參數，AngularJS會偵測而且提供給你。

4>指令（Directives）

指令是我我的最喜歡的特性。你是否是也但願瀏覽器能夠作點兒有意思的事情？那麼AngularJS能夠作到。指令能夠用來建立自定義的標籤。它們能夠用來裝飾元素或者操做DOM屬性。能夠做爲標籤、屬性、註釋和類名使用。而後，你可使用這個自定義的directive來使用：使用一系列的組件來建立你本身的應用將會讓你更方便的添加，刪除和更新功能。

5>模塊化設計

模塊是提供一些特殊服務的功能塊，好比本地化模塊負責文字本地化，驗證模塊負責數據驗證。通常來講，服務在模塊內部，當咱們須要某個服務的時候，是先把模塊實例化，而後再調用模塊的方法。但Angular模塊和咱們一般理解的模塊不同，Angular模塊只保留服務的聲明，服務的實例化是由服務注入器完成的，實例化以後服務就留在了服務注入器中，和模塊沒有關係了，這就是爲何咱們使用的服務所有來自注入器的緣由。

每調用一次angular.boostrap()方法會建立一個新的Angular應用和一個新的服務注入器，所以，每一個應用都對應一個服務注入器，彼此互不衝突。

在angular中，模塊能夠是對象、方法（若是是數組，數組的最後一個元素必須是方法，前面的元素都是方法按順序排列的參數名稱）。後面講的模塊屬性和方法，都屬於經過angular.module()定義的模塊對象。若是模塊是方法，是不須要通過angular.module()定義的，只需寫入依賴數組（就是說依賴數組的元素能夠是方法），模塊在加載依賴關係的時候直接執行了。

注意：經過angular.module()方法定義的模塊是惟一的，若是重複定義就會覆蓋前面的定義。

高內聚低耦合法則 1)官方提供的模塊：ng、ngRoute、ngAnimate、ngTouch2)用戶自定義的模塊：angular.module('模塊名',[ ])