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

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. java poi导出Excel 总结

    首先下载 Apache 的POI jar包 将更目录下的poi-3.8-20120326.jar 和lib下的三个jar包导入 如下图: 首先必须搞一个通用的工具类,网上找的,能用就行,java就是这 ...

  2. 八数码 Java实现

    参考http://blog.csdn.net/helloworld10086/article/details/41853389 package com.EightNumber.view; import ...

  3. 不出现用户帐户控制-让Win7的用户账户控制(UAC)放过信任的程序

    微软有个官方工具 Microsoft Application Compatibility Toolkit: http://www.microsoft.com/downloads/details.asp ...

  4. Sharepoint2013商务智能学习笔记之Excel Service展示Sql Server数据Demo(五)

    第一步,打开Excel新建空白工作簿 第二步,使用Excel连接sql 数据库 第三步,画图 第四步 添加筛选器 最后效果如下: 第五步,将Excel上传到sharepoint任意文档库,并直接点击 ...

  5. FormsAuthentication.RedirectFromLoginPage 登录

    首先讲的这个东西是针对后台数据访问的比如我的后台是admin文件夹.那么我除非登陆成功才可以访问里面的东西.那么除了Session对象判断.和Cookies来判断还能用到FormsAuthentica ...

  6. 浅谈JavaScript -- 正则表达式

    什么是正则表达式? 正则表达式是由一个字符序列形成的搜索模式.可用于文本搜索和文本替换. 语法:/正则表达式主体/修饰符(可选) var patt=new RegExp(pattern,modifie ...

  7. 为什么要使用func.call(this)

    1.为什么要使用func.call(this) 在正常模式下,js 函数里那些你没有声明就使用的变量,其实是访问的全局对象的属性.但是在严格模式下,不允许这种语法,所有变量都必须要显示声明,所以如果你 ...

  8. HDP3.1 中 YRAN 和 MR2 的内存大小配置的计算方式

    Container 是 YARN 中基本的处理单元,它是对内存.CPU等计算的封装.总的来说,每个core每块硬盘 分配2个 container,能获得较好的集群利用率. 1. 确定可用内存大小. 对 ...

  9. bzoj2597: [Wc2007]剪刀石头布（费用流）

    传送门 不得不说这思路真是太妙了 考虑能构成三元组很难,那我们考虑不能构成三元组的情况是怎么样 就是说一个三元组$(a,b,c)$,其中$a$赢两场,$b$赢一场,$c$没有赢 所以如果第$i$个人赢 ...

  10. 编写自定义GenericServlet

    用途: 编写自定义GenericServlet类后,子类只需继承这个类,就可以直接使用ServletConfig的config对象和ServletConfig接口的方法,而不需要init()方法获取c ...