AngularJS簡介javascript
AngularJS誕生於2009年,由Misko Hevery 等人建立,後爲Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有着諸多特性,最爲核心的是:MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。它可經過 <script> 標籤添加到 HTML 頁面。
AngularJS 經過 指令 擴展了 HTML,且經過 表達式 綁定數據到 HTML。
AngularJS 是以一個 JavaScript 文件形式發佈的,可經過 script 標籤添加到網頁中。css
AngularJS 表達式與指令html
一、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中。能夠與表達式{{}}相互替換
ng-bind 指令告訴 AngularJS 使用給定的變量或表達式的值來替換 HTML 元素的內容。
若是給定的變量或表達式修改了,指定替換的 HTML 元素也會修改。
eg:<div ng-bind="name"></div>
五、ng-init:初始化AngularJS應用程序中變量值。
eg:<body ng-app="" gn-init="name='haha'"></body>
應用程序初始化時,name變量就附有初值java
舉個栗子:web
1 <div ng-app="" ng-init="quantity=1;price=5"> 2 3 <h2>價格計算器</h2> 4 5 數量: <input type="number" ng-model="quantity"> 6 價格: <input type="number" ng-model="price"> 7 8 <p><b>總價:</b> {{ quantity * price }}</p> 9 10 </div>
AngularJS中的MVC與做用域數據庫
【MVC三層架構】
一、 Model(模型層):應用程序中用於處理數據的部分。 (包括將數據保存或者修改到數據庫、變量、文件中)。
在AngularJS中,Model特指的是:應用程序中的各類數據。
二、 View(視圖層):用戶能夠看到的用戶顯示數據的頁面。
Controller(控制器):控制器是連接View與Model的橋樑。負責從View讀取數據,接受用戶的操做輸入,並將數據發送給Model層。
Model層對數據處理完畢以後,將結果返回給Controller,Controller再將結果返回給View層顯示。json
三、建立一個AngularJS的模塊。即ng-app=" "所須要綁定的部分。
須要接受兩個參數:
① 模塊名稱,即ng-app雙引號中須要綁定的名字。<body ng-app="myApp">
② 數組。 表示須要注入的模塊名稱,不須要注入其餘模塊可用空數組代替。
>>> AngularJS將經常使用的功能封裝到angular.js,建立主模塊時直接可使用,無需注入。
>>> 而一些應用較少的功能,須要導入對應的JS文件,而且在[]中注入進這個模塊,纔可以使用。
這就是AngularJS中的【模塊化開發】與【依賴注入】!bootstrap
四、在AngularJS的模塊上,建立一個控制器,須要傳遞兩個參數:
① 控制器名稱,即ng-controller須要綁定的名稱。
<div ng-controller="myCtrl">
② 控制器的構造函數,構造函數能夠傳入多個參數。
>>> 若是要在函數中使用系統的內置對象,則必須經過函數的參數傳入,不然不能使用。
>>> AngularJS中的內置對象,都用$開頭,例如$scope,$rootScope
【AngularJS的做用域】
① $scope: 局部做用域,聲明在$scope上的屬性和方法。只能在當前Controller使用;
② $rootScope: 根做用域。聲明在$rootScope上的屬性和方法,能夠在整個ng-app所包含的範圍使用。
>>> 若是沒有使用$scope聲明變量,而是直接使用ng-model在HTML標籤中綁定的數據的做用域爲:
1.若是ng-model寫在某個Controller中,則這個變量會默認綁定到當前Controller的$scope上;
2.若是ng-model沒有寫在任何一個Controller,則這個變量會默認綁定到$rootScope上;
>>> AngularJS中的父子做用域
一、AngularJS中,子做用域只能訪問父做用域中的變量,而不能修改父做用域的變量;
二、爲了解決上述問題,能夠將父做用域中的變量聲明爲引用數據類型,例如對象等。 這樣能夠在子做用域中,直接修改對象的屬性,而不須要修改對象自己保存的地址。數組
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>AngularJS中的MVC與做用域</title> 7 </head> 8 9 <body ng-app="myApp"> 10 <input type="text" ng-model="age" placeholder="age" /> 11 12 <div ng-controller="myCtrl"> 13 <input type="text" ng-model="name" placeholder="name" /> 14 <div ng-bind="name+'-----myCtrl的name'"></div> 15 <div ng-bind="age+'-----myCtrl的age'"></div> 16 </div> 17 18 <div ng-controller="myCtrl1"> 19 <div ng-bind="name+ '----myCtrl1的name'"></div> 20 <div ng-bind="age+'-----myCtrl1的age'"></div> 21 22 <input type="text" ng-model="test" /> 23 <input type="text" ng-model="obj.test" /> 24 <mark ng-bind="test+'myCtrl1-test'"></mark> 25 <mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark> 26 </div> 27 <mark ng-bind="test+'全局-test'"></mark> 28 <mark ng-bind="obj.test+'全局-obj.test'"></mark> 29 30 <div ng-bind="name + '----全局的name'"></div> 31 <div ng-bind="age+'-----全局的age'"></div> 32 </body> 33 34 <script src="js/angular.js" type="text/javascript"></script> 35 <script type="text/javascript"> 36 var app = angular.module("myApp", []); 37 app.controller("myCtrl", function($scope, $rootScope) { 38 $scope.name = "zhangsan"; 39 $rootScope.age = "14"; 40 }); 41 42 app.controller("myCtrl1", function($rootScope) { 43 $rootScope.test = "aaa"; 44 $rootScope.obj = { 45 test: 'bbb' 46 } 47 }); 48 </script> 49 50 </html>
AngularJS中的過濾器
一、 過濾器可使用一個管道字符(|)添加到表達式和指令中。
>>>系統內置的過濾器:
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
二、自定義過濾器,同時須要傳的過濾參數。
調用過濾參數實例:<p>{{12345678958 | hidenTel:5}}</p>
傳入的參數5,將被過濾函數的num形參所接受
自定義過濾器,實現根據姓名篩選數據功能
調用實例:
請輸入姓名:<input type="text" ng-model="name"/>
<tr ng-repeat="item in classes | filterByName:name">
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body ng-app="app" ng-controller="ctrl"> 8 <p>{{123456|currency}}</p> 9 <p>{{"aBcDeF"|lowercase}}</p> 10 <p>{{"aBcDeF"|uppercase}}</p> 11 12 請輸入搜索關鍵字:<input type="text" ng-model="search"/> 13 請輸入姓名:<input type="text" ng-model="name"/> 14 <table width="400px" border="1" style="border-collapse: collapse;"> 15 <tr> 16 <th>姓名</th> 17 <th>年齡</th> 18 <th>成績</th> 19 </tr> 20 <tr ng-repeat="item in classes | orderBy:'score' | filter:search | filterByName:name"> 21 <td>{{item.name}}</td> 22 <td>{{item.age}}</td> 23 <td>{{item.score}}</td> 24 </tr> 25 </table> 26 27 <h1>自定義過濾器</h1> 28 <p>{{"我顯示不出來了" | showHello}}</p> 29 <p>{{"我顯示不出來了" | reverse}}</p> 30 <p>{{12345678958 | hidenTel:5}}</p> 31 </body> 32 <script type="text/javascript" src="js/angular.js" ></script> 33 <script type="text/javascript"> 34 angular.module("app",[]).controller("ctrl",function($scope){ 35 $scope.classes=[ 36 {name:"zhangsan",age:12,score:78}, 37 {name:"lisi",age:12,score:88}, 38 {name:"wanger",age:12,score:98}, 39 {name:"lier",age:12,score:68}, 40 {name:"zhangli",age:12,score:78}, 41 ] 42 }) 43 .filter("showHello",function(){ 44 return function(text){ 45 return "Hello AngularJS"; 46 } 47 }) 48 49 .filter("reverse",function(){ 50 return function(text){ 51 return text.split("").reverse().join(""); 52 } 53 }) 54 55 .filter("hidenTel",function(){ 56 return function(text,num){ 57 num=num>0&&num<11?num:3; 58 text=text+""; //將text變成字符串格式 59 var newText=text.substring(0,11-num)+text.substring(11-num,11).replace(/\d/g,"*") 60 return newText; 61 } 62 }) 63 64 .filter("filterByName",function(){ 65 return function(item,search){ 66 if (!search) { 67 return item; 68 } 69 var arr=[]; 70 for (var i=0;i<item.length;i++) { 71 var index=item[i].name.indexOf(search); 72 if(index>-1){ 73 arr.push(item[i]); 74 } 75 } 76 return arr; 77 } 78 }) 79 80 </script> 81 </html>
AngularJS中的服務Service
【服務Service】
一、內置服務:
>>> 要用服務,必需要把服務名經過controller的構造函數的參數注入進來!!!
>>> 系統內置的服務,統一使用$開頭, 服務中的屬性和方法統一使用$$開頭!!! 自定義服務時,需注意與系統服務的寫法區分開;
$location: 返回當前頁面的URL地址信息,是一個對象;
$http: 向服務器發送請求,相似於JQuery中的Ajax;
$timeout: 至關於 setTimeout();
$interval: 至關於setInterval();
二、自定義服務
第一個參數是服務名,
第二個參數是自定義服務的構造函數。 咱們自定義的服務,本質是一個對象。
對象的屬性 ,能夠在構造函數中,使用this.屬性 表示;
對象的方法 ,能夠在構造函數中,使用this.方法 表示;
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>04-AngularJS中的服務Service.html</title> 7 </head> 8 9 <body ng-app="app" ng-controller="ctrl"> 10 <pre> 11 {{local}} 12 </pre> 13 <p>{{time}}</p> 14 <p>{{num}}</p> 15 16 <h1>{{gongneng}}</h1> 17 <p>10轉化爲16進制後,結果爲:{{num1}}</p> 18 19 <p>{{10|filter1}}</p> 20 <p>{{11|filter2}}</p> 21 22 </body> 23 24 <script src="js/angular.js" type="text/javascript"></script> 25 <script type="text/javascript"> 26 angular.module("app", []) 27 .controller("ctrl", function($scope, $location, $timeout, $interval, hexafy) { 28 $scope.local = $location.$$host; 29 $timeout(function() { 30 $scope.time = "我是兩秒鐘以後出現!"; 31 }, 2000); 32 $scope.num = 0; 33 $interval(function() { 34 $scope.num++; 35 }, 1000); 36 37 $scope.gongneng = hexafy.gongneng; 38 $scope.num1 = hexafy.func(10); 39 }) 40 .service("hexafy", function() { 41 this.gongneng = "將十進制數轉化爲16進制"; 42 this.func = function(num) { 43 return num.toString(16); 44 } 45 }) 46 /*使用過濾器實現一樣功能*/ 47 .filter("filter1", function() { 48 return function(num) { 49 return num.toString(16); 50 } 51 }) 52 /*在過濾器中調用服務!! 53 *也必須在聲明過濾器的外層構造函數中,注入服務名稱!!! 54 */ 55 .filter("filter2", function(hexafy, $location) { 56 return function(num) { 57 return hexafy.func(num); 58 } 59 }) 60 </script> 61 62 </html>
AngularJS中的服務-factory
【自定義服務Factory】
factory服務在使用上與service服務沒有太大區別
惟一不一樣點,是聲明服務時,factory服務是在函數中先聲明一個對象,而後再使用return將對象返回
而service服務,則是直接在函數中使用this.屬性和方法添加到對象上面
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body ng-app="app" ng-controller="ctrl"> 8 <h1>{{gongneng}}</h1> 9 <p>10進制數轉化爲16進制{{num1}}</p> 10 11 </body> 12 <script type="text/javascript" src="js/angular.js" ></script> 13 <script type="text/javascript"> 14 angular.module("app",[]) 15 .controller("ctrl",function($scope,hexafy){ 16 $scope.gongneng = hexafy.gongneng; 17 $scope.num1 = hexafy.func(10); 18 }) 19 .factory("hexafy",function(){ 20 var obj={ 21 gongneng :"將十進制數轉化爲16進制", 22 func : function(num){ 23 return num.toString(16); 24 }, 25 } 26 return obj; 27 }) 28 29 30 31 </script> 32 </html>
AngularJS中的服務provider
【自定義服務provider】
一、在AngularJS中,service服務、factory服務是基於provider服務實現的
二、在定義provider時,可使用$get方法,接受一個函數,函數裏面採用與factory徹底相同的寫法!!
例如:
.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng :"將十進制數轉化爲16進制",
func : function(num){
return num.toString(16);
},
}
return obj;
}
})
三、在三種服務中,provider服務是惟一一個能夠寫進config配置階段的服務。
因此說,若是服務須要在配置階段,也就是聲明controller以前執行的話,則可使用provider。
不然通常使用service或者factory
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body ng-app="app" ng-controller="ctrl"> 8 <h1>{{gongneng}}</h1> 9 <p>10進制數轉化爲16進制{{num1}}</p> 10 11 </body> 12 <script type="text/javascript" src="js/angular.js" ></script> 13 <script type="text/javascript"> 14 angular.module("app",[]) 15 .config(function($provide){ 16 //在配置階段聲明provider服務,須要在config中注入系統對象$provide 17 $provide.provider("hexafy",function(){ 18 this.$get=function(){ 19 var obj={ 20 gongneng :"將十進制數轉化爲16進制", 21 func : function(num){ 22 return num.toString(16); 23 }, 24 } 25 return obj; 26 } 27 }) 28 }) 29 .controller("ctrl",function($scope,hexafy){ 30 $scope.gongneng = hexafy.gongneng; 31 $scope.num1 = hexafy.func(10); 32 }) 33 </script> 34 </html>
AngularJS中的$http
AngularJS $http 是一個用於讀取web服務器上數據的服務。
$http.get(url) 是用於讀取服務器數據的函數。
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body ng-app="app" ng-controller="ctrl"> 8 <table width="400px" border="1" style="border-collapse: collapse;"> 9 <tr> 10 <th>姓名</th> 11 <th>年齡</th> 12 <th>興趣</th> 13 <th>語文</th> 14 <th>數學</th> 15 <th>總分</th> 16 </tr> 17 <tr ng-repeat="item in data | orderBy:'score.chinese+score.math' "> 18 <td>{{item.name}}</td> 19 <td>{{item.age}}</td> 20 <td>{{item.bobby}}</td> 21 <td>{{item.score.chinese}}</td> 22 <td>{{item.score.math}}</td> 23 <td>{{item.score.chinese+item.score.math}}</td> 24 </tr> 25 </table> 26 27 </body> 28 <script type="text/javascript" src="js/angular.js" ></script> 29 <script type="text/javascript"> 30 angular.module("app",[]) 31 .controller("ctrl",function($scope,$http){ 32 $http({ 33 method: "GET",//請求的方法 34 url:"h51701.json"//請求的地址 35 }).then(function(obj){ 36 //請求成功的回調函數請求成功 37 alert("請求成功"); 38 $scope.data=obj.data; 39 console.log(obj.data); 40 },function(){ 41 //請求失敗的回調函數 42 alert("請求失敗"); 43 }) 44 45 </script> 46 </html>
AngularJS中的select和表格
【ng-options 和 ng-repeat】
一、ng-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;
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 pre{ 8 height: 20px; 9 background-color: #CCCCCC; 10 } 11 </style> 12 </head> 13 14 <body ng-app="app" ng-controller="ctrl"> 15 <select ng-model="site2"> 16 <option ng-repeat="item in options">{{item}}</option> 17 </select> 18 <pre>{{site2}}</pre> 19 20 <select ng-model="site1"> 21 <option ng-repeat="item in sites" value="{{item.url}}">{{item.site}}</option> 22 </select> 23 <pre>{{site1}}</pre> 24 <select ng-model="site" ng-options="item.site for item in sites"></select> 25 <pre>{{site}}</pre> 26 <select ng-model="site3" ng-options="key for (key,value) in sitess"> 27 </select> 28 <pre>{{site3}}</pre> 29 <table width="400" border="1"> 30 <tr> 31 <th>序號</th> 32 <th>姓名</th> 33 </tr> 34 <tr ng-repeat="item in options"> 35 <!-- 36 ng-repeat遍歷是,$index 表示當前的行索引! 37 --> 38 <td>{{$index + 1}}</td> 39 <td>{{item}}</td> 40 </tr> 41 </table> 42 43 </body> 44 45 <script src="js/angular.js" type="text/javascript"></script> 46 <script type="text/javascript"> 47 angular.module("app",[]) 48 .controller("ctrl",function($scope){ 49 $scope.options = ["張三","李四","王二麻子","趙六","李二狗"]; 50 $scope.sites = [ 51 {site : "Google", url : "http://www.google.com"}, 52 {site : "Runoob", url : "http://www.runoob.com"}, 53 {site : "Taobao", url : "http://www.taobao.com"} 54 ]; 55 $scope.sitess = { 56 site01 : "Google", 57 site02 : "Runoob", 58 site03 : "Taobao" 59 } 60 }) 61 </script> 62 63 </html>
AngularJS中的DOM與事件
一、ng-disabled="false、true" 傳入true表示禁用,false表示可用
二、ng-show 指令隱藏或顯示一個 HTML 元素。 傳入true表示顯示,false表示隱藏
三、ng-hide 指令用於隱藏或顯示 HTML 元素。
四、ng-if 若是條件爲 false 移除 HTML 元素, 效果與ng-show相同,可是ng-show和ng-hide是隱藏,ng-if將元素從DOM中移除!!
五、ng-click 指令定義了 AngularJS 點擊事件。
六、ng-bind-html 至關於innerHTML,
注意:要是用ng-bind-html,必須導入angular-sanitize.js文件進行安全驗證。
同時須要在聲明模塊的時候,在數組中注入安全驗證模塊'ngSanitize'
七、ng-checked 指令用於設置複選框(checkbox)或單選按鈕(radio)的 checked 屬性。
若是 ng-checked 屬性返回 true,複選框(checkbox)或單選按鈕(radio)將會被選中。
八、ng-class:用於設置給class添加class類。
可選值有如下幾種狀況:
一、能夠是字符串,表示直接給元素添加對應的class,多個class之間用空格分隔
二、能夠是對象,對象的鍵表示class名字,對象的值爲true或false,當爲true時表示添加對應的class
三、能夠是數組,數組中的值能夠是字符串或對象,判斷同上
九、ng-switch:根據變量的值,選擇不一樣的ng-switch-when來顯示,當沒有合適的選項時,顯示 ng-switch-default
舉個栗子:
1 <div ng-app="myApp" ng-controller="personCtrl"> 2 3 <button ng-click="toggle()">隱藏/顯示</button> 4 5 <p ng-hide="myVar"> 6 名: <input type="text" ng-model="firstName"><br> 7 姓名: <input type="text" ng-model="lastName"><br> 8 <br> 9 Full Name: {{firstName + " " + lastName}} 10 </p> 11 12 </div> 13 14 <script> 15 var app = angular.module('myApp', []); 16 app.controller('personCtrl', function($scope) { 17 $scope.firstName = "John", 18 $scope.lastName = "Doe" 19 $scope.myVar = false; 20 $scope.toggle = function() { 21 $scope.myVar = !$scope.myVar; 22 }; 23 });
AngularJS中的表單和輸入驗證
【AngularJS中的表單驗證】
一、表單中,經常使用的驗證操做
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不經過的錯誤信息
二、驗證時,必須給form和input,設置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的表單驗證衝突;novalidate
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>AngularJS中的表單驗證</title> 7 <link rel="stylesheet" href="../06-BootStrap框架/css/bootstrap.css" /> 8 <style type="text/css"> 9 .row { 10 margin: 10px 0px; 11 } 12 </style> 13 </head> 14 15 <body ng-app="app" ng-controller="ctrl"> 16 <div class="container" style="width: 400px;margin: 50px auto; padding: 0px;"> 17 <div class="panel panel-primary"> 18 <div class="panel-heading"> 19 <div class="panel-title" style="text-align: center;"> 20 用戶註冊 21 </div> 22 </div> 23 <div class="panel-body"> 24 <form class="form-horizontal" name="form" novalidate> 25 <div class="row"> 26 <div class="col-xs-4">用戶名:</div> 27 <div class="col-xs-8"> 28 <input type="text" class="form-control" name="name" ng-model="user.name " required ng-minlength="6" ng-maxlength="12" /> 29 <p style="margin: 0px;color: red;" ng-show="form.name .$invalid && form.name .$dirty"> 30 <span ng-show="form.name .$error.required">用戶名必須填寫</span> 31 <span ng-show="form.name .$error.minlength">用戶名長度最小爲6位</span> 32 <span ng-show="form.name .$error.maxlength">用戶名長度最大爲12位</span> 33 </p> 34 </div> 35 </div> 36 <div class="row"> 37 <div class="col-xs-4">郵箱:</div> 38 <div class="col-xs-8"> 39 <input type="email" class="form-control" name="email" ng-model="user.email" required/> 40 <p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty"> 41 <span ng-show="form.email.$error.required">郵箱必須填寫</span> 42 <span ng-show="form.email.$error.email">郵箱不合法</span> 43 </p> 44 </div> 45 </div> 46 <div class="row"> 47 <div class="col-xs-4">密碼:</div> 48 <div class="col-xs-8"> 49 <input type="passward" class="form-control" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$" /> 50 <p style="margin: 0px;color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty"> 51 <span ng-show="form.pwd.$error.pattern">密碼只能由6-18位字母數字下劃線組成</span> 52 </p> 53 </div> 54 </div> 55 56 <div class="row"> 57 <div class="col-xs-4">確認密碼:</div> 58 <div class="col-xs-8"> 59 <input type="passward" class="form-control" name="repwd" ng-model="user.repwd" required /> 60 <p style="margin: 0px;color: red;" ng-show="form.repwd.$dirty && user.pwd!=user.repwd">兩次密碼輸入不一致</p> 61 </div> 62 </div> 63 <div class="row"> 64 <div class="col-xs-6"> 65 <input type="submit" value="註冊" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd" required /> 66 67 </div> 68 <div class="col-xs-6"> 69 <input type="submit" value="重置" class="btn btn-warning" /> 70 </div> 71 </div> 72 73 </form> 74 </div> 75 </div> 76 </div> 77 78 </body> 79 80 <script type="text/javascript" src="js/angular.js"></script> 81 <script type="text/javascript"> 82 angular.module("app", []) 83 .controller("ctrl", function() { 84 85 }) 86 </script> 87 88 </html>
AngularJS中的動畫
在AngularJS中使用動畫:
一、導入angular-animate.js
二、若是頁面中沒有自定義app模塊,則能夠直接綁定系統模塊ng-app="ngAnimate"
若是頁面中有自定義的app模塊,則能夠在自定義模塊的數組中,注入ngAnimate。
eg:angular.module("app",["ngAnimate"])
三、當使用ng-show、ng-hide顯示或隱藏元素的時候,系統會自動添加或移除.ng-hide這個class類
四、當使用ng-if、ng-switch、ng-repeat等其餘指令時,須要分別設置顯示後和隱藏後的兩種CS樣式;
.ng-enter-active,.ng-leave{ } 顯示後
.ng-enter,.ng-leave-active{ } 隱藏後
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .div{ 8 width: 200px; 9 height: 200px; 10 background-color: green; 11 transition: all 2s ease; 12 } 13 .ng-hide{ 14 width: 100px; 15 height: 100px; 16 background-color: cadetblue; 17 /*margin-left: -100px;*/ 18 } 19 .ng-enter-active,.ng-leave{ 20 width: 200px; 21 height: 200px; 22 background-color: red; 23 } 24 .ng-enter,.ng-leave-active{ 25 width: 0px; 26 height: 0px; 27 /*margin-left: -200px;*/ 28 } 29 </style> 30 </head> 31 <body ng-app="app" ng-controller="ctrl"> 32 33 <input type="checkbox"ng-model="myCheck" />是否隱藏div? 34 <div class="div"ng-hide="myCheck">hahaha</div> 35 36 <input type="checkbox"ng-model="myIf" />是否隱藏div? 37 <div class="div"ng-if="!myIf">hahaha</div> 38 </body> 39 40 <script type="text/javascript" src="js/angular.js"></script> 41 <script type="text/javascript" src="js/angular-animate.js"></script> 42 <script type="text/javascript"> 43 angular.module("app",["ngAnimate"]) 44 .controller("ctrl",function(){ 45 46 }) 47 </script> 48 </html>
AngularJS中的路由
在AngularJS中使用路由:
1. 導入路由文件:angular-route.js
2. 在主模塊中注入"ngRoute"。 rg:angular.module("app",["ngRoute"])
3. 將超連接改寫爲路由格式。 --> "#/標記"
4. 在config配置階段,注入$routeProvider,進行路由配置:
5. 在頁面的合適位置,添加ng-view,用於承載路由打開的頁面:
<div ng-view></div> 或 <ng-view></ng-view>
【路由對象中接受的可選參數:】
① template: 自定義HTML模板,會直接將這段HTML記載到ng-view中;
② templateUrl: 導入外部的HTML模板文件。 爲了不衝突,外部的HTML應該是一個代碼片斷,即只保留body之內的部分。
③ controller: 在當前HTML模板上,執行的controller函數。會生出新的做用域$scope. 能夠接受字符串(聲明好的controller名字),也能夠直接接受函數。
>>> 注意: 使用ng-view打開的頁面,controller中的做用域是屬於當前頁面做用域的子做用域!! 依然符合Angular中父子做用域"能讀不能寫"的要求!
>>> 因此: 若是須要在ng-view中修改當前做用域的變量,必須把這個變量聲明爲對象的屬性!!
④ redirectTo:重定向。通常用於.otherwise()中,用於重定向回首頁!
舉個栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <body ng-app='routingDemoApp'> 7 8 <h2>AngularJS 路由應用</h2> 9 <ul> 10 <li><a href="#/">首頁</a></li> 11 <li><a href="#/computers">電腦</a></li> 12 <li><a href="#/printers">打印機</a></li> 13 <li><a href="#/blabla">其餘</a></li> 14 </ul> 15 16 <div ng-view></div> 17 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 18 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 19 <script> 20 angular.module('routingDemoApp',['ngRoute']) 21 .config(['$routeProvider', function($routeProvider){ 22 $routeProvider 23 .when('/',{template:'這是首頁頁面'}) 24 .when('/computers',{template:'這是電腦分類頁面'}) 25 .when('/printers',{template:'這是打印機頁面'}) 26 .otherwise({redirectTo:'/'}); 27 }]); 28 </script> 29 </html>