AngularJS學習筆記-1

官方推薦的模塊切分方式：

1.任何一個ng應用都是由控制器、指令、服務、路由、過濾器等有限的模塊類型構成的

2.指令、服務、路由、過濾器分別放在一個模塊裏邊

3.用一個總的app模塊做爲入口點，它依賴其它全部模塊

4.Provider/factory/service/constant/value

5.Provider是基礎，其他都是調用provider函數實現的，只是參數不一樣 從左向右，靈活性愈來愈差

 

Provider模式與ng實現：

1.Provider模式是策略模式和工廠模式的綜合體

2.核心目的是爲了讓接口和實現分離 在ng中，全部provider均可以用來進行注入: provider/factory/service/constant/value

3.如下類型的函數能夠接受注入： Controller/directive/filter/service/factory等

4.Ng中的「依賴注入」是經過provider和injector這兩個機制聯合實現的

5.Ng的三種注入方式：推斷式注入，標註式注入，內聯注入（ng中最簡單的依賴注入）

6.Injector源碼分析：建立、註冊、調用

7.發佈ng提供的API：publishExternalAPI(angular)

8.嘗試綁定jQuery:bindjQuary()

 

經常使用指令：

AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。

ng-app 指令初始化一個 AngularJS 應用程序。

ng-init 指令初始化應用程序數據。

ng-repeat 指令對於集合中（數組中）的每一個項會 克隆一次 HTML 元素。

ng-list:將文本轉換爲列表；

ng-model-options:規定如何更新模型；

ng-src：指定 <img> 元素的 src 屬性；

ng-transclude:規定填充的目標位置；

ng-annotate:添加和刪除AngularJS依賴注入註釋；

ng-cloak:在應用正要加載時防止其閃爍;

ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。它是用於表單元素的，支持雙向綁定。對普通元素無效；

ng-bind用於普通元素，不能用於表單元素，應用程序單向地渲染數據到元素；當ng-bind和{{}}同時使用時，ng-bind綁定的值覆蓋該元素的內容。

 

具體介紹一下ng-model指令：

 ng-model指令能夠爲應用數據提供狀態值（invalid、dirty、touched、error）:

ng-model 指令根據表單域的狀態添加/移除如下類：
ng-empty
ng-not-empty
ng-touched：布爾值屬性，表示用戶是否和控件進行過交互

ng-valid：布爾型屬性，它指示表單是否經過驗證。若是表單當前經過驗證，他將爲true
ng-invalid：未經過驗證的表單
ng-dirty：布爾值屬性，表示用戶是否修改了表單。若是爲 ture，表示有修改過；false 表示修沒有修改過
ng-pending：任何爲知足$asyncValidators的狀況；
ng-pristine：布爾值屬性，表示用戶是否修改了表單。若是爲true，表示沒有修改過；false表示修改過

 

建立自定義的指令
除了 AngularJS 內置的指令外，咱們還能夠建立自定義指令。
你可使用 .directive 函數來添加自定義的指令。
要調用自定義指令，HTML 元素上須要添加自定義指令名。
使用駝峯法來命名一個指令， runoobDirective, 但在使用它時須要以 - 分割, runoob-directive:

 

調用指令的方式:
元素名 <runoob-directive></runoob-directive>
屬性名 <div runoob-directive></div>
類名 <div class="runoob-directive"></div>
註釋 <!-- directive: runoob-directive -->

 

限制使用:
你能夠限制你的指令只能經過特定的方式來調用。
restrict 值能夠是如下幾種:
E 做爲元素名使用
A 做爲屬性使用
C 做爲類名使用
M 做爲註釋使用
restrict 默認值爲 EA, 便可以經過元素名和屬性名來調用指令。

 

項目實例：

 

1. 當同時調用first和second時,只有first生效,兩個template不會同時出現。
2. 當設置了 scope:{} 以後,{{name}}獲取不到了,緣由就是做用域的問題,想要設置這裏的name的值,能夠再加一個controller的字段。

 

 

參考連接：http://www.runoob.com/angularjs/angularjs-tutorial.html