AngularJS（九）：路由

本文也同步发表在我的公众号“我的天空”

AngularJS路由

AngularJS路由可以让我们通过不同的URL访问不同页面（似乎是废话），其价值主要体现在单页面的web应用中（single page web application，SPA），在移动端的web开发中，几乎都是SPA的形式。我们先通过一个简单的示例来了解AngularJS路由，随后再做进一步的学习。请看示例：

<html>
<head>
<title>AngularJS_23</title>
<script src="Angular.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body ng-app="myApp">
     <ul>
         <li><a href="#/">首页</a></li>
         <li><a href="#/news">新闻</a></li>
         <li><a href="#/sport">体育</a></li>
   </ul>
   <div ng-view></div>
</body>
<script>
    var app=angular.module("myApp",['ngRoute']);
app.config(function($routeProvider){
       $routeProvider
       .when('/',{template:'这是首页'})
       .when('/news',{template:'这是新闻页面'})
       .when('/sport',{template:'这是体育页面'})
       .otherwise({redirectTo:'/'});
   });
</script>
</html>

示例代码AngularJS_23.html

运行该页面，当点击不同的链接时在DIV中显示不同的内容。分析以上代码，看看我们新增加了哪些部分：

首先，AngularJS路由功能的实现是在anguler-route中实现的，所以我们引入了angular-route.min.js。其次我们观察a标签里的href地址格式，其均是由#开头的，AngularJS中URL的形式是通过“# 标记”来实现的。随后在显示内容的DIV中，我们使用了ng-view指令，该DIV可以看成一个容纳页面的容器。另外在控制器代码中由于要引入外部模块，所以我们在模块app的声明中引入了“ngRoute”。

接下来便是实现路由的关键代码app.config()，AngularJS通过config函数来配置路由，我们将$routeProvider引入到配置函数config()，并通过$routeProvider的when()或otherwise()函数来定义我们的路由规则，函数包含两个参数，第一个是URL或URL正则，第二个为路由配置对象，由于本例中只是简单的显示些文字，因此直接设置template就可以了。otherwise()函数定义所有未在when()中配置路由的其他url的路由规则，本例中直接设置redirctTo参数。

接下里我们学习路由配置对象，由于上一例中我们只是简单的演示路由，因此路由配置对象设置的比较简单，完整的路由配置对象格式为：

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

各参数说明：
template：如果我们只需要在ng-view中显示简单的html内容，就使用该参数，如上一例所示。
templateUrl：如果需要在ng-view中显示页面，则该参数为页面的url。
controller：在当前模板上执行的controller函数。
controllerAs：controller函数的别名。
redirectTo：重定向的地址，如上一列中的otherwise()函数所示。
resolve：指定当前controller所依赖的其他模块。

接下里我们演示一个更复杂的示例，我们先准备两个子页面：

<h1>这是新闻页面</h1>
<ul><li ng-repeat="new in news">{{new}}</li></ul>

示例代码route_news.html

<h1>这是体育页面</h1>
<ul><li ng-repeat="sport in sports">{{sport}}</li></ul>

示例代码route_sport.html

由于子页面是嵌套在主页面的ng-view中，所以只需要DOM元素就可以了，这两个页面都很简单，使用ng-repeat来展示相应数组的内容，这个是我们之前已经掌握的知识点了。

接下来是主页面：

<body ng-app="myApp">
     <ul>
         <li><a href="#/">首页</a></li>
         <li><a href="#/news">新闻</a></li>
         <li><a href="#/sport">体育</a></li>
   </ul>
   <div ng-view></div>
</body>
<script>
    var app=angular.module("myApp",['ngRoute']);
   app.controller("ctr_news",function($scope){
       $scope.news=['新闻一','新闻二'];
   })
   .controller("ctr_sport",function($scope){
       $scope.sports=['体育内容一','体育内容二'];
   })
   .config(function($routeProvider){
       $routeProvider
       .when('/',{
           template:'这是首页'
       })
       .when('/news',{
           templateUrl:'route_news.html',
           controller:'ctr_news'
       })
       .when('/sport',{
           templateUrl:'route_sport.html',
           controller:'ctr_sport'
       })
       .otherwise({redirectTo:'/'});
   });
</script>

示例代码AngularJS_24.html

主页面的html部分与之前的示例完全一样，我们主要看控制器代码中。首先在config()函数中，我们在“新闻页面”与“体育页面”的路由配置中，使用了templateUrl来加载子页面，同时用controller来设置了其相应的控制器，新闻页面的控制器名为“ctr_news”，这样我们就可以在主页面中通过控制器“ctr_news”来访问并设置新闻页面的DOM了，在这里我们是初始化了一个数组“news”,这样在子页面中就可以使用该数组，并渲染新闻页面里的li元素，同时体育页面的处理也完全一样。

app.controller("ctr_news",function($scope){
$scope.news=['新闻一','新闻二'];
})

当然，我们也可以不对子页面设置单独的控制器，而是统一由主页面的控制器处理，不过这样不利于整体代码的架构，不建议这样写。

<body ng-app="myApp" ng-controller="ctr">
     <ul>
         <li><a href="#/">首页</a></li>
         <li><a href="#/news">新闻</a></li>
         <li><a href="#/sport">体育</a></li>
   </ul>
   <div ng-view></div>
</body>
<script>
    var app=angular.module("myApp",['ngRoute']);
   app.controller("ctr",function($scope){
       //所有的数据在主页面的控制器中来处理
       $scope.news=['新闻一','新闻二'];
       $scope.sports=['体育内容一','体育内容二'];
   })
   .config(function($routeProvider){
       $routeProvider
       .when('/',{
           template:'这是首页'
       })
       .when('/news',{
           templateUrl:'route_news.html'
       })
       .when('/sport',{
           templateUrl:'route_sport.html'
       })
       .otherwise({redirectTo:'/'});
   });
</script>