angularJS初體驗

標籤：att   roo   false   繼承   str   comm   filter   logs   系統   

一、簡介及使用1.Angular JS是前端JS架構2.Angular JS誕生於2009年，由Misko Hevery和另外一人建立，後由google收購3.下載：搜angular.min.js，開啟http://www.bootcdn.cn/angular.js/，版本：1.5.8，點擊，開啟新頁面，找到https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js，複製連結，通過瀏覽器即可預覽angular JS，可以下載到本地使用，也可直接使用複製的連結地址（注意：根據使用的協議去使用對應的協議版本）4.使用：引入angular JS即可5.jquery基於DOM；angular基於資料6.特點：MVVM，雙向資料繫結，模組化，語義化標籤，依賴注入 二、指令：Directive1.指令（directive）：系統內建指令、自訂指令；定義指令使用駝峰法命名，使用時使用“-”串連多個單詞2.系統內建指令：搜angularjs，開啟https://docs.angularjs.org/，找到directive，即為系統指令3.系統指令：ngApp(ng-app)：定義一個應用程式所有者是誰，如果寫在html中，表示html是應用程式的所有者；如果寫在body裡表示body是應用程式的所有者；寫在div中，則表示div是應用程式的所有者。把ng-app指定個某個標籤後，那麼表示此標籤內部就可以使用angular的其他指令了，在這個標籤外使用angular的其他指令會失效/報錯。註：一個項目中只能使用一次ngModel(ng-model)：給標籤綁定/關聯一個變數，僅用於input標籤，相當於拿一個變數即時儲存input的value，一旦input有更改，該標籤對應的變數值也對應的即時修改。ng-model的值直接儲存在$scope中ngController(ng-controller)：定義控制器ngRepeat(ng-repeat):迴圈數組或對象 eg:ng-repeat="變數名 in 數組"ngBind(ng-bind)：綁定資料，具體用法見下面ngClick(ng-click)：觸發點擊事件ngClass(ng-class)：追加樣式，注意，樣式一定要加引號，否則會作為一個變數來處理！！！ngShow(ng-show):設定標籤是否顯示 true/falsengHide(ng-hide):設定標籤是否隱藏 true/false4.自訂指令：建立模組（module()） =》 綁定指令（directive()） 全域對象：html有個全域對象window，angularJS也有個全域對象：angular 全域函數：手冊中的function，都是全域函數即全域對象angular下定義的函數。 moudule()：1.建立一個新的模組：兩個參數：模組名稱（字串，與ng-app裡的名稱對應），數組（字串，用,隔開）：每一個字串代表一個已有模組。第二個參數就是第一個模組需要依賴的其他的模組。 2.擷取一個已有的模組：一個參數：模組名稱 模組方法：directive("指令名"，function(){})：給自訂模組綁定指令 指令名：遵循駝峰法命名 回呼函數：返回一個對象，對象要包含如下屬性：template：模板；restrict：調用的方式（E：element A：attribute C：class M：comment）；replace：boolean，true：將注釋替換成指令；transclude：boolean，true（替換標籤），並且需要在模板中寫上<ng-transclude></ng-transclude>用來替換新的內容；templateUrl：模板路徑，模板只能有一個根標籤，注意與template只能二選一，並且使用templateUrl時必須放置在伺服器環境下使用：標籤形式：eg <hello-world></hello-world> 屬性形式：eg <div hello-world></div> class形式：eg <div class="hello-world"></div> 注釋形式：eg <!--directive:hello-world-->  

 

三、服務:Service1.服務(service)：系統內建，可以用來處理網路請求（$http），eg：ajax模組方法：controller(‘控制器名‘，function(service對象){})：定義控制器；可以有多個。控制器名為：ng-controller中的值$http對象：$http({method:請求方式url:請求的路徑}).then(function(data){//成功函數，返回資料},function(error){//失敗函數，返回錯誤});$scope對象：地區對象，每一個controller都內建一個scope對象，用來儲存變數和函數在控制器內寫代碼時，注意代碼的先後順序（先有屬性，才能使用）！！！！每一個控制器都有一個$scope，每一個$scope都有自己的範圍！！！！子控制器可以繼承父控制器的$scope$rootScope對象：$scope中的根scope，所有的控制器都是可以使用！全域對象！ 四、資料雙向繫結1.三種方式：a.{{變數/函數/運算式}}，使用最多，當網速不好時，會出現原始碼b.ng-bind：c.ng-model：

age如果已經存在，就用存在的值，如果不存在就向$scope添加資料

  五、過濾器：Filter1.過濾器（filter）：對資料進行過濾2.常見系統內建過濾器：currency：處理貨幣 eg：{{pro.price | currency:"￥"}} =》 使用人民幣顯示貨幣 

 

 

 

3.自訂過濾器：3.1.自訂過濾器必須是單獨的模組 3.2.使用模組的filter()方法：filter(‘過濾器名‘，回呼函數)eg:模組名.filter(‘過濾器名‘,function(){return function(){};//返回一個函數用來過濾參數});4.使用自訂過濾器：需要在使用的模組注入（見下面），然後和內建的過濾器一樣使用5.全域函數：isArray()：是否是數組isUndefined()：是否未定義

 

 六、依賴注入1.在angular中，每個模組都有自己的功能，當其他模組需要使用這個功能時，只要把對應的模組加入到模組依賴的數組中即可2.具體用法：

 

 七、路由機制（ngRoute）1.下載：http://www.bootcdn.cn/angular.js/ =》 angular-route.min.js =》 右鍵，另存新檔2.使用時必須先載入：系統內建的模組3.使用如下：

 

    

angularJS初體驗