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

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. Hander----使用

    public class MainActivity extends Activity { private EditText UITxt; private Button updateUIBtn; pri ...

  2. 1、linux-wget

    1.常用下载与参数 wget + 空格 + 要下载文件的url路径 例如: # wget linuxsense.org/xxxx/xxx.tar.gz">http://www.linu ...

  3. Code Page Identifiers - Copy from Microsoft

    Code Page Identifiers 78 out of 94 rated this helpful - Rate this topic   The following table define ...

  4. .Net开发中的@ 和 using 使用技巧

    一.@符号的妙用 1.可以作为保留关键字的标识符 C#规范当中,不允许使用保留关键字(class.bool等)当作普通的标识符来命名,这时候@符号作用就体现 出来了,可以通过@符号前缀把这些保留关键字 ...

  5. ES Docs-2：Exploring ES cluster

    The REST API Now that we have our node (and cluster) up and running, the next step is to understand ...

  6. bat实现监测计算机网络连接，断网自动重启网络连接

    十月一体验了windows 10预览版之后,决定继续装回正式版,尝个鲜就好了,毕竟预览版还是不稳定,环境不是很方便. 决定装个最新正式版windows 8.1,结果问题来了,无线连接总是失败,显示网络 ...

  7. gitlab私服搭建

    1.什么是gitlab: gitlab 是一个用于仓库管理系统的开源项目,它以git为代码管理工具,因此代码可以管到它上边来.搭建私服gitlab可以方便我们有条不紊的管理我们的代码.闲话不说,上代码 ...

  8. [CentOS7] 常用工具 之 防暴力破解工具 Fail2ban

    防止暴力破解密码: Fail2ban ==> 用于自动ban掉ip 先用yum search fail2ban看看是否yum源含有fail2ban这个package,若没有的话请yum inst ...

  9. [C++]C,C++中使用可变参数

    可变参数即表示参数个数可以变化,可多可少,也表示参数的类型也可以变化,可以是int,double还可以是char*,类,结构体等等.可变参数是实现printf(),sprintf()等函数的关键之处, ...

  10. SAP 权限层次

    此文可是没有维护过权限的人对权限有一个整体的认知,转来加以记忆. 一是系统权限 主要是对模块为单位的权限划分,具体就是用户对该模块可见不可见,能不能对该模块进行再授权的操作.表现在用户界面就是用户登录 ...