AngularJs之路由

AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。通俗来讲，ng-route模块中的$routeService监测$location.url()的变化，并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。下面首先给出$route的使用示例

ngRouter基本使用

这是一个最基本的路由，运行成功显示Hello Router，
Angular的ng-include、ng-router使用了XMLHttpRequest对象，需通过http访问！

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/angular.min.js"></script>
    <script>
    var app = angular.module('app',['ngRoute']);
        app.config(function($routeProvider){
            $routeProvider.when('/one',{
                template:'<div>Hello Router</div>'
            });
        });
    </script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

以上html引入两个js文件：angular.min.js、angular-route.min.js
angular-route.min.js压缩后只有5KB，
为了减少http请求，我把它合并到1个js文件里了。

ngRouter基本配置

var app = angular.module('app',['ngRoute']);
//引入依赖的模块ngRoute
app.config();
//传入一个匿名函数
//在匿名函数中注入依赖：$routeProvider
$routeProvider.when();
//when()两个参数(路径，对象)
//when()第二个对象：
//指定使用哪个控制器controller：ctrlName，
//指定模板template：'<div></div>'
//或者templateUrl：tplName.html

ngRouter高级使用

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title><script src="js/angular.min.js"></script>
    <script>
    var app = angular.module('app',['ngRoute']);
        app.controller('oneCtrl',function($scope){
            $scope.name='hello oneCtrl'
        });
        app.controller('twoCtrl',function($scope){
            $scope.str='hello twoCtrl'
        });
        app.config(function($routeProvider){
            $routeProvider.when('/one',{
                template:'<div class="one"> {{name}} <a href="#/tow">下一页</a></div>',
                controller:'oneCtrl'
            }).when('/tow',{
                template:'<div class="tow">{{str}} <a href="#/one">下一页</a></div>',
                controller:'twoCtrl'
            });
        });
    </script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

高级用法涉及到了controller，在实际应用中会经常把路由和控制配合使用。

ngRouter实战

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title><script src="js/angular.min.js"></script>
    <script>
    var app = angular.module('app',['ngRoute']);
        app.controller('oneCtrl',function($scope){
            $scope.name='hello oneCtrl'
        });
        app.controller('twoCtrl',function($scope){
            $scope.str='hello twoCtrl'
        });
        app.config(function($routeProvider){
            $routeProvider.when('/one',{
                templateUrl:'two.html',//此处指向了一个html文件（文件内容同上）
                controller:'oneCtrl'
            }).when('/tow',{
                templateUrl:'two.html',//此处指向了一个html文件（文件内容同上）
                controller:'twoCtrl'
            }).otherwise({
                //其他路径（未定义的），一律跳转到指定路径（一般指向首页）
                redirectTo:'/one'
            });
        });
    </script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

ngRoute很容易上手，实际项目中一般多用templateUrl指定模板，
也可以在模板里用ng-include进行嵌套，需要注意的是：
ng-include=””，引号内的值一般被angular认为是变量，
正确的写法应该是：ng-include=”‘xxx.html’”