一款優秀的JavaScript框架—AngularJS

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>
相關文章
相關標籤/搜索