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>

改div内的HTML内容会根据路由的变化而变化。

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:'这是电脑分类页面'})

2.templateUrl:

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

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

特别说明：HTML模板加载，仅显示HTML全部内容，但不包含HTML、Head、Body标记，并且，不执行javascript代码。

3.controller

function，string或数组类型，在当前模板上执行的controller函数，生成新的scope。

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>

HTML：

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

js：

//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>

JS：

//AngularJS 指定远程模板var app = angular.module('ngRouteDemo', ['ngRoute'])    .controller('HomeController', function ($scope, $route) { $scope.$route = $route; })    .controller('AboutController', function ($scope, $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'        });    });

实例三、指定controller控制器文件

模板同上

<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