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

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（九）：路由的更多相关文章

  1. AngularJS的路由、模块、依赖注入

    AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?

  2. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

  3. CCNP路由实验之九 路由策略

     CCNP路由实验之九 路由策略 路由器在公布与接收路由信息时,可能须要实施一些策略.以便对路由信息进行过滤,比如仅仅接收或公布满足一定条件的路由信息. 一种路由协议可能须要引入其它的路由协议发现 ...

  4. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  5. AngularJs ng-route路由详解

    本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...

  6. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  7. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  8. AngularJS(16)-路由

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...

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

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...

  10. angularJS的路由！

    angularJS 路由:(分发需求) angularJS 中路由是单独提供的功能模块,ngRoute  也是一个单独发行的文件 可以通过 npm 去安装这个包:angular-route <s ...

随机推荐

  1. CentOS 7 配置 samba服务器

    一.在服务器端上安装软件并进行相关配置(以下操作需用用户root进行): 1.安装samba: yum -y install samba samba-client 2.启动服务并设置开机启动: sys ...

  2. Dexdump 无法正常反编译问题

    WIN环境下无法正常运行,提示Unable open XXX as zip 解决方案:使用APKTOOL + JD-GUI进行替代反编译

  3. linux---安装ftp并配置用户部分权限

    一.启动vsftpd服务1. 启动VSFTP服务器A:cenos下运行:yum install vsftpdB. 登录Linux主机后,运行命令:”service vsftpd start”C. 要让 ...

  4. n皇后问题_回溯法

    具体问题如下图 先看一下4*4的回溯过程 程序结束条件: 一组解:设标志,找到一解后更改标志,以标志做为结束循环的条件. 所有解:k=0 判断约束函数判断第k个后能不能放在x[k]处 两个皇后不能放在 ...

  5. 《OD学storm》20160828

    一.Storm项目 1. 架构 javasdk -> nginx -> 日志文件 -> flume agent(collector) -> hdfs -> kafka - ...

  6. 强联通分量之kosaraju算法

    首先定义:强联通分量是有向图G=(V, E)的最大结点集合,满足该集合中的任意一对结点v和u,路径vu和uv同时存在. kosaraju算法用来寻找强联通分量.对于图G,它首先随便找个结点dfs,求出 ...

  7. 洛谷P3070 [USACO13JAN]岛游记Island Travels

    P3070 [USACO13JAN]岛游记Island Travels 题目描述 Farmer John has taken the cows to a vacation out on the oce ...

  8. java 定位问题方法 （jdb 和 jstack）

    使用java 做开发,大部分的朋友都是利用DIE 来做debug 工作,因为这样可视化效果好. 但是在真实的工作中,很多使用遇到问题,手头或者环境是不允许你利用DIE 来对源码做debug 工作,开发 ...

  9. Oracle 11g 数据类型

    1.     字符类型 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认1字节,n值最大为2000 末尾填充空格以达到指定长度,超过最大长度报错.默认指定长度为字节数,字符长度可以从1字 ...

  10. Jmeter_前端RSA加密下的登陆模拟_引用js文件实现(转)

    在一次项目实战中,前端登录使用了RSA加密,使用LoadRunner压测的第一步,就是模拟用户登录,可惜loadRunner11并不能录制前端的加密过程,并且安装的LR是基于C语言版,网络上关于RSA ...