前 言html
AngularJS 是一個 JavaScript 框架。它可經過 <script> 標籤添加到 HTML 頁面。ajax
AngularJS 經過 指令 擴展了 HTML,且經過 表達式 綁定數據到 HTML。數據庫
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。數組
AngularJS 是以一個 JavaScript 文件形式發佈的,可經過 script 標籤添加到網頁中。安全
AngularJS中的指令和表達式 |
AngularJS 經過 指令 擴展了 HTML,且經過 表達式 綁定數據到 HTML。服務器
【AngularJS表達式】app
一、AngularJS使用{{}}綁定表達式。用於將表達式的內容輸出到頁面中。
二、表達式中能夠是文字、運算符、變量等,也能夠在表達式中進行運算輸出結果。框架
eg: <p>{{5+5+"Angular"}}</p>
若是Angular.js文件放在頁面下方,在頁面刷新的瞬間會看到{{}}表達式的原樣,因此可使用ng-bind指令代替表達式。ide
eg: 上式可改寫爲: <p ng-bind="5+5+'Angular'"></p>
【AngularJS指令】函數
AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。
一、ng-app:聲明AngularJS所管轄的區域。通常寫在body或者html標籤上,原則上一個頁面只能有一個。
eg: <body ng-app=""></body>
二、ng-model 指令把元素值(好比輸入域的值)綁定到應用程序的變量中。
eg: <input type="text" ng-model="name"/>
三、ng-bind:把應運程序變量中的值,輸出到頁面HTML視圖中,能夠與表達式{{}}互相替換。
eg:<div ng-bind="name"></div>
四、ng-init: 指令初始化AngularJS應用程序中的變量值。
eg: <body ng-app="" ng-init="name='ddd'">
應用程序初始化時,name變量就附有初值。
AngularJS中的MVC與做用域 |
【MVC三層框架】
一、Model(模型層):應用程序中用於處理數據的部分,(包括將數據保存或者修改到數據庫、變量、文件中)
在AngularJS中,Model特指的是:應用程序中的各類數據。
View(視圖層):用戶能夠看到的,用於顯示數據的頁面。
Controller(控制器):控制器是鏈接View和Model的橋樑,負責從View讀取數據,接收用戶的操做輸入;並將數據發送給Model層。Model層對數據處理完畢後,將結果返回給Controller,Controller再將結果返回給View層顯示。
它們三者之間的關係能夠用下列圖片表示:
<body ng-app="myApp"> <input type="text" ng-model="age" placeholder="age" /> <div ng-controller="myCtrl"> <input type="text" ng-model="name" placeholder="name" /> <div ng-bind="name+'----myCtrl的name'"></div> <div ng-bind="age+'----myCtrl的age'"></div> </div> <div ng-controller="myCtrl1"> <div ng-bind="name+'----myCtrl1的name'"></div> <div ng-bind="age+'----myCtrl1的age'"></div> </div> <div ng-bind="name+'----全局的name'"></div> <div ng-bind="age+'----全局的age'"></div> </body>
建立一個angular的模塊。即ng-app="所須要綁定的部分"。
須要接受兩個參數:
1)模塊名稱,即ng-app雙引號中須要綁定的名字。<body ng-app="myApp">
2)數組。表示須要注入模塊名稱,不須要注入其餘模塊可用空數組代替。
>>>angular將經常使用的功能分裝到angular.js,建立主模塊時直接可使用,無需注入。
>>>而一些應用較少的功能,須要導入對用的JS文件,而且在[]中注入進這個模塊,纔可以使用。
var app=angular.module("myApp",[]);
在AngularJS的模塊上,建立一個控制器,須要傳遞兩個參數;
1)控制器名稱,即ng-controller須要綁定的名稱。
<div ng-controller="myCtrl">
2)控制器的構造函數,構造函數能夠傳入多個參數。
>>>若是要在函數中使用系統的內置對象,則必須經過函數的參數使用,不然不能使用。
>>>AngularJS中的內置對象,都用$開頭,例如$scope,$rootScope
【AngularJS的做用域】
1)$scope:局部做用域,聲明在$scope上的屬性和方法。只能在當前controller使用;
2)$rootScope:根做用域。聲明在$rootScope上的屬性和方法,能夠在整個ng-app所包含的範圍使用。
>>>若是沒有使用$scope聲明變量,而是直接使用ng-model在HTML標籤中綁定的數據的做用域爲:
一、若是ng-model寫在某個Controller中,則這個變量會默認綁定到當前Controller的$scope上;
二、若是ng-model沒有寫在任何一個Controller中,則這個變量會默認綁定到當前Controller的$rootScope上:
>>>AngularJS中的父子做用域:
一、AngularJS中,子做用域只能訪問父做用域中的變量,而不能修改父做用域的變量;
二、爲了解決上述問題,能夠將父做用域中的變量聲明爲引用數據類型,例如對象等。這樣能夠在子做用域中,直接修改對象的屬性,而不須要修改對象自己保存的地址。
eg:詳見"myCtrl1"
AngularJS中的過濾器 |
[AngularJS中過濾器]
過濾器可使用一個管道字符(|)添加到表達式和指令中。
>>>系統內置的過濾器
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
/* 自定義過濾器*/ .filter("showHello",function(){ return function(text){ return "hello AngularJS"; } })
自定義過濾器,同時須要傳遞過濾參數
調用過濾器示例: <p>{{12345678912|hideTel:5}}</p> /*傳入的參數5,將被過濾函數的num形參所接受。*/
自定義過濾器,實現根據姓名篩選數據的功能.
>>>調用示例:
請輸入姓名:<input type="text" ng-model="name" /> <tr ng-repeat="item in classes | filter:filterByname">
AngularJS中的服務service |
一、內置服務:
>>>要使用服務,必需要把服務經過controller的構造函數的參數注入進來!!!
>>>系統內置的服務,統一使用$開頭,服務中的屬性和方法統一使用$$開頭!!!自定義服務時,需注意與系統服務的寫法區分開;
$location:返回當前界面的URL地址信息,第一個對象;
$http:向服務器發送請求,相似於jQuery中的ajax;
$timeout:至關於setTimeout();
$interval:至關於setInterval();
angular.module("app",[]) .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){ $scope.local = $location.$$host; $timeout(function(){ $scope.time = "我在兩秒以後出現!!!"; },2000); $scope.num = 0; $interval(function(){ $scope.num ++; },1000); $scope.gongneng = hexafy.gongneng; $scope.num1 = hexafy.func(10); })
自定義服務
第一個參數是服務名
第二個參數是自定義服務的構造函數。咱們自定義的服務,本質是一個對象。
對象的屬性,能夠在構造函數中,使用this.屬性表示;
對象的方法,能夠在構造函數中,使用this.方法表示;
.service("hexafy",function(){ this.gongneng = "將十進制數轉化爲十六進制"; this.func = function(num){ return num.toString(16); } })
使用過濾器實現一樣功能
.filter("filter1",function(){ return function(num){ return num.toString(16); } })
在過濾器中調用服務
也必須在聲明過濾器的外層構造函數中,注入服務名稱!!!
.filter("filter2",function(hexafy,$location){ return function(num){ return hexafy.func(num); } })
AngularJS中的服務Factory |
factory服務在使用上與service服務沒有太大差距。
惟一的不一樣點是,聲明服務時,factory服務是在函數中先聲明好一個對象,而後使用return將對象返回。
而service服務,則是直接在函數中使用this將屬性和方法添加到對象上。
angular.module("app",[]) .controller("ctrl",function($scope,hexafy){ $scope.gongneng = hexafy.gongneng; $scope.num1 = hexafy.func(10); }) .factory("hexafy",function(){ var obj={ gongneng : "將十進制數轉化爲十六進制"; func = function(num){ return num.toString(16); } } return obj; }) .service("hexafy",function(){ this.shuxing="shuxing"; this.func=function(){} })
AngularJS中的服務provider |
一、在AngularJS中,service服務、factory服務都是基於provider服務實現的;
二、在定義provider時,可使用this.$get方法,接收一個函數,函數裏面採用與factory
徹底相同的寫法!!!
.provider("hexafy",function(){ this.$get=function(){ var obj={ gongneng:"333"; } return obj; } })
三、在三種服務中,provider服務是惟一一個能夠寫進config配置階段的服務。
因此說,若是服務須要在配置階段,也就是在聲明controller以前執行的話,則可使用provider.
不然通常使用service或者factory。
angular.module("app",[])
.config()表示配置階段,在聲明controller以前執行。能夠用於聲明一些在controller中須要
使用的全局變量、方法、服務等
.config(function($provider){ //在配置階段聲明provider服務,須要在config中注入系統對象$provider $provide.provider("hexafy",function(){ this.$get=function(){ var obj={ gongneng:"444"; } return obj; }); }) .controller("ctrl",function($scope,hexafy){ $scope.gongneng=hexafy.gongneng; })
AngularJS中的select和表格 |
使用數組做爲數據源
一、item表示數組中的每一項!
二、循環出的option中,value的值,默認爲item
三、option顯示出的內容(<option></option>標籤中的文字)是由item.site for決定的!
<select ng-model="site" ng-options="item.site for item in sites"></select>
這種寫法,默認生成的option效果以下:
<option value='{site : "Google", url : "http://www.google.com"}'>Google</option>
以對象做爲數據源
一、 (key,value) 第一項表示對象的鍵,第二項表示對象的值;
二、 option的value,永遠都是對象的值!
三、 option顯示出的內容(<option></option>標籤中的文字)是由...for 決定的!也就是說 for前面是什麼,option標籤中就是什麼。
<select ng-model="site3" ng-options="key for (key,value) in sitess"> <!-- <option value=" value "> key/value(取決於for前面的內容) </option> -->
【ng-options 和 ng-repeat】
g-options使用時,是將指令添加在select上;
ng-repeat使用時,試講指令添加在option上;
二、 ng-options使用時,必須同步給select標籤綁定ng-model;
ng-repeat使用時,不必定須要綁定ng-model
三、 ng-options使用時,咱們只須要關心for前面的部分,即option標籤中顯示的文字;而option的value會自動分配,不禁咱們決定。 (使用數組做爲數據源是,value就是數組的每一項;使用對象做爲數據源是,value永遠都是對象的值)
ng-repeat使用,除了要指定option標籤中顯示的文字,還須要手動指定value中的內容,若是沒有指定則默認沒有value;
AngularJS中的DOM與事件 |
ng-disabled="true/false";
傳入true表示禁用,傳入false表示可用。
<button ng-disabled="!myCheck">按鈕</button> <lable> <input type="checkbox" ng-model="myCheck" />是否贊成 </lable>
<p>{{myCheck}}</p>
ng-show:是否顯示
傳入true表示顯示,傳入false表示隱藏。
<lable> <input type="checkbox" ng-model="myShow" />是否顯示 </lable> <p ng-show="myShow">我顯示出來了</p>
ng-hide:是否隱藏
<lable> <input type="checkbox" ng-model="myHide" />是否隱藏 </lable> <p ng-hide="myHide">我顯示出來了</p>
ng-if:是否移除元素。
當傳入true顯示。傳入false時移除。
效果與ng-show相同,可是ng-show和ng-hide只是隱藏元素,而ng-if是將元素從DOM中直接移除!!
<label>
<input type="checkbox" ng-model="myIf" />是否移除?
</label>
<p ng-if="!myIf">我顯示出來啦!!!</p>
ng-bind-html : 至關於innerHTML
而ng-bind 至關於 innerText
注意,要使用ng-bind-html,必須導入angular-sanitize.js文件進行安全驗證。同時須要在聲明模塊的時候,在數組中注入安全驗證模塊'ngSanitize'
<div ng-bind-html="html"></div>
ng-checked 設置複選框或單選框的選中狀態。
傳入true設置當前複選框被選中。
<input type="checkbox" ng-model="all"> Check all<br><br> <input type="checkbox" ng-checked="all">Volvo<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all">Mercedes
ng-class: 用於設置給元素添加class類。
可選值有如下幾種狀況:
① 能夠是字符串。表示直接給元素添加對應的class。 多個class之間,用空格分隔
② 能夠是對象。 對象的鍵表示class名字,對象的值爲true或false,當值爲true時表示添加對應的class
③ 能夠是數組。數組中的值能夠是字符串或對象,判斷規則同上。
<div ng-class="'div div2'">這是一個div</div> <label> <input type="checkbox" ng-model="myClass" />給div添加樣式? </label> <div ng-class="{'div':myClass,'div1':!myClass}">這是一個div</div> <div ng-class="[{'div':myClass,'div1':!myClass},'div3']">這是一個div</div>
ng-switch 根據變量的值,選擇不一樣的ng-switch-when來顯示。當沒有合適的選項時,顯示ng-switch-default.
我喜歡的網站 <select ng-model="myVar"> <option value="aaaa">切回默認狀態! <option value="runoob">www.runoob.com <option value="google">www.google.com <option value="taobao">www.taobao.com </select> <hr> <div ng-switch="myVar"> <div ng-switch-when="runoob"> <h1>菜鳥教程</h1> <p>歡迎訪問菜鳥教程</p> </div> <div ng-switch-when="google"> <h1>Google</h1> <p>歡迎訪問Google</p> </div> <div ng-switch-when="taobao"> <h1>淘寶</h1> <p>歡迎訪問淘寶</p> </div> <div ng-switch-default> <h1>切換</h1> <p>選擇不一樣選項顯示對應的值。</p> </div> </div>
AngularJS 中的事件:
AngularJS中的事件只能觸發綁定在AngularJS做用域上面的屬性和方法。
<button ng-click="func()">點我彈個窗</button> <button ng-mouseover="">點我彈個窗</button> <button ng-mouseout="">點我彈個窗</button> <input type="text" ng-keydown="keyDown()"> <input type="text" ng-foucus=""> <!--得到焦點--> <input type="text" ng-blur=""><!--丟失焦點--> <input type="text" ng-change=""><!--內容被改變-->
AngularJS中的表單和輸入驗證 |
一、表單中,經常使用的驗證操做:
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不經過的錯誤信息
二、 驗證時,必須給form和inpt,設置name屬性。
給form和input設置了name後,會自動將表單信息綁定到$scope做用域中。 因此,能夠直接使用formName.inputName.$驗證操做 獲得驗證結果。
例如:
formName.inputName.$dirty = "true"; //表示表單被填寫過! formName.inputName.$invalid = "true"; //表示表單輸入內容不合法! formName.inputName.$error.required = "true"; //表示設置了必填,可是沒有輸入
注意:
$error支持的驗證:
required/minlength/maxlength/partten/eamil/number/date/url等。。。
三、 爲了不AngularJS的驗證與HTML5的表單驗證衝突!! 好比說 type="email" required等,H5也會進行驗證,那麼能夠給form添加「novalidate」屬性,禁用HTML5的驗證功能
AngularJS中的動畫 |
在AngularJS中使用動畫:
一、導入angular-animate.js
二、若是頁面中沒有自定義的app模塊,則能夠直接綁定系統模塊ng-app="ngAnimate"
若是頁面中有自定義的app模塊,則能夠在自定義模塊的數組中,注入ngAnimate。
angular.module
三、當使用ng-show、ng-hide顯示或者隱藏元素的時候,系統會自動添加或者移除,ng-hide這個class類。
四、當使用ng-if/ng-switch/ng-repeat等其餘指令,須要分別設置顯示後和隱藏後的兩種class樣式;
顯示後的class: .ng-enter-active,.ng-leave{}
顯示後的class: .ng-enter,.ng-leave-active{}
<input type="checkbox" ng-model="myCheck" />隱藏div
<div class="div" ng-hide="myCheck">這是一個div</div>
<input type="checkbox" ng-model="myIf" />移除div
<div class="div" ng-if="myIf">這是一個div</div>