AngularJS學習筆記

1、初識AngularJS：
一、Angularjs經過建立實時模板來代替視圖，而不是將數據合併進模板後更新DOM，任何一個獨立視圖組件中的值都是動態替換的。

2、數據綁定和第一個AngularJS Web應用：
一、用法簡單，只需引入Angular.js文件，並在某個DOM元素上明確設置ng-app屬性便可，ng-app屬性聲明所包含的內容都屬於這個Angularjs應用，這樣咱們就能夠在web應用中嵌套Angularjs應用的緣由，只有被具備ng-app屬性的DOM元素包含的元素纔會受到Angularjs影響。

3、模塊：
一、AngularJS容許咱們使用angular.module()方法來聲明模塊，這個方法可以接受兩個參數，第一個是模塊的名稱，第二個是依賴列表，也就是能夠被注入到模塊中的對象列表。
angular.module('myApp', []);
二、帶有屬性ng-app的標籤至關於一個模塊，ng-app屬性能夠帶屬性值也能夠不帶，一個模塊只容許加載一次，ng-app用來自動加載模塊，bootstrap用來手動加載模塊。
angular.module('appName', [])
angular.bootstrap(angular.element("#divID"), ["divID"])

4、做用域：
一、$scope 的使用貫穿整個 Angular App 應用,它與數據模型相關聯,同時也是表達式執行的上下文。
二、$scope對象的生命週期處理有四個不一樣階段。
建立：在建立控制器或指令時，AngularJS會用$injector建立一個新的做用域，並在這個新建的控制器或指令運行時將做用域傳遞進去
連接：當Angular開始運行時，全部的$scope對象都會附加或者連接到視圖中。全部建立$scope對象的函數也會將自身附加到視圖中，這些做用域將會註冊當Angular應用上下文發生變化時須要運行的函數。
更新：當時間循環運行時，它一般執行在頂層$scope對象上(被稱做$rootscope)，每一個子做用域都執行本身的髒值檢測。每一個監控函數都會檢查變化，若是檢測到任意變化，$scope對象就會觸發指定的回調函數。
銷燬：當一個$scope在視圖中再也不須要時，這個做用域將會清理和銷燬本身。

5、控制器：
一、AngularJS中的控制器是一個函數，用來向視圖的做用域中添加額外的功能。因爲AngularJS會負責處理控制器的實例化過程，咱們只需編寫構造函數便可。 AngularJS同其餘JavaScript框架最主要的一個區別就是，控制器並不適合用來執行DOM操做、格式化或數據操做，以及除存儲數據模型以外的狀態維護操做。它只是視圖和$scope之間的橋樑。

二、控制器能夠嵌套，至關於繼承，子控制器能夠獲取父控制器的屬性

6、表達式：
(1)特性：一、全部表達式都在scope這個context裏被執行，所以可使用全部本地 $scope 中的變量。
二、若是一個表達式的執行致使類型錯誤或引用錯誤，這些錯誤將不會被拋出。
三、表達式裏不容許任何控制函數流程的功能（如if/else等條件語句）
四、表達式可接受一個或多個串聯起來的過濾器。

(2)$parse是一個表達式解析器，返回一個函數 app.controller('myController',function($scope,$parse){});
$interpolate是一個帶三個參數返回一個函數的服務 app.controller('myController',function($scope,$interpolate){});

7、過濾器：
一、過濾：currency，date，filter(字符串,對象,函數)，json，limitTo，lowercase，number，orderBy，uppercase,自定義過濾器
二、表單驗證：HTML5自帶的表單驗證使用很方便，只需給標籤添加屬性便可。
必填項：required
最小值：ng-minlength="5"
最大值：ng-maxlength="20"
正則：ng-pattern="[a-zA-Z]"
電子郵箱：<input type="email" name="email" ng-model="user.email" />
數字：<input type="number" name="age" ng-model="user.age" />
URL：<input type="url" name="homepage" ng-model="user.url" />

表單屬性：
user.name.$dirty(輸入框使用了規則爲True) 髒值檢測
user.name.$pristine(輸入框沒有使用規則爲True)
user.name.$invalid(是否驗證未經過)
user.submitted(是否提交)
<small class="error" ng-show="user.name.$error.minlength">錯誤信息</small>(進行錯誤判斷)

1.3版本之後新增了ng-messages屬性， 相對於$error屬性用起來會簡潔一些 ng-message="required"/ng-message="minlength"

8、指令簡介：
一、自定義指令
語法： <my-directive></my-directive>
directive('myDirective',function(){})。
種類：元素（E）、屬性（A）、類（C）或註釋（M）
在咱們的例子中使用my-directive聲明指令<my-directive></my-directive>，根據駝峯命名法，指令定義必須以myDirective爲名字。(hello)

二、當前做用域：每一個控制器都有本身的做用域，同時控制器能夠嵌套，最內層的控制器能夠經過當前$scope直接訪問原型中的任意屬性

9、內置指令：

10、指令詳解：
directive：對於指令，能夠把它簡單的理解成在特定DOM元素上運行的函數，指令能夠擴展這個元素的功能。指令中咱們能夠返回函數也能夠返回對象。當返回一個函數時，這個函數一般被稱做連接傳遞（postLink）函數，利用它咱們能夠定義指令的連接（link）功能。因爲返回函數而不是對象會限制定義指令時的自由度，所以只在構造簡單的指令時才比較有用。
priority：ngRepeat是全部內置指令中優先級最高的，設置爲1000
template：若是模板字符串中含有多個DOM元素，或者只由一個單獨的文本節點構成，那它必須被包含在一個父元素內templateUrl：默認狀況下，調用指令時會在後臺經過Ajax來請求HTML模板文件。有兩件事情須要知道。1、在本地開發時，須要在後臺運行一個本地服務器，用以從文件系統加載HTML模板，不然會致使Cross Origin Request Script（CORS）錯誤。2、模板加載是異步的，意味着編譯和連接要暫停，等待模板加載完成。scope：若是一個元素上有多個指令使用了隔離做用域，其中只有一個能夠生效。只有指令模板中的根元素能夠得到一個新的做用域。所以，對於這些對象來講scope默認被設置爲true。做用域的繼承機制是向下而非向上進行的。
scope：如下方式會建立新的子做用域，而且進行原型繼承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true建立directive。
transclude：只有當你但願建立一個能夠包含任意內容的指令時，才使用transclude: true。
link：指令中的controller和link函數能夠進行互換。控制器主要是用來提供可在指令間複用的行爲，但連接函數只能在當前內部指令中定義行爲，且沒法在指令間複用。還有個區別：Controller(在編譯前執行)而Link(在編譯後執行) 子級指令的全部 link function ：包括 pre 和 post 兩個link都會在父級的post link以前被執行，咱們一般所說的link function，實際上是 post link 的快捷方式罷了。
當想要同當前屏幕上的做用域交互時，可使用被傳入到link函數中的scope參數。
directive的scope與其外層的controller的scope是同一個做用域
controllerAs：使咱們能夠在路由和指令中建立匿名控制器的強大能力。這種能力能夠將動態的對象建立成爲控制器，而且這個對象是隔離的、易於測試的。
require：能夠被設置爲字符串或數組，字符串表明另一個指令的名字。require會將控制器注入到其值所指定的指令中，並做爲當前指令的連接函數的第四個參數。require參數的值能夠用下面的前綴進行修飾，這會改變查找控制器時的行爲：
?：若是在當前指令中沒有找到所須要的控制器，會將null做爲傳給link函數的第四個參數。
^：若是添加了^前綴，指令會在上游的指令鏈中查找require參數所指定的控制器。
?^：將前面兩個選項的行爲組合起來，咱們可選擇地加載須要的指令並在父指令鏈中進行查找。
沒有前綴：若是沒有前綴，指令將會在自身所提供的控制器中進行查找，若是沒有找到任何控制器（或具備指定名字的指令）就拋出一個錯誤。
conpile：編譯函數負責對模板DOM進行轉換。連接函數負責將做用域和DOM進行連接。在做用域同DOM連接以前能夠手動操做DOM
11、AngularJS模塊加載：

12、多重視圖和路由：
ng-view是由ngRoute模塊提供的一個特殊指令，它的獨特做用是在HTML中給$route對應的視圖內容佔位。它會建立本身的做用域並將模板嵌套在內部。ng-view是一個優先級爲1000的終極指令。AngularJS不會運行同一個元素上的低優先級指令。ng-view不支持多層視圖嵌套，能夠考慮增強版的ui-view
路由：若是reloadOnSearch選項被設置爲true（默認），當$location.search()發生變化時會從新加載路由。若是設置爲false，那麼當URL中的查詢串部分發生變化時就不會從新加載路由。這個小竅門對路由嵌套和原地分頁等需求很是有用。
$location 服務：path()/replace()/absUrl()/hash()/host()/port()/protocol()/search()/url()
$location服務不會從新加載整個頁面，它只會單純地改變URL。若是咱們想從新加載整個頁面，須要用$window服務來設置地址。$window.location.href = "/reload/page";
路由模式：標籤模式和HTML5模式(顯示原始路徑，若是路徑是#/List/Add這種標籤模式，它會自動重寫URL)
路由事件：$routeChangeStart/$routeChangeSuccess/$routeChangeError/$routeUpdate

十3、依賴注入：

十4、服務：
控制器只會在須要時被實例化，而且再也不須要就會被銷燬。這意味着每次切換路由或從新加載視圖時，當前的控制器會被AngularJS清除掉。
服務提供了一種能在應用的整個生命週期內保持數據的方法，它可以在控制器之間進行通訊，而且能保證數據的一致性。服務是一個單例對象，在每一個應用中只會被實例化一次（被$injector實例化），而且是延遲加載的（須要時纔會被建立）。服務提供了把與特定功能相關聯的方法集中在一塊兒的接口。
不推薦在控制器中使用$watch，這裏只是爲了方便演示。在實際生產中會將這個功能封裝進一個指令，並在指令中設置$watch。
在自定義服務以前注入全部的AngularJS內置服務，這是約定俗成的規則。
全部建立服務的方法都構建在provider方法之上。provider()方法負責在$providerCache中註冊服務。
若是但願在config()函數中能夠對服務進行配置，必須用provider()來定義服務。
value()方法和constant()方法之間最主要的區別是，常量能夠注入到配置函數中，而值不行。一般狀況下，能夠經過value()來註冊服務對象或函數，用constant()來配置數據，constant定義的常量不能被裝飾器攔截。
十5、同外界通訊：HRX和服務器通訊：

十6、XHR實踐：

十7、Promise

十8、服務器通訊：

十9、測試：

二10、事件：

二11、架構：

二12、Angular動畫：

二十3、digest循環和$apply：

二十4、揭祕Angular：

二十5、AngularJS精華擴展：

二十6、移動應用：

二十7、本地化：

二十8、緩存：

二十9、安全性：

三10、AngularJS和IE瀏覽器

三11、構建Angular Chrome應用

三12、優化Angular應用

三十3、調試AngularJS

三十4、下一步