angularjs總結

AngularJS是一款由Google公司開發維護的前端MVC框架，其剋服了HTML在構建應用上的諸多不足，從而降低了開發成本提升了開發效率。

特點

AngularJS與我們之前學習的jQuery是有一定的區別的，jQuery更準確來說只一個類庫（類庫指的是一系列函數的集合）以DOM做為驅動（核心），而AngularJS則一個框架（諸多類庫的集合）以數據和邏輯做為驅動（核心）。
框架對開發的流程和模式做了約束，開發者遵照約束進行開發，更註重的實際的業務邏輯。
AngularJS有著諸多特性，最為核心的是：模塊化、雙向數據綁定、語義化標簽、依賴註入等。
與之類似的框架還有BackBone、KnockoutJS、Vue、React等。

下載

1、通過AngularJS官網下載，不過由於國內特殊的國情，需要翻牆才能訪問。
2、通過npm下載，npm install angular

MVC

MVC是一種開發模式，由模型（Model）、視圖（View）、控制器（Controller）3部分構成，採用這種開發模式為合理組織代碼提供了方便、降低了代碼間的耦合度、功能結構清晰可見。

• 模型（Model）一般用來處理數據（讀取/設置），一般指操作資料庫。
• 視圖（View）一般用來展示數據，比如通過HTML展示。
• 控制器（Controller）一般用做連接模型和視圖的橋梁。
  
  MVC更多應用在後端開發程式里，後被引入到前端開發中，由於受到前端技術的限制便有了一些細節的調整，進而出現了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV*等。

模塊化

使用AngularJS構建應用（App）時是以模塊化（Module）的方式組織的，即將整個應用劃分成若幹模塊，每個模塊都有各自的職責，最終組合成一個整體。
採用模塊化的組織方式，可以最大程度的實現代碼的復用，可以像搭積木一樣進行開發。

定義應用

通過為任一HTML標簽添加ng-app屬性，可以指定一個應用，表示此標簽所包裹的內容都屬於應用（App）的一部分。

定義模塊

AngularJS提供了一個全局對象angular，在此全局對象下存在若幹的方法，其中angular.module()方法用來定義一個模塊。

註：應用（App）其本質也是一個模塊（一個比較大的模塊）。

定義控制器

• 控制器（Controller）作為連接模型（Model）和視圖（View）的橋梁存在，所以當我們定義好了控制器以後也就定義好了模型和視圖。

• 模型（Model）數據是要展示到視圖（View）上的，所以需要將控制器（Controller）關聯到視圖（View）上，通過為HTML標簽添加ng-controller屬性並賦值相應的控制器（Controller）的名稱，就確立了關聯關係。

以上步驟就是AngularJS最基本的MVC工作模式。
下圖是AngularJS的結構，學習AngularJS會圍繞下圖的結構展開。

　指令

HTML在構建應用（App）時存在諸多不足之處，AngularJS通過擴展一系列的HTML屬性或標簽來彌補這些缺陷，所謂指令就是AngularJS自定義的HTML屬性或標簽，這些指令都是以ng-做為首碼的，例如ng-app、ng-controller、ng-repeat等。

內置指令

ng-app 指定應用根元素，至少有一個元素指定了此屬性。
ng-controller 指定控制器
ng-show控制元素是否顯示，true顯示、false不顯示
ng-hide控制元素是否隱藏，true隱藏、false不隱藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增強圖片路徑
ng-href增強地址
ng-class控制類名
ng-include引入模板
ng-disabled表單禁用
ng-readonly表單隻讀
ng-checked單/覆選框表單選中
ng-selected下拉框表單選中

註：還有其它指令。

自定義指令

AngularJS允許根據實際業務需要自定義指令，通過angular全局對象下的directive方法實現。

        var App = angular.module('App', []);

        // 通過模塊實例對象的directive方法可以自定義指令
        App.directive('tag', function () {

            // 返回一個對象，這個對象就是自定義指令相關的內容
            return {
                // E element
                // A attribute
                // C class
                // M mark replace 必須為true
                restrict: 'ECMA',
                // template: '<ul><li>首頁</li><li>列表</li></ul>',
                templateUrl: './list.html',
                // replace: true
            }

        });

數據綁定

AngularJS是以數據做為驅動的MVC框架，所有模型（Model）里的數據經由控制器（Controller）展示到視圖（View）中。
所謂數據綁定指的就是將模型（Model）中的數據與相應的視圖（View）進行關聯，分為單向綁定和雙向綁定兩種方式。

單向綁定

單向數據綁定是指將模型（Model）數據，按著寫好的視圖（View）模板生成HTML標簽，然後追加到DOM中顯示，如之前所學的artTemplate 模板引擎的工作方式。
如下圖所示，只能模型（Model）數據向視圖（View）傳遞。

雙向綁定

雙向綁定則可以實現模型（Model）數據和視圖（View）模板的雙向傳遞，如下圖所示。

相關指令

• 在AngularJS中通過“{{}}”和ng-bind指令來實現模型（Model）數據向視圖模板（View）的綁定，模型數據通過一個內置服務$scope來提供，這個$scope是一個空對象，通過為這個對象添加屬性或者方法便可以在相應的視圖（View）模板里被訪問。
  註：“{{}}”是ng-bind的簡寫形式，其區別在於通過“{{}}”綁定數據時會有“閃爍”現象，添加ng-cloak也可以解決“閃爍”現象，通過ng-bind-template可以綁定多個數據。

• 通過為表單元素添加ng-model指令實現視圖（View）模板向模型（Model）數據的綁定。

• 通過ng-init可以初始化模型（Model）也就是$scope。

• AngularJS對事件也進行了擴展，無需顯式的獲取DOM元素便可以添加事件，易用性變的更強。通過在原有事件名稱基礎上添加ng-做為首碼，然後以屬性的形式添加到相應的HTML標簽上即可。如ng-click、ng-dblclick、ng-blur等。

• 通過ng-repeat可以將數組或對象數據迭代到視圖模板中，ng-switch、on、ng-switch-when可以對數據進行篩選。

作用域

通常AngularJS中應用（App）是由若幹個視圖（View）組合成而成的，而視圖（View）又都是HTML元素，並且HTML元素是可以互相嵌套的，另一方面視圖都隸屬於某個控制器（Controller），進而控制器之間也必然會產生嵌套關係。
每個控制器（Controller）又都對應一個模型（Model）也就是$scope對象，不同層級控制器（Controller）下的$scope便產生了作用域。

根作用域

一個AngularJS的應用（App）在啟動時會自動創建一個根作用域$rootScope，這個根作用域在整個應用範圍（ng-app所在標簽以內）都是可以被訪問到的。

子作用域

通過ng-controller指令可以創建一個子作用域，新建的作用域可以訪問其父作用域的數據。

過濾器

在AngularJS中使用過濾器格式化展示數據，在“{{}}”中使用“|”來調用過濾器，使用“:”傳遞參數。

內置過濾器

1、currency將數值格式化為貨幣格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用。
3、filter在給定數組中選擇滿足條件的一個子集，並返回一個新數組，其條件可以是一個字元串、對象、函數
4、json將Javascrip對象轉成JSON字元串。
5、limitTo取出字元串或數組的前（正數）幾位或後（負數）幾位
6、lowercase將文本轉換成小寫格式
7、uppercase將文本轉換成大寫格式
8、number數字格式化，可控制小位位數
9、orderBy對數組進行排序，第2個參數可控制方向

自定義過濾器

除了使用AngularJS內建過濾器外，還可以根業務需要自定義過濾器，通過模塊對象實例提供的filter方法自定義過濾器。

依賴註入

AngularJS採用模塊化的方式組織代碼，將一些通用邏輯封裝成一個對象或函數，實現最大程度的復用，這導致了使用者和被使用者之間存在依賴關係。
所謂依賴註入是指在運行時自動查找依賴關係，然後將查找到依賴傳遞給使用者的一種機制。
常見的AngularJS內置服務有$http、$location、$timeout、$rootScope等

推斷式註入

沒有明確聲明依賴，AngularJS會將函數參數名稱當成是依賴的名稱。

這種方式會帶來一個問題，當代碼經過壓縮後函數的參數被壓縮，這樣便會造成依賴無法找到。

行內註入

以數組形式明確聲明依賴，數組元素都是包含依賴名稱的字元串，數組最後一個元素是依賴註入的目標函數。

推薦使用這種方式聲明依賴

服務

服務是一個對象或函數，對外提供特定的功能。

內建服務

1、$location是對原生Javascript中location對象屬性和方法的封裝。

2、$timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝。

3、$filter在控制器中格式化數據。

4、$log列印調試信息

5、$http用於向服務端發起非同步請求。

同時還支持多種快捷方式如$http.get()、$http.post()、$http.jsonp。
註：各參數含義見代碼註釋。

自定義服務

通過上面例子得知，所謂服務是將一些通用性的功能邏輯進行封裝方便使用，AngularJS允許將自定義服務。
1、factory方法

2、service方法

3、value方法定義常量

在介紹服務時曾提到服務本質就是一個對象或函數，所以自定義服務就是要返回一個對象或函數以供使用。

模塊載入

AngularJS模塊可以在被載入和執行之前對其自身進行配置。我們可以在應用的載入階段配置不同的邏輯。

配置塊

1、通過config方法實現對模塊的配置，AngularJS中的服務大部分都對應一個“provider”，用來執行與對應服務相同的功能或對其進行配置。
比如$log、$http、$location都是內置服務，相對應的“provider”分別是$logProvider、$httpProvider、$locationPorvider。
下圖以$log為例進行演示，修改了配置

下圖以$filter為例進行演示，實現相同功能

運行塊

服務也是模塊形式存在的對且對外提供特定功能，前面學習中都是將服務做為依賴註入進去的，然後再進行調用，除了這種方式外我們也可以直接運行相應的服務模塊，AngularJS提供了run方法來實現。

不但如此，run方法還是最先執行的，利用這個特點我們可以將一些需要優先執行的功能通過run方法來運行，比如驗證用戶是否登錄，未登錄則不允許進行任何其它操作。

註：此知識點意在瞭解AngularJS的載入機制。

路由

一個應用是由若個視圖組合而成的，根據不同的業務邏輯展示給用戶不同的視圖，路由則是實現這一功能的關鍵。

SPA

SPA（Single Page Application）指的是通單一頁面展示所有功能，通過Ajax動態獲取數據然後進行實時渲染，結合CSS3動畫模仿原生App交互，然後再進行打包（使用工具把Web應用包一個殼，這個殼本質上是瀏覽器）變成一個“原生”應用。
在PC端也有廣泛的應用，通常情況下使用Ajax非同步請求數據，然後實現內容局部刷新，局部刷新的本質是動態生成DOM，新生成的DOM元素並沒有真實存在於文檔中，所以當再次刷新頁面時新添加的DOM元素會“丟失”，通過單頁面應可以很好的解決這個問題。

路由

在後端開發中通過URL地址可以實現頁面（視圖）的切換，但是AngularJS是一個純前端MVC框架，在開發單頁面應用時，所有功能都在同一頁面完成，所以無需切換URL地址（即不允許產生跳轉），但Web應用中又經常通過鏈接（a標簽）來更新頁面（視圖），當點擊鏈接時還要阻止其向伺服器發起請求，通過錨點（頁內跳轉）可以實現這一點。
實現單頁面應用需要具備：
a、只有一頁面
b、鏈接使用錨點
見代碼實例10-01.html
通過上面的例子發現在單一頁面中可以能過hashchange事件監聽到錨點的變化，進而可以實現為不同的錨點準不同的視圖，單頁面應用就是基於這一原理實現的。
AngularJS對這一實現原理進行了封裝，將錨點的變化封裝成路由（Route）,這是與後端路由的根本區別。
在1.2版前路由功能是包含在AngularJS核心代碼當中，之後的版本將路由功能獨立成一個模塊，下載angular-route.js

使用

1、引入angular-route.js

2、實例化模塊（App）時，當成依賴傳進去（模塊名稱叫ngRoute）。

3、配置路由模塊

4、佈局模板
通過ng-view指令佈局模板，路由匹配的視圖會被載入渲染到些區域。

路由參數

• 1、提供兩個方法匹配路由，分別是when和otherwise，when方法需要兩個參數，otherwise方法做為when方法的補充只需要一個參數，其中when方法可以被多次調用。
• 2、第1個參數是一個字元串，代表當前URL中的hash值。
• 3、第2個參數是一個對象，配置當前路由的參數，如視圖、控制器等。
• a、template 字元串形式的視圖模板
• b、templateUrl 引入外部視圖模板
• c、controller 視圖模板所屬的控制器
• d、redirectTo跳轉到其它路由
  4、獲取參數，在控制中註入$routeParams可以獲取傳遞的參數

其它

jQuery

在沒有引入jQuery的前提下AngularJS實現了簡版的jQuery Lite，通過angular.element不能選擇元素，但可以將一個DOM元素轉成jQuery對象，如果引提前引入了jQuery則angular.element則完全等於jQuery。

bower

基於NodeJS的一個靜態資源管理工具，由twitter公司開發維，解決大型網站中靜態資源的依賴問題。
1、依賴NodeJS環境和git工具。
2、npm install -g bower安裝bower
3、bower search 查找資源信息
4、bower install 安裝（下載）資源，通過#號可以指定版本號
5、bower info 查看資源信息
6、bower uninstall 卸載（刪除）資源
7、bower init初始化，用來記錄資源信息及依賴。