angularJS初體驗

1、簡介及使用

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，雙向數據綁定，模塊化，語義化標籤，依賴注入

 

2、指令：Directive

1.指令（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/false

ngHide(ng-hide):設置標籤是否隱藏 true/false

4.自定義指令：建立模塊（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-->

 

 

 

3、服務:Service

1.服務(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，全部的控制器都是可使用！全局對象！

 

4、數據雙向綁定

1.三種方式：a.{{變量/函數/表達式}}，使用最多，當網速很差時，會出現源代碼

b.ng-bind：

c.ng-model：

age若是已經存在，就用存在的值，若是不存在就向$scope添加數據

 

 

5、過濾器：Filter

1.過濾器（filter）：對數據進行過濾

2.常見系統自帶過濾器：currency：處理貨幣

eg：{{pro.price | currency:"￥"}} =》 使用人民幣顯示貨幣

 

 

 

 

3.自定義過濾器：

3.1.自定義過濾器必須是單獨的模塊

3.2.使用模塊的filter()方法：filter('過濾器名'，回調函數)

eg:模塊名.filter('過濾器名',function(){

return function(){};//返回一個函數用來過濾參數

});

4.使用自定義過濾器：須要在使用的模塊注入（見下面），而後和內置的過濾器同樣使用

5.全局函數：isArray()：是不是數組

isUndefined()：是否未定義

 

 

6、依賴注入

1.在angular中，每一個模塊都有本身的功能，當其餘模塊須要使用這個功能時，只要把對應的模塊加入到模塊依賴的數組中便可

2.具體用法：

 

 

7、路由機制（ngRoute）

1.下載： http://www.bootcdn.cn/angular.js/ =》 angular-route.min.js =》 右鍵，另存爲

2.使用時必須先加載：系統自帶的模塊

3.使用以下：