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

前言

对于AngularJS什么，小编在这就不多做介绍了。大家可以看小编的上一篇博客。

言归正传，小编在上一篇博客中介绍了AngularJS中的指令、表达式还有非常实用的三种服务。接下来，带大家看一看AngularJS中的$http、表格、dom及事件，当然还有其动画以及极其重要的路由。

一、AngularJS中的$http

作为一个前端程序猿，明白与后台数据的传递是灰常重要的。要知道，在前端常用的向后台传递数据的方式有：原生JS的ajax，jQuery中的ajax、表单的提交过程也是一种向后台数据传递的过程。最后，还有就是今天要将的AngularJS中的$HTTP了。当然，肯定还有其他的数据传递方式，小编以后会介绍给你们的。

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则通常被我们前端作为后台的替代。当然了，只供作为小小的后台数据使用，并不是后台。

直接上栗子：

<!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：

 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 ]

结果：

当然，他也有简写形式：

$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

二、AngularJS中的select和表格

因为AngularJS双向数据绑定的特性，AngularJS的获取数据也变得简单。接下来就带大家了解一下select和表格。

2.1AngularJS中的select

在AngularJS中，select下拉选项也分为两种，使用数组作为数据源和以对象作为数据源；

一、使用作为数据源；

1、item表示数组中的每一项！
2、循环中的option中，value的值，默认为item
3、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>

结果：

二、以对象作为数据源
1、 (key,value) 第一项表示对象的键，第二项表示对象的值；
2、 option的value，永远都是对象的值！
3、 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；

那么，我们来分析一下两者之间的不同：

1、ng-options使用时，是将指令添加在select上;
ng-repeat使用时，是将指令添加到option上；

2、 ng-options使用时，必须同步给select标签绑定ng-model；
ng-repeat使用时，不一定需要绑定ng-model

3、 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>

结果：

三、AngularJS中的DOM与事件

接下来给大家介绍一些AngularJS中的dom事件，在AngularJS中，大部分的dom事件都是通过其指令来实现；

3.1AngularJS中的DOM

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

2、ng-hide：是否隐藏；true表示隐藏，false表示不隐藏

3、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>

结果：

4、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>

结果：

5、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>

结果：

6、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>

结果：

7、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中的事件有很多，小编只是给大家介绍一些比较常用的。

1、ng-click 定义AngularJS的点击事件
ng-click只能触发绑定在AngularJS的作用域上面的属性和方法；

2、ng-foucus：获得焦点
3、ng-blur ：失去焦点
4、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>

结果：

四、AngularJS中的表单验证及动画

4.1表单验证

1、表单中，常用的验证操作
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时，必须给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等。。。
3、为了避免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=" 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中使用动画：
1、导入angular-animate.js
2、如果页面中没有自定义app模块，则可以直接绑定系统模块ng-app="ngAnimate"
如果页面中有自定义的app模块，则可以在自定义模块的数组中，注入ngAnimate。
eg：angular.module("app",["ngAnimate"])
3、当使用ng-show、ng-hide显示或隐藏元素的时候，系统会自动添加或移除.ng-hide这个class类
4、当使用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>

结果：

五、AngularJS中的路由

路由算是AngularJS中最重要的功能之一，毕竟在前端网站中路由的应用十灰的常见：AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

一、在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:"/"})
})

二、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 });

三、路由对象中接受的可选参数：

① 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以及其他的前端知识带给大家！！

相关阅读:
获取label标签内for的属性值-js
js万亿级数字转汉字的封装方法
 a标签的伪元素的应用——link，hover，visited，active
JS声明变量的写法
 VUE环境配置步骤及相关Git Bash命令的使用
 display:inline-block下，元素不能在同一水平线及元素间无margin间距的问题解决方法
 css变量的用法——(--cssName)
img的属性alt 与 title的区别
 返回结果的HTTP状态码——《图解http》第四章
 HTTP报文内部的HTTP信息——《图解HTTP》第三章
原文地址：https://www.cnblogs.com/zxt-17862802783/p/7747256.html