媲美jQuery的JS框架----AngularJS（二）

時間  2019-11-17
標籤 媲美 jquery 框架 angularjs 欄目 JQuery 简体版
原文   原文鏈接
前言

對於AngularJS什麼，小編在這就很少作介紹了。你們能夠看小編的上一篇博客。javascript

言歸正傳，小編在上一篇博客中介紹了AngularJS中的指令、表達式還有很是實用的三種服務。接下來，帶你們看一看AngularJS中的$http、表格、dom及事件，固然還有其動畫以及極其重要的路由。css

 

1、AngularJS中的$http

做爲一個前端程序猿，明白與後臺數據的傳遞是灰常重要的。要知道，在前端經常使用的向後臺傳遞數據的方式有：原生JS的ajax，jQuery中的ajax、表單的提交過程也是一種向後臺數據傳遞的過程。最後，還有就是今天要將的AngularJS中的$HTTP了。固然，確定還有其餘的 數據傳遞方式，小編之後會介紹給大家的。html

 

1.1AngularJS中的$thhp

AngularJS中的$http的基本樣式比較簡單，前端

1 $http({
2 method:"get/post", /*請求的方法*/
3 url:" " /*請求的地址*/
4 }).then(function(classes){
5 /*請求成功的回調函數*/
6 },function(){
7 /*請求失敗的回調函數*/
8 });

 

 

 

咱們實現一個請求json文件的數據，並製做爲一個表格。至於爲何是json文件，由於小編只是初步接觸後臺，而json則一般被咱們前端做爲後臺的替代。固然了，只供做爲小小的後臺數據使用，並非後臺。java

直接上栗子：web

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="app" ng-controller="ctrl">
        <table width="400px"border="1"style="border-collapse: collapse;">
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>興趣</th>
                <th>語文成績</th>
                <th>數學成績</th>
                <th>總分</th>    
            </tr>
            <tr ng-repeat="item in classes|orderBy:'score.chinese+score.math'">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.hobby}}</td>
                <td>{{item.score.math}}</td>
                <td>{{item.score.chinese}}</td>
                <td>{{item.score.math+item.score.chinese}}</td>
            </tr>
            
        </table>
    </body>
    
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript">
        angular.module("app",[])
        .controller("ctrl",function($scope,$http){
            $http({
                method:"get", /*請求的方法*/
                url:"angularJs.json" /*請求的地址*/
            }).then(function(classes){
                /*請求成功的回調函數*/
                $scope.classes=classes.data;
                
//                $scope.name = classes.data.name;
                alert("請求成功！");
            },function(){
                /*請求成功的回調函數*/
                alert("請求失敗");
            });
            
    　　});

    </script>
</html>

 

json：ajax

 1 [
 2     {
 3         "name": "張三",
 4         "age": 17,
 5         "hobby": [
 6             "吃",
 7             "喝",
 8             "玩",
 9             "樂"
10         ],
11         "score":{
12             "math":48,
13             "chinese":59
14         }
15     },
16     {
17         "name": "張三",
18         "age": 17,
19         "hobby": [
20             "吃",
21             "喝",
22             "玩",
23             "樂"
24         ],
25         "score":{
26             "math":88,
27             "chinese":99
28         }
29     },
30     {
31         "name": "張三",
32         "age": 17,
33         "hobby": [
34             "吃",
35             "喝",
36             "玩",
37             "樂"
38         ],
39         "score":{
40             "math":68,
41             "chinese":89
42         }
43     },
44     {
45         "name": "張三",
46         "age": 17,
47         "hobby": [
48             "吃",
49             "喝",
50             "玩",
51             "樂"
52         ],
53         "score":{
54             "math":78,
55             "chinese":89
56         }
57     }
58 ]

 

結果：json

固然，他也有簡寫形式：bootstrap

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

不過須要注意，post的縮寫格式會出現內部服務器錯誤，你們先了解這種方式，小編後續會解決這個問題 數組

舉個栗子：

1             $http.get("angularJs.json",{/*須要傳遞到後臺的參數*/}).then(function(){
2                 alert("請求成功！")
3                 },function(){
4                 alert("請求失敗！");
5             })
6         })
7

 

2、AngularJS中的select和表格

由於AngularJS雙向數據綁定的特性，AngularJS的獲取數據也變得簡單。接下來就帶你們瞭解一下select和表格。

 

2.1AngularJS中的select

 在AngularJS中，select下拉選項也分爲兩種，使用數組做爲數據源和以對象做爲數據源；

1、使用做爲數據源；

一、item表示數組中的每一項！
二、循環中的option中，value的值，默認爲item
三、option顯示出的內容(<option></option>標籤中的文字)是由item.site for 決定！！

再舉例：

 1 <body ng-app="app" ng-controller="ctrl">
 2         <select ng-model="site3">
 3             <option ng-repeat="item in options">{{item}}</option>
 4         </select>
 5         
 6         <pre>{{site3}}</pre>
 7 </body>
 8 <script type="text/javascript" src="js/angular.js"></script>
 9     <script type="text/javascript">
10         angular.module("app",[])
11         .controller("ctrl",function($scope){
12             $scope.options = ["張三","李四","王二麻子","趙六","李胖"];
13 </script>

 結果：

 再再舉個栗子：

<body ng-app="app" ng-controller="ctrl">
        
        <select ng-model="site2">
            <option ng-repeat="item in sites" value="{{item.url}}">{{item.site}}</option>
        </select>
        
        <pre>{{site2}}</pre>
    </body>
    
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript">
        angular.module("app",[])
        .controller("ctrl",function($scope){

            
            $scope.sites = [
                {site : "Google", url : "http://www.google.com"},
                {site : "Runoob", url : "http://www.runoob.com"},
                {site : "Taobao", url : "http://www.taobao.com"}
            ];

        })
    </script>

 結果：

 

2、以對象做爲數據源
一、 (key,value) 第一項表示對象的鍵，第二項表示對象的值；
二、 option的value，永遠都是對象的值！
三、 option顯示出的內容(<option></option>標籤中的文字)是由...for 決定的！也就是說 for前面是什麼，option標籤中就是什麼。
再再再舉個栗子！！

<body ng-app="app" ng-controller="ctrl">
    <select ng-model="site4" ng-options="key for (key,value) in sitess"></select>
        
        <pre>{{site4}}</pre>
</body>
    
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript">
        angular.module("app",[])
        .controller("ctrl",function($scope){
　　　　　　$scope.sitess = {
                site01 : "Google",
                site02 : "Runoob",
                site03 : "Taobao"
            };
        })
    </script>

 結果：

從上面兩個例子中能夠發現，在取到數組或對象中每一個值得時候，使用了兩種方式：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；

 


2.2AngularJS中的表格

 其實表格的製做和上述的select是同樣的方法，只要明白如何取值，那麼表格就只是樣式的問題了。

瘋狂舉栗子：

 1     <body ng-app="app" ng-controller="ctrl">
 2 　　　　<table width="400" border="1">
 3             <tr>
 4                 <th>序號</th>
 5                 <th>姓名</th>
 6             </tr>
 7             <tr ng-repeat="item in options">
 8                 
 9                     <!--ng-repeat遍歷是，$index 表示當前的行索引！-->
10                 
11                 <td>{{$index + 1}}</td>
12                 <td>{{item}}</td>
13             </tr>
14         </table>
15         
16         
17     </body>
18     
19     <script type="text/javascript" src="js/angular.js"></script>
20     <script type="text/javascript">
21         angular.module("app",[])
22         .controller("ctrl",function($scope){
23         $scope.options = ["張三","李四","王二麻子","趙六","李胖"];
24 　　</script>

 結果：

3、AngularJS中的DOM與事件

接下來給你們介紹一些AngularJS中的dom事件，在AngularJS中，大部分的dom事件都是經過其指令來實現；

 

3.1AngularJS中的DOM

 

一、ng-disabled="true/false";
傳入true表示禁用，傳入false表示可用；

二、ng-hide：是否隱藏；true表示隱藏，false表示不隱藏

三、ng-show：是否顯示；true表示顯示，false表示不顯示

因此由於咱們一般碰見的是true表示通用，因此，在事件的前面加上「！」；這只是我的習慣問題，沒有規定必須；

舉個栗子：

 1 <body ng-app="app" ng-controller="ctrl">
 2         <!--
 3             ng-disabled="true/false";
 4             傳入true表示禁用，傳入false表示可用
 5         -->
 6         <button ng-disabled="!myCheck">按鈕</button>
 7         
 8         <label>
 9             <input type="checkbox" ng-model="myCheck" />是否贊成
10         </label>
11             
12         <p>{{myCheck}}</p>
13         <hr />
14         <label>
15             <input type="checkbox" ng-model="myShow" />是否顯示
16             
17         </label>
18         <p ng-show="myShow">我顯示出來啦！</p>
19         <hr />
20         
21         <label>
22             <input type="checkbox" ng-model="myHide" />是否隱藏
23             
24         </label>
25         <p ng-hide="myHide">我顯示出來啦！</p>
26 </body>
27     
28     <script type="text/javascript" src="js/angular.js"></script>
29     <script type="text/javascript">
30         angular.module("app",[])
31         .controller("ctrl",function($scope){
32 
33         })
34     </script>

 結果：

 

四、ng-if：是否移除元素

當傳入true顯示，傳入false移除
效果與ng-hide相同，可是ng-hide是將元素隱藏，而ng-if是將元素在DOM中移除！！！

 1     <body ng-app="app" ng-controller="ctrl">
 2 　　　　　<label>
 3             <input type="checkbox" ng-model="myIf" />是否移除
 4             
 5         </label>
 6         <p ng-if="!myIf">我顯示出來啦！</p>
 7         <hr />
 8 　　</body>
 9     
10     <script type="text/javascript" src="js/angular.js"></script>
11     <script type="text/javascript">
12         angular.module("app",[])
13         .controller("ctrl",function($scope){
14     })
15     </script>

 結果：

 

五、ng-checked:傳入true當前的複選框被選中

再次瘋狂舉栗子：

 1     <body ng-app="app" ng-controller="ctrl">
 2 　　　　　<input type="checkbox" ng-model="all"> Check all<br><br>
 3 
 4         <input type="checkbox" ng-checked="all">Volvo<br>
 5         <input type="checkbox" ng-checked="all">Ford<br>
 6         <input type="checkbox" ng-checked="all">Mercedes
 7 　　</body>
 8     
 9     <script type="text/javascript" src="js/angular.js"></script>
10     <script type="text/javascript">
11         angular.module("app",[])
12         .controller("ctrl",function($scope){
13 
14     </script>

 

結果：

 

六、ng-class :用於設置給元素添加class類

可選值有如下幾種狀況：
①能夠是字符串。表示直接給元素添加對應的class。多個class之間用空格分隔；
②能夠是對象，對象的鍵表示class名字，對象的值爲true或false，當爲true時表示添加對應的class
③能夠是數組，數組中的值能夠是字符串或對象，判斷同上

舉栗子：

 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: cadetblue;
11             }
12             .div1{
13                 width: 200px;
14                 height: 200px;
15                 background-color: blueviolet;
16             }
17             .div3{
18                 color: red;
19             }
20         </style>
21     </head>
22     <body ng-app="app" ng-controller="ctrl">
23 
24         <div ng-class="'div'">這是一個div</div>
25         <label>
26             <input type="checkbox"ng-model="myClass"/>給div添加樣式？
27         </label>
28         <div ng-class="{'div':myClass,'div1':!myClass}">zheshi</div>
29         <hr/>
30         <div ng-class="[{'div':myClass,'div1':!myClass},'div3']">haha</div>
31         <hr/>
32 </body>
33     
34     <script type="text/javascript" src="js/angular.js"></script>
35     <script type="text/javascript">
36         angular.module("app",[])
37         .controller("ctrl",function($scope){
38 
39         })
40     </script>
41 </html>

 

結果：

七、ng-switch根據變量的值進行選擇

再次舉例：

 1     <body ng-app="app" ng-controller="ctrl">
 2 我喜歡的網站
 3         <select ng-model="myVar">
 4           <option >切換
 5           <option value="runoob">www.runoob.com
 6           <option value="google">www.google.com
 7           <option value="taobao">www.taobao.com
 8         </select>
 9         ​
10         <hr>
11         <div ng-switch="myVar">
12           <div ng-switch-when="runoob">
13              <h1>哈哈</h1>
14              <p>歡迎訪問</p>
15           </div>
16           <div ng-switch-when="google">
17              <h1>Google</h1>
18              <p>歡迎訪問Google</p>
19           </div>
20           <div ng-switch-when="taobao">
21              <h1>淘淘</h1>
22              <p>歡迎訪問淘淘</p>
23           </div>
24           <div ng-switch-default>
25              <h1>切換</h1>
26              <p>選擇不一樣選項顯示對應的值。</p>
27           </div>
28         </div>
29         <hr>
30 </body>
31     
32     <script type="text/javascript" src="js/angular.js"></script>
33     <script type="text/javascript">
34         angular.module("app",[])
35         .controller("ctrl",function($scope){
36 
37     </script>

 

結果：

 

3.2AngularJS中的事件

AngularJS中的事件有不少，小編只是給你們介紹一些比較經常使用的。

一、ng-click 定義AngularJS的點擊事件
ng-click只能觸發綁定在AngularJS的做用域上面的屬性和方法；

二、ng-foucus：得到焦點
三、ng-blur ：失去焦點
四、ng-change：內容改變

再次舉個栗子：

    <body ng-app="app" ng-controller="ctrl">
<button ng-click="func()">點我彈窗</button>
        <button ng-mouseover="func()">點我彈窗</button>
        <button ng-mouseout="func()">點我彈窗</button>
        <input type="text" ng-keydown="keydown()" />
</body>
    
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript">
        angular.module("app",[])
        .controller("ctrl",function($scope){
            $scope.func = function(){
                alert("哈哈哈");
            }
            $scope.keydown = function(){
                console.log(event.keyCode ==13);
            }
        })
    </script>

 結果：

 

4、AngularJS中的表單驗證及動畫

 

4.1表單驗證

一、表單中，經常使用的驗證操做
$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的表單驗證衝突；

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>AngularJS中的表單驗證</title>
 6         <link rel="stylesheet"href="css/bootstrap.css" />
 7         <style type="text/css">
 8             .row{
 9                 margin: 10px 0px;
10             }
11         </style>
12     </head>
13     <body ng-app="app" ng-controller="ctrl">
14         
15         
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 
74                     </form>
75                 </div>
76             </div>
77         </div>
78 
79         
80         
81     </body>
82     
83     <script type="text/javascript" src="js/angular.js"></script>
84     <script type="text/javascript">
85         angular.module("app",[])
86         .controller("ctrl",function(){
87             
88         })
89     </script>
90 </html>

 

結果：

 

4.2AngularJS中的動畫

 AngularJS中的動畫沒有css、js及jQuery那麼複雜；

在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         
44         angular.module("app",["ngAnimate"])
45         .controller("ctrl",function(){
46             
47         })
48     </script>
49 </html>

 結果：

 

5、AngularJS中的路由

路由算是AngularJS中最重要的功能之一，畢竟在前端網站中路由的應用十灰的常見：AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。經過 AngularJS 能夠實現多視圖的單頁Web應用（single page web application，SPA）。

1、在AngularJS中使用路由：
    1. 導入路由文件：angular-route.js
   
   2. 在主模塊中注入"ngRoute"。 

angular.module("app",["ngRoute"])


    
   3. 將超連接改寫爲路由格式。  -->  "#/標記"
     

   <a href="#/">首頁</a>   //首頁直接使用 #/ 表示
   <a href="#/page1">page1</a>  //其餘頁面"#/標記" 表示

        4. 在頁面的合適位置，添加ng-view，用於承載路由打開的頁面：       

 <div ng-view></div> //或者 <ng-view></ng-view>

該 div 內的 HTML 內容會根據路由的變化而變化。
    
    5. 在config配置階段，注入$routeProvider，進行路由配置：

複製代碼 
.config(function($routeProvider){
    $routeProvider
    .when("/",{template:'<h1 style="color:red;">這是首頁</h1>'})
    .when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
    .when("/page2",{templateUrl:"page.html",controller:function($scope){
        $scope.text = "這是ctrl不知道是幾控制器！！"
    }})
    .when("/page3",{templateUrl:"page.html"})
    .when("/page4",{})
    .otherwise({redirectTo:"/"})
})
複製代碼

2、AngularJS 路由也能夠經過不一樣的模板來實現。

$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數爲路由配置對象。

 

路由配置對象語法規則以下：

1 $routeProvider.when(url,{
2     template:string, //在ng-view中插入簡單的html內容
3     templateUrl:string, //在ng-view中插入html模版文件
4     controller:string,function / array, //在當前模版上執行的controller函數
5     controllerAs:string, //爲controller指定別名
6     redirectTo:string,function, //重定向的地址
7     resolve:object<key,function> //指定當前controller所依賴的其餘模塊
8 });

 


 3、路由對象中接受的可選參數：

 ① template： 自定義HTML模板，會直接將這段HTML記載到ng-view中；

.when("/page3",{templateUrl:"page.html"})


  ② templateUrl： 導入外部的HTML模板文件。 爲了不衝突，外部的HTML應該是一個代碼片斷，即只保留body之內的部分。

.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})


  ③ controller： 在當前HTML模板上，執行的controller函數。會生出新的做用域$scope. 能夠接受字符串(聲明好的controller名字),也能夠直接接受函數。

.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})


    
　　注意： 使用ng-view打開的頁面，controller中的做用域是屬於當前頁面做用域的子做用域！！ 依然符合Angular中父子做用域"能讀不能寫"的要求！
  　　因此： 若是須要在ng-view中修改當前做用域的變量，必須把這個變量聲明爲對象的屬性！！
  　　
  ④ redirectTo：重定向。通常用於.otherwise()中，用於重定向回首頁！

 

.otherwise({redirectTo:"/"})


最後舉個栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                overflow: hidden;
            }
            li{
                width: 100px;
                height: 40px;
                text-align: center;
                float: left;
                line-height: 40px;
                list-style: none;
                cursor: pointer;
            }
            li a{
                text-decoration: none;
                color: black;
            }
            li:hover{
                background-color: yellow;
            }
            #div1{
                width: 1000px;
                height: 500px;
                margin: 20px auto;
                border: 2px solid red;
            }
        </style>
    </head>
    
    <body ng-app="app" ng-controller="ctrl">
        
        <ul>
            <li><a href="#/">首頁</a></li>
            <li><a href="#/page1">page1</a></li>
            <li><a href="#/page2">page2</a></li>
            <li><a href="#/page3">page3</a></li>
            <li><a href="#/page4">page4</a></li>
        </ul>
        <input type="text" ng-model="test" />
        <input type="text" ng-model="obj.test" />
        
        
            
        <div id="div1" ng-view>
            
        </div>
        
            
        
    </body>
    
    <script src="js/angular.js" type="text/javascript"></script>
    <script src="js/angular-route.js" type="text/javascript"></script>
    <script type="text/javascript">

angular.module("app",["ngRoute"])
.config(function($routeProvider){
    $routeProvider
    .when("/",{template:'<h1 style="color:red;">這是首頁</h1>'})
    .when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
    .when("/page2",{templateUrl:"page.html",controller:function($scope){
        $scope.text = "這是ctrl不知道是幾控制器！！"
    }})
    .when("/page3",{templateUrl:"page.html"})
    .when("/page4",{})
    .otherwise({redirectTo:"/"})
})
.controller("ctrl",function($scope){
    $scope.test = "這是一段測試文字！";
    $scope.obj = {
        test:"這是一個測試對象！"
    }
})
.controller("ctrl1",function($scope){
    $scope.text = "這是ctrl1控制器！";
})







    </script>
    
</html>

 結果：

 

做者編

到此，AngularJS的基礎知識基本已經結束了。要知道，在不少公司中，AngularJS的應用要比jQuery要重要的多。不太小編對AngularJS的學習也並無結束。之後小編也會將更多的AngularJS以及其餘的前端知識帶給你們！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程