AngularJS:路由

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

示例代码AngularJS_25.html

 

该系列的示例代码

 

https://github.com/panyongwow/angularJS

 



























































































































以上是关于AngularJS:路由的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS“多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程

AngularJS路由没有哈希'#'

AngularJS:路由

AngularJS 路由

AngularJS路由为啥不显示

[AngularJS] AngularJS系列 中级篇之路由