Angular整理

一、什么是MVC:
 
MVC是一种开发模式,由模型(Model)、视图(View)、控制器(Controller)3部分构成,采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。
 
     模型(Model)一般用来处理数据(读取/设置),一般指操作数据库。
     视图(View)一般用来展示数据,比如通过HTML展示。
     控制器(Controller)一般用做连接模型和视图的桥梁。
 
MVC更多应用在后端开发程序里,后被引入到前端开发中,由于受到前端技术的限制便有了一些细节的调整,进而出现了很多MVC的衍生版(子集)如MVVM、MVW、MVP、MV*等。
 
二、模块化(Module)
 
使用AngularJS构建应用(App)时是以模块化(Module)的方式组织的,即将整个应用划分成若干模块,每个模块都有各自的职责,最终组合成一个整体。
 
步骤1:定义应用:通过为任一HTML标签添加ng-app属性,可以指定一个应用,表示此标签所包裹的内容都属于应用(App)的一部分。
 
 
<html lang="en" ng-app="App">
 
步骤2:定义模块:AngularJS提供了一个全局对象angular,在此全局对象下存在若干的方法,其中angular.module()方法用来定义一个模块。
 
var App=angular.module('App',[]);
 
步骤3:定义控制器:控制器(Controller)作为连接模型(Model)和视图(View)的桥梁存在,所以当我们定义好了控制器以后也就定义好了模型和视图。
 
App.controller('DemoCtrl',['$scope',function($scope){
     $scope.name='Hello';
}])
 
模型(Model)数据是要展示到视图(View)上的,所以需要将控制器(Controller)关联到视图(View)上,通过为HTML标签添加ng-controller属性并赋值相应的控制器(Controller)的名称,就确立了关联关系。
 
<body ng-controller='DemoCtrl'>
     <h1>{{name}}</h1>
</body>
 
三、指令
 
(1)内置指令
 
ng-app 指定应用根元素,至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示,true显示、false不显示
ng-hide控制元素是否隐藏,true隐藏、false不隐藏
ng-if控制元素是否“存在”,true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
 
(2)自定义指令
 
AngularJS允许根据实际业务需要自定义指令,通过angular全局对象下的directive方法实现。
 
var App=angular.module('App',[]);
App.directive('tagName',function($scope){
     return {
         //自定义指令类型EACM
         restrict : 'EA',
         //是否替换原有标签
         replace : true,
         //指令模板
         template : '<h1>hello</h1>',
         //指令外部模板
         // tempalteURL : '01.html'
     }
});
//E 代表元素指令 Element
//A 代表属性执行 Attribute
//M 代表注释指令 Mark
//C 代表class执行 Class
实际案例
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 自定义指令</title>
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
 
    <div class="box" ng-controller="DemoCtrl">
        <ul>
            <li demo></li>
        </ul>
        <demo></demo>
        <div class="demo"></div>
        <!-- directive:demo -->
    </div>
 
    <script>
        var App = angular.module('App', []);
 
        // 定义指令
        App.controller('DemoCtrl', ['$scope', function ($scope) {
 
        }]);
 
        // App模块实例下 有若干方法, directive 方法用来定义一个指令
        // 需要两个参数
        // 第1个 指令的名称
        // 第2个 指令的逻辑
        App.directive('demo', function () {
            // console.log(1);
            // 要求必须返回一个值(对象/函数)
            // 对象有一定要求
            return {
                // A attribute 表示此指令可以通过属性来使用
                // E element 表示此指令可以通过标签来使用
                // C class 表示此指令可以通过类名来使用
                // M Mark 表示此指令可以通过注释来使用
                restrict: 'ECMA',
                // template: '<h1>hello AngularJS!</h1>',
                replace: true,
                // 引入一个外部分文件
                templateUrl: './list.html',
                link: function () {},
                compile: function () {},
                scope: {}
            }
        });
 
        // 上述代码定义了一个非常基本的指令(只满足了语法)
        // 其使用方法与内置指令一样
    </script>
</body>
</html>
 
四、数据绑定
 
AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller)展示到视图(View)中。
 
所谓数据绑定指的就是将模型(Model)中的数据与相应的视图(View)进行关联,分为单向绑定和双向绑定两种方式。
 
(1)单向绑定
 
单向数据绑定是指将模型(Model)数据,按着写好的视图(View)模板生成HTML标签,然后追加到DOM中显示,只能模型(Model)数据向视图(View)传递。
 
(2)双向绑定
 
双向绑定则可以实现模型(Model)数据和视图(View)模板的双向传递,如下图所示。
 
(3)相关指令
a)在AngularJS中通过“{{}}”和ng-bind指令来实现模型(Model)数据向视图模板(View)的绑定,模型数据通过一个内置服务$scope来提供,这个$scope是一个空对象,通过为这个对象添加属性或者方法便可以在相应的视图(View)模板里被访问。
注:“{{}}”是ng-bind的简写形式,其区别在于通过“{{}}”绑定数据时会有“闪烁”现象,添加ng-cloak也可以解决“闪烁”现象。
 
b)通过为表单元素添加ng-model指令实现视图(View)模板向模型(Model)数据的绑定。
 
c)通过ng-init可以初始化模型(Model)也就是$scope。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-init指令</title>
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
    <!-- 通过ng-init指令也可以定义模型数据 -->
    <div ng-init="name='小红'; age=18">
        <h1>{{name}}{{age}}</h1>
    </div>
    <script>
        var App = angular.module('App', []);
 
        App.controller('DemoCtrl', ['$scope', function ($scope) {
            // 定义模型数据不局限于下面方式
            $scope.name = '小明';
        }]);
    </script>
</body>
</html>
 
 
d)AngularJS对事件也进行了扩展,无需显式的获取DOM元素便可以添加事件,易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀,然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等
 
e)通过ng-repeat可以将数组或对象数据迭代到视图模板中,ng-switch、on、ng-switch-when可以对数据进行筛选。
 
五、作用域
 
通常AngularJS中应用(App)是由若干个视图(View)组合成而成的,而视图(View)又都是HTML元素,并且HTML元素是可以互相嵌套的,另一方面视图都隶属于某个控制器(Controller),进而控制器之间也必然会产生嵌套关系。
 
每个控制器(Controller)又都对应一个模型(Model)也就是$scope对象,不同层级控制器(Controller)下的$scope便产生了作用域。
 
(1)根作用域
 
一个AngularJS的应用(App)在启动时会自动创建一个根作用域$rootScope,这个根作用域在整个应用范围(ng-app所在标签以内)都是可以被访问到的。
 
(2)子作用域
 
通过ng-controller指令可以创建一个子作用域,新建的作用域可以访问其父作用域的数据。
 
六、过滤器
 
在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。
 
(1)内置过滤器
 
1、currency[货币] 将数值格式化为货币格式
2、date日期格式化,年(y)、月(M)、日(d)、星期(EEEE/EEE)、时(H/h)、分(m)、秒(s)、毫秒(.sss),也可以组合到一起使用。
3、filter在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前(正数)几位或后(负数)几位
6、lowercase将文本转换成小写格式
7、uppercase将文本转换成大写格式
8、number数字格式化,可控制小位位数
9、orderBy对数组进行排序,第2个参数是布尔值可控制方向(正序或倒序)
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 过滤器</title>
    <script src="./libs/angular.min.js"></script>
    <style>
        dl, dt, dd {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body ng-app="App">
    <div ng-controller="DemoCtrl">
        <dl>
            <dt>AngularJS过滤器</dt>
            <dd>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss EEEE'}}</dd>
            <dd>商品价格为: {{price|currency:'¥':4}}</dd>
            <dd>介绍: {{info|limitTo:-2}}</dd>
            <dd>数组: {{list|limitTo:-2}}</dd>
            <dd>转小写: {{brief|lowercase}}</dd>
            <dd>转大写: {{brief|uppercase}}</dd>
            <dd>处理数字: {{num|number:2}}</dd>
            <dd>排序数据: {{students|orderBy:'score':true}}</dd>
            <dd>处理成json: {{obj|json}}</dd>
            <dd>筛选数据: {{list|filter:'p'}}</dd>
            <dd>筛选数据: {{students|filter:{age:18} }}</dd>
            <dd>过滤器连写: {{info|uppercase|limitTo:2}}</dd>
        </dl>
        <table>
            <tr ng-repeat="student in students|orderBy:'score'">
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.score}}</td>
            </tr>
        </table>
    </div>
    <script>
        var App = angular.module('App', []);
 
        App.controller('DemoCtrl', ['$scope', function ($scope) {
            $scope.now = new Date;
 
            // 使用 currency 这个过滤器可以指定货币类型
            $scope.price = 12.345;
 
            // 使用 limitTo 这个过滤器可以截取字符串
            $scope.info = 'my name is itcast';
 
            // 使用 limitTo 这个过滤器可以截取数组
            $scope.list = ['javascript', 'php', 'html', 'css', 'java'];
 
            // lowercase 这个过滤器可以将字母转成小写
            // uppercase 这个过滤器可以将字母转成大写
 
            $scope.brief = 'my Name IS itcast';
 
            // number 这个过滤器可以处理数字格式
            $scope.num = 23.12345;
 
            // orderBy 这个过滤器可以对数组数据进行排序
            $scope.students = [
                {name: '小明', age: 18, score: 98},
                {name: '小红', age: 17, score: 94},
                {name: '小米', age: 19, score: 97},
                {name: '小花', age: 16, score: 92},
                {name: '小李', age: 20, score: 95},
                {name: '小黄', age: 18, score: 99}
            ]
 
            $scope.obj = {
                name: '小明'
            }
        }])
    </script>
</body>
</html>
 
(2)自定义过滤器
 
除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 自定义过滤器</title>
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
 
    <div ng-controller="DemoCtrl">
        <h1>{{name|demo:'a':'b'}}</h1>
        <p>{{info|capitalize}}</p>
    </div>
 
    <script>
        var App = angular.module('App', []);
 
        // 定义一个控制器 controller
        App.controller('DemoCtrl', ['$scope', function ($scope) {
            //
            $scope.name = 'itcast';
 
            $scope.info = 'my name is itcast!';
        }]);
 
        // 定义一个指令 directive
        App.directive('demo', function () {
            //
        });
 
        // 定义一个过滤器 filter
        // 需要两个参数
        // 第1个过滤器名字
        // 第2个依赖关系
        App.filter('demo', function () {
 
            // 必须要返回一个函数
            return function (arg, arg1, arg2) {
                // 在此完成数据格式化处理的逻辑
                // 并且 Angularjs 会将需要格式化处理的
                // 数据当成第一个参数传递进来
                console.log(arg, arg1, arg2)
 
                return '你好 ' + arg;
            }
        });
 
        // 上述定义了最基本的过滤器,其使用方法与内置一样
 
        App.filter('capitalize', function () {
            return function (input) {
 
                return input[0].toUpperCase() + input.slice(1);
            }
        });
    </script>
</body>
</html>
 
 
七、依赖注入
 
(1)行内注入(推荐使用)
 
以数组形式明确声明依赖,数组元素都是包含依赖名称的字符串,数组最后一个元素是依赖注入的目标函数。
 
(2)推断式注入
 
没有明确声明依赖,AngularJS会将函数参数名称当成是依赖的名称。
 
这种方式会带来一个问题,当代码经过压缩后函数的参数被压缩,这样便会造成依赖无法找到。
 
八、服务
 
服务是一个对象或函数,对外提供特定的功能。
 
(1)内置服务
 
1、$log打印调试信息
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 内置服务</title>
    <script src='./libs/angular.min.js'></script>
</head>
<body ng-app="App">
    <div ng-controller="DemoCtrl">
        <h1>{{name}}</h1>
    </div>
    <script>
        var App = angular.module('App', []);
 
        // 在现实开发,经常性做一些调试信息的输出
        // 调试的级别是不一样的
        // notice warning error
 
        // AngularJS 将调试信息级别做了封装
        // 封装成了一个服务(名称为$log),开发过程中只需要调用这个服务即可
 
        // 当前开发依赖一个 $log 的通用功能(服务)
        App.controller('DemoCtrl', ['$scope', '$log', function ($scope, $log) {
 
            // $log 是一个对象,对外开放一些方法
 
            $log.log('信息'); // console.log()
 
            $log.info('信息'); // console.info()
 
            $log.error('信息'); // console.error()
 
            $log.warn('信息'); // console.warn()
 
            // 可以通 配置 服务将此功能打开
            $log.debug('信息');
 
            // console.log();
 
        }])
 
    </script>
</body>
</html>
 
2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 内置服务</title>
    <script src='./libs/angular.min.js'></script>
</head>
<body ng-app="App">
    <div ng-controller="DemoCtrl">
        <p>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss'}}</p>
        <button ng-click="stop()">停止</button>
    </div>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoCtrl', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
             $scope.now = new Date();
            var timer = $interval(function () {
                $scope.now = new Date();
            }, 1000);
 
            $scope.stop = function () {
                $interval.cancel(timer);
            }
        }])
 
    </script>
</body>
</html>
 
3、$filter在控制器中格式化数据。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 内置过滤器</title>
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
 
    <div ng-controller="DemoCtrl">
        <ul>
            <li>{{now}}</li>
            <li>{{price}}</li>
            <li>{{list}}</li>
            <li>{{arr}}</li>
        </ul>
    </div>
 
    <script>
        var App = angular.module('App', []);
 
        // 有如下需求
        // 希望在 非视图 中对数据进行格式化处理
 
        // 在 AngularJS 中可以使用 $filter 这个服务
        // 在 非视图 中对数据进行格式化处理
 
        App.controller('DemoCtrl', ['$scope', '$filter', function ($scope, $filter) {
            // filter 可以将数据格式化
 
            // $filter 是一个函数,并且可以接收一些数
            // 根据参数的不同,$filter 所能处理的数据
            // 格式也不同,举例说明
 
            var date = $filter('date'); // 返回值也为函数
 
            $scope.now = date(new Date(), 'yyyy-MM-dd hh:mm:ss');
 
            var currency = $filter('currency'); // 返回值也为函数
 
            $scope.price = currency(12.345, '¥');
 
            var filter = $filter('filter'); // 返回值也为函数
 
            $scope.list = filter(['html', 'css', 'javascript', 'php'], 'p');
 
            var limitTo = $filter('limitTo'); // 返回值也为函数
 
            $scope.arr = limitTo(['html', 'css', 'js'], 2);
        }]);
 
        // 自定义的过滤器也可以当成参数传递
    </script>
</body>
</html>
 
4、$http用于向服务端发起异步请求。
同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 内置服务</title>
    <script src='./libs/angular.min.js'></script>
</head>
<body ng-app="App">
    <div ng-controller="DemoCtrl">
 
    </div>
    <script>
        var App = angular.module('App', []);
 
        // 使用AngularJS需要发送一个异步请求到服务器
        // 服务器返回给前端一个数据
        // 并且将数据显示到页面上
 
        // AngluarJS 中有一个服务叫 $http 可以发送
        // 异步请求
 
        App.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
            //
            // $scope.name = '小明';
 
            // $http 是一个函数
            $http({
                url: '', // 请求地址
                method: '', // 请求方式
                data: '', // post 方式的数据
                params: '', // get 方式的数据
                headers: {
                    // 请求头信息
                    // Content-Type
                }
            }).then(function (data) {
                // 成功后的回调
            }, function () {
                // 失败后的回调
            });
 
        }])
    </script>
</body>
</html>
post传参实例
 
var App = angular.module('App', []);
 
        App.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
 
            $http({
                url: './post.php',
                method: 'post',
                // 使用 data 来传递 post 请求的数据
                // data: {name: 'itcast', age: 10},
                data: 'name=itcast&age=10',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function (res) {
                // res.data;
            })
        }]);
 
注意:jsonp的传输数据的方式是get方式。
 
(2)自定义服务
 
通过上面例子得知,所谓服务是将一些通用性的功能逻辑进行封装方便使用,AngularJS允许将自定义服务。
 
1、factory方法
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 自定义服务</title>
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
    <div ng-controller="DemoCtrl">
        <h1>{{now}}{{time}}</h1>
    </div>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoCtrl', ['$scope','showTime', function($scope,showTime) {
 
            $scope.now = showTime.now;
 
            $scope.time = showTime.format('hh:mm:ss');
 
        }])
 
        App.factory('showTime', ['$filter', function ($filter) {
            return {
                now: $filter('date')(new Date(), 'yyyy-MM-dd'),
                format: function (arg) {
                    return $filter('date')(new Date(), arg);
                }
            }
        }])
    </script>
</body>
</html>
 
2、service方法
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 自定义服务</title>
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
    <div ng-controller="DemoCtrl">
        <h1>{{name}}</h1>
        <h1>{{now}}</h1>
        <h1>{{time}}</h1>
    </div>
    <script>
        var App = angular.module('App', []);
 
        // controller 定义控制器
        App.controller('DemoCtrl', ['$scope', 'showTime', function ($scope, showTime) {
 
            $scope.now = showTime.now;
 
            $scope.time = showTime.format('hh:mm:ss');
 
        }])
        App.service('showTime', ['$filter', function ($filter) {
            this.now = $filter('date')(new Date(), 'yyyy-MM-dd');
            this.format = function (arg) {
                return $filter('date')(new Date(), arg);
            }
        }]);
    </script>
</body>
</html>
 
在介绍服务时曾提到服务本质就是一个对象或函数,所以自定义服务就是要返回一个对象或函数以供使用。
 
九、模块加载
 
服务也是模块形式存在的对且对外提供特定功能,前面学习中都是将服务做为依赖注入进去的,然后再进行调用,除了这种方式外我们也可以直接运行相应的服务模块,AngularJS提供了run方法来实现。
配置块
 
App.config(['$filterProvider', function ($filterProvider) {
            // "provider" 一般开放一些方法,通过这些方法来实现具体的配置
 
            $filterProvider.register('capitalize', function () {
 
                return function (arg) {
                    // console.log(arg)
 
                    return arg[0].toUpperCase() + arg.slice(1);
                }
            });
        }]);
 
运行块
 
 App.run(['$log', '$http', '$rootScope', function ($log, $http, $rootScope) {
 
            $http({
                url: './example.php'
            });
        }]);
 
不但如此,run方法还是最先执行的,利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行,比如验证用户是否登录,未登录则不允许进行任何其它操作。
 
十、路由
 
(1)SPA
 
SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个“原生”应用。
 
在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,所以当再次刷新页面时新添加的DOM元素会“丢失”,通过单页面应可以很好的解决这个问题。
 
(2)路由
 
在后端开发中通过URL地址可以实现页面(视图)的切换,但是AngularJS是一个纯前端MVC框架,在开发单页面应用时,所有功能都在同一页面完成,所以无需切换URL地址(即不允许产生跳转),但Web应用中又经常通过链接(a标签)来更新页面(视图),当点击链接时还要阻止其向服务器发起请求,通过锚点(页内跳转)可以实现这一点。
实现单页面应用需要具备:
a、只有一页面
b、链接使用锚点
 
 
通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化,进而可以实现为不同的锚点准不同的视图,单页面应用就是基于这一原理实现的。
AngularJS对这一实现原理进行了封装,将锚点的变化封装成路由(Route),这是与后端路由的根本区别。
 
使用:
1、引入angular-route.js
 
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
 
2、实例化模块(App)时,当成依赖传进去(模块名称ngRoute)
 
var App=angular.module('App',['ngRoute']);
 
3、配置路由模块
 
App.config(['$routeProvider',function($routeProvider){
     $routeProvider.when('/',{
          template : '首页'
     })
}])
 
4、布局模板
 
通过ng-view指令布局模板,路由匹配的视图会被加载渲染到些区域。
 
<div ng-view></div>
 
整理一下就是:
 
        var App = angular.module('App', ['ngRoute']);
 
        // 需要配置路由
        App.config(['$routeProvider', function ($routeProvider) {
 
            $routeProvider.when('/register', {
                // template: '<h1>login</h1>'
                templateUrl: './views/register.html'
            }).when('/login', {
                templateUrl: './views/login.html'
            }).when('/list', {
                templateUrl: './views/list.html',
                controller: 'ListCtrl'
            }).when('/404', {
                templateUrl: './views/404.html'
            }).otherwise({
                redirectTo: '/404'
            });
        }]);
 
        App.controller('ListCtrl', ['$scope', function ($scope) {
            $scope.lists = ['html', 'css', 'js', 'php'];
        }])
 
路由参数:
 
1、提供两个方法匹配路由,分别是when和otherwise,when方法需要两个参数,otherwise方法做为when方法的补充只需要一个参数,其中when方法可以被多次调用。
 
2、第1个参数是一个字符串,代表当前URL中的hash值。
 
3、第2个参数是一个对象,配置当前路由的参数,如视图、控制器等。
  a、template 字符串形式的视图模板
  b、templateUrl 引入外部视图模板
  c、controller 视图模板所属的控制器
  d、redirectTo跳转到其它路由
 
4、获取参数,在控制中注入$routeParams可以获取传递的参数
 
.when('./index/:id',{
     template: 'Index Page',
     controller: 'IndexController'
})
App.controller('IndexController',['$scope','$routeParams',function($scope,$routeParams){
     
}])
进一步强化:
// AngularJS 地址参数有两种写法
        // 1、在地址上通过 ? 进行传递,其格式为 key=val&key1=val1
        // 2、在when方法中第一个参数中进行设置,其格式为 :key
 
        App.config(['$routeProvider', function ($routeProvider) {
 
            $routeProvider.when('/register/id/:id/page/:page/pass/:pass', {
                // 加载外部文件
                templateUrl: './views/register.html',
                controller: 'RegisterCtrl'
            }).when('/login', {
                // 加载外部文件
                templateUrl: './views/login.html',
                controller: 'LoginCtrl'
            }).when('/list', {
                // 加载外部文件
                templateUrl: './views/list.html',
                // 定义控制器
                controller: 'ListCtrl'
            });
        }]);
 
 
十一、jquery lite
 
在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,通过angular.element不能选择元素,但可以将一个DOM元素转成jQuery对象,如果引提前引入了jQuery则angular.element则完全等于jQuery。
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 中使用 jQuery</title>
    <script src="./libs/jquery-1.7.2.min.js"></script>
    <script src="./libs/angular.min.js"></script>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #CCC;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>点击</button>
    <script>
        // AngularJS 中提供了一个方法 element()
        // 通过这个方法可以将 一个原生 DOM 对象
        // 转换成一个 jQuery 对象
 
        // 1、获取原生DOM
        var box = document.querySelector('.box');
        var btn = document.querySelector('button');
 
        // 2、转成 jQuery 对象
        var jqBox = angular.element(box);
        var jqBtn = angular.element(btn);
 
 
        jqBtn.on('click', function () {
            jqBox.animate({
                width: 200,
                height: 200
            }, 500);
        });
    </script>
</body>
</html>
 
 
 
 
 
 
 
 
 
posted @ 2017-06-22 19:50  admin-NaN  阅读(576)  评论(0编辑  收藏  举报