AngularJS路由

AngularJS路由

需要引用angular-route.min.js 文件，

特别说明，默认的路由不能指定远程文件，异步加载

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。
AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

使用步骤：

1.载入实现路由的js文件：angular-route.js

2.使用ngView指定

<div ng-view></div>

3.创建包含了ngRoute模块作为主应用的依赖模块。

4.配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

• 第一个参数是 URL 或者 URL 正则规则。
• 第二个参数是路由配置对象。

AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：

$routeProvider.when(url,{
    template: string,templateUrl: string,controller: string,function 或 array,controllerAs: string,redirectTo: string,function,resolve: object<key,function>
});

参数说明：

1.template：如果我们仅需要在ng-view中插入简单的html内容，则使用该参数：

.when('/computers',{template:'这是电脑分类页面'})

如果我们需要在ng-view中插入HTML模板文件，则使用该参数

$routeProvider.when('/computers',{
    templateUrl: 'views/computers.html',});

4.controllerAs:

string类型，为controller指定别名。

5.redirectTo:

重定向的地址。

6.resolve

指定当前controller所依赖的其他模块。

实例1、指定简单内容模板

引用：

<script src="../Scripts/jquery-1.11.3.min.js"></script>
<link href="../Scripts/Bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/Bootstrap-3.3.6/js/bootstrap.min.js"></script>
<script src="../Scripts/angularjs-1.5.6/angular.min.js"></script>
<script src="../Scripts/angularjs-1.5.6/angular-route.min.js"></script>

<div class="container" ng-app="routingDemoApp">
    <h2>AngularJs 路由应用</h2>
    <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#/">首页</a></li>
        <li role="presentation"><a href="#/computers">电脑</a></li>
        <li role="presentation"><a href="#/printers">打印机</a></li>
        <li role="presentation"><a href="#/blabla">其他</a></li>
    </ul>
    <div ng-view></div>
</div>

//AngularJs 路由指定简单内容
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
    .when('/',{ template: '这是首页页面' })
    .when('/computers',{ template: '这是电脑分类页面' })
    .when('/printers',{ template: '这是打印机页面' })
    .otherwise({ redirectTo: '/' });
}]);

实例二、指定远程模板

    <div class="container" ng-app="ngRouteDemo">
        <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active"><a href="#/home">首页</a></li>
            <li role="presentation"><a href="#/about">关于</a></li>
        </ul>
        <div class="panel panel-default">
            <div class="panel-heading">模板内容</div>
            <div class="panel-body" ng-view></div>
        </div>
    </div>

//AngularJS 指定远程模板
var app = angular.module('ngRouteDemo',['ngRoute'])
    .controller('HomeController',function ($scope,$route) { $scope.$route = $route; })
    .controller('AboutController',$route) {
        $scope.$route = $route;
        $scope.users = [
        { name: '张三',msgCount: 3 },{ name: '李四',msgCount: 4 },{ name: '王五',msgCount: 5 }
        ];
        console.info($scope);
    })
    .config(function ($routeProvider) {
        $routeProvider.
        when('/home',{
            templateUrl: '../template/home.html',controller: 'HomeController'
        }).
        when('/about',{
            templateUrl: '../template/about.html',//controller: 'AboutController'   //可以手动指定controller，也可以在模板内容中指定controller
        }).
        otherwise({
            redirectTo: '/home'
        });
    });

模板同上

<script>
    //AngularJS 指定远程模板,指定远程controller
    var app = angular.module('ngRouteDemo',['ngRoute'])
        .config(function ($routeProvider) {
            $routeProvider.
            when('/home',{
                templateUrl: '../template/test1.html'
            }).
            otherwise({
                redirectTo: '/home'
            });
        });
</script>
<script src="../Scripts/Controller/home.js"></script>

更多参考：http://www.runoob.com/angularjs/angularjs-routing.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!