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

前言

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

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

一、AngularJS中的$http

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

1.1AngularJS中的$thhp

AngularJS中的$http的基本样式比较简单，

 $http({

 method:"get/post", /*请求的方法*/

 url:" " /*请求的地址*/

 }).then(function(classes){

 /*请求成功的回调函数*/

 },function(){

 /*请求失败的回调函数*/

 });

我们实现一个请求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：

 [

     {

         "name": "张三",

         "age": 17,

         "hobby": [

             "吃",

             "喝",

             "玩",

             "乐"

         ],

         "score":{

             "math":48,

             "chinese":59

         }

     },

     {

         "name": "张三",

         "age": 17,

         "hobby": [

             "吃",

             "喝",

             "玩",

             "乐"

         ],

         "score":{

             "math":88,

             "chinese":99

         }

     },

     {

         "name": "张三",

         "age": 17,

         "hobby": [

             "吃",

             "喝",

             "玩",

             "乐"

         ],

         "score":{

             "math":68,

             "chinese":89

         }

     },

     {

         "name": "张三",

         "age": 17,

         "hobby": [

             "吃",

             "喝",

             "玩",

             "乐"

         ],

         "score":{

             "math":78,

             "chinese":89

         }

     }

 ]

结果：

当然，他也有简写形式：

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

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

不过需要注意，post的缩写格式会出现内部服务器错误，大家先了解这种方式，小编后续会解决这个问题

举个栗子：

             $http.get("angularJs.json",{/*需要传递到后台的参数*/}).then(function(){

                 alert("请求成功！")

                 },function(){

                 alert("请求失败！");

             })

         })

二、AngularJS中的select和表格

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

2.1AngularJS中的select

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

一、使用作为数据源；

1、item表示数组中的每一项！
2、循环中的option中，value的值，默认为item
3、option显示出的内容(<option></option>标签中的文字)是由item.site for 决定！！

再举例：

 <body ng-app="app" ng-controller="ctrl">

         <select ng-model="site3">

             <option ng-repeat="item in options">{{item}}</option>

         </select>

         <pre>{{site3}}</pre>

 </body>

 <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

             $scope.options = ["张三","李四","王二麻子","赵六","李胖"];

 </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是一样的方法，只要明白如何取值，那么表格就只是样式的问题了。

疯狂举栗子：

     <body ng-app="app" ng-controller="ctrl">

 　　　　<table width="400" border="1">

             <tr>

                 <th>序号</th>

                 <th>姓名</th>

             </tr>

             <tr ng-repeat="item in options">

                     <!--ng-repeat遍历是，$index 表示当前的行索引！-->

                 <td>{{$index + 1}}</td>

                 <td>{{item}}</td>

             </tr>

         </table>

     </body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

         $scope.options = ["张三","李四","王二麻子","赵六","李胖"];

 　　</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表示通用，所以，在事件的前面加上“！”；这只是个人习惯问题，没有规定必须；

举个栗子：

 <body ng-app="app" ng-controller="ctrl">

         <!--

             ng-disabled="true/false";

             传入true表示禁用，传入false表示可用

         -->

         <button ng-disabled="!myCheck">按钮</button>

         <label>

             <input type="checkbox" ng-model="myCheck" />是否同意

         </label>

         <p>{{myCheck}}</p>

         <hr />

         <label>

             <input type="checkbox" ng-model="myShow" />是否显示

         </label>

         <p ng-show="myShow">我显示出来啦！</p>

         <hr />

         <label>

             <input type="checkbox" ng-model="myHide" />是否隐藏

         </label>

         <p ng-hide="myHide">我显示出来啦！</p>

 </body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

         })

     </script>

结果：

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

当传入true显示，传入false移除
效果与ng-hide相同，但是ng-hide是将元素隐藏，而ng-if是将元素在DOM中移除！！！

     <body ng-app="app" ng-controller="ctrl">

 　　　　　<label>

             <input type="checkbox" ng-model="myIf" />是否移除

         </label>

         <p ng-if="!myIf">我显示出来啦！</p>

         <hr />

 　　</body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

     })

     </script>

结果：

5、ng-checked:传入true当前的复选框被选中

再次疯狂举栗子：

     <body ng-app="app" ng-controller="ctrl">

 　　　　　<input type="checkbox" ng-model="all"> Check all<br><br>

         <input type="checkbox" ng-checked="all">Volvo<br>

         <input type="checkbox" ng-checked="all">Ford<br>

         <input type="checkbox" ng-checked="all">Mercedes

 　　</body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

     </script>

结果：

6、ng-class :用于设置给元素添加class类

可选值有以下几种情况：
①可以是字符串。表示直接给元素添加对应的class。多个class之间用空格分隔；
②可以是对象，对象的键表示class名字，对象的值为true或false，当为true时表示添加对应的class
③可以是数组，数组中的值可以是字符串或对象，判断同上

举栗子：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .div{

                 width: 200px;

                 height: 200px;

                 background-color: cadetblue;

             }

             .div1{

                 width: 200px;

                 height: 200px;

                 background-color: blueviolet;

             }

             .div3{

                 color: red;

             }

         </style>

     </head>

     <body ng-app="app" ng-controller="ctrl">

         <div ng-class="'div'">这是一个div</div>

         <label>

             <input type="checkbox"ng-model="myClass"/>给div添加样式？

         </label>

         <div ng-class="{'div':myClass,'div1':!myClass}">zheshi</div>

         <hr/>

         <div ng-class="[{'div':myClass,'div1':!myClass},'div3']">haha</div>

         <hr/>

 </body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

         })

     </script>

 </html>

结果：

7、ng-switch根据变量的值进行选择

再次举例：

     <body ng-app="app" ng-controller="ctrl">

 我喜欢的网站

         <select ng-model="myVar">

           <option >切换

           <option value="runoob">www.runoob.com

           <option value="google">www.google.com

           <option value="taobao">www.taobao.com

         </select>

         

         <hr>

         <div ng-switch="myVar">

           <div ng-switch-when="runoob">

              <h1>哈哈</h1>

              <p>欢迎访问</p>

           </div>

           <div ng-switch-when="google">

              <h1>Google</h1>

              <p>欢迎访问Google</p>

           </div>

           <div ng-switch-when="taobao">

              <h1>淘淘</h1>

              <p>欢迎访问淘淘</p>

           </div>

           <div ng-switch-default>

              <h1>切换</h1>

              <p>选择不同选项显示对应的值。</p>

           </div>

         </div>

         <hr>

 </body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function($scope){

     </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的表单验证冲突；

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>AngularJS中的表单验证</title>

         <link rel="stylesheet"href="css/bootstrap.css" />

         <style type="text/css">

             .row{

                 margin: 10px 0px;

             }

         </style>

     </head>

     <body ng-app="app" ng-controller="ctrl">

         <div class="container" style="width: 400px;margin: 50px auto; padding: 0px;">

             <div class="panel panel-primary">

                 <div class="panel-heading">

                     <div class="panel-title" style="text-align: center;">

                         用户注册

                     </div>

                 </div>

                 <div class="panel-body">

                     <form class="form-horizontal" name="form" novalidate>

                         <div class="row">

                             <div class="col-xs-4">用户名：</div>

                             <div class="col-xs-8">

                                 <input type="text" class="form-control" name="name" ng-model="user.name " required ng-minlength="6" ng-maxlength="12" />

                                 <p style="margin: 0px;color: red;" ng-show="form.name .$invalid && form.name .$dirty">

                                     <span ng-show="form.name .$error.required">用户名必须填写</span>

                                     <span ng-show="form.name .$error.minlength">用户名长度最小为6位</span>

                                     <span ng-show="form.name .$error.maxlength">用户名长度最大为12位</span>

                                 </p>

                             </div>

                         </div>

                         <div class="row">

                             <div class="col-xs-4">邮箱：</div>

                             <div class="col-xs-8">

                                 <input type="email" class="form-control" name="email" ng-model="user.email" required/>

                                 <p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty">

                                     <span ng-show="form.email.$error.required">邮箱必须填写</span>

                                     <span ng-show="form.email.$error.email">邮箱不合法</span>

                                 </p>

                             </div>

                         </div>

                         <div class="row">

                             <div class="col-xs-4">密码：</div>

                             <div class="col-xs-8">

                                 <input type="passward" class="form-control" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$"/>

                                 <p style="margin: 0px;color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty">

                                     <span ng-show="form.pwd.$error.pattern">密码只能由6-18位字母数字下划线组成</span>

                                 </p>

                             </div>

                         </div>

                         <div class="row">

                             <div class="col-xs-4">确认密码：</div>

                             <div class="col-xs-8">

                                 <input type="passward" class="form-control" name="repwd" ng-model="user.repwd" required />

                                 <p style="margin: 0px;color: red;" ng-show="form.repwd.$dirty && user.pwd!=user.repwd">两次密码输入不一致</p>

                             </div>

                         </div>

                         <div class="row">

                             <div class="col-xs-6">

                                 <input type="submit" value="注册" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd" required />

                             </div>

                             <div class="col-xs-6">

                                 <input type="submit" value="重置" class="btn btn-warning" />

                             </div>

                         </div>

                     </form>

                 </div>

             </div>

         </div>

     </body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         angular.module("app",[])

         .controller("ctrl",function(){

         })

     </script>

 </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{} 隐藏后

再再举个栗子：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .div{

                 width: 200px;

                 height: 200px;

                 background-color: green;

                 transition: all 2s ease;

             }

             .ng-hide{

                 width: 100px;

                 height: 100px;

                 background-color: cadetblue;

                 /*margin-left: -100px;*/

             }

             .ng-enter-active,.ng-leave{

                 width: 200px;

                 height: 200px;

                 background-color: red;

             }

             .ng-enter,.ng-leave-active{

                 width: 0px;

                 height: 0px;

                 /*margin-left: -200px;*/

             }

         </style>

     </head>

     <body ng-app="app" ng-controller="ctrl">

         <input type="checkbox"ng-model="myCheck" />是否隐藏div？

         <div class="div"ng-hide="myCheck">hahaha</div>

         <input type="checkbox"ng-model="myIf" />是否隐藏div？

         <div class="div"ng-if="!myIf">hahaha</div>

     </body>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript" src="js/angular-animate.js"></script>

     <script type="text/javascript">

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

         .controller("ctrl",function(){

         })

     </script>

 </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 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

 $routeProvider.when(url,{

     template:string, //在ng-view中插入简单的html内容

     templateUrl:string, //在ng-view中插入html模版文件

     controller:string,function / array, //在当前模版上执行的controller函数

     controllerAs:string, //为controller指定别名

     redirectTo:string,function, //重定向的地址

     resolve:object<key,function> //指定当前controller所依赖的其他模块

 });

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

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