ngRoute 模块中包含以下内容，

名称 所属 作用
ngView DIRECTIVE 提供不同路由模板插入的视图层
$routeProvider PROVIDER 提供路由配置
$route SERVICE 用于构建各个路由的url、view、controller这三者的关系
$routeParams SERVICE 解析返回路由中带有的参数
  1. 在主模板中使用 ngView 定义一个路由模板的视图层。不同路由对应的模板将会插入到这个 ngView 所在的dom元素下。
  2. 使用 $routeProvider 进行路由配置，包括每一个路由对应的url，template以及controller。除了这些基本的配置之外，还会有一些额外的配置，比如 resolve 配置等。
  3. 在每个路由的controller中完成对应的业务逻辑。
  4. 可以通过注入 $routeParams 服务来获取路由url上的参数；还可以通过 $rootScope 来监控 $routeChangeStart 和 $routeChangeSuccess 事件。
<body ng-app="demo001" ng-controller="Demo">

    <h1>Angular Route Demo</h1>

    <hr>

    <div>

        <a href="#/home">home</a>

        <a href="#/post">post</a>

        <a href="#/about">about</a>

    </div>

    <hr>

    <div ng-view></div>

</body>
angular.module('demo001', ['ngRoute'])

.config([

    '$routeProvider',

    function ($routeProvider) {

        $routeProvider

            .when('/home', {

                templateUrl: 'home.html',

                controller: 'HomeController'

            })

            .when('/post', {

                templateUrl: 'post.html',

                controller: 'PostController'

            })

            .when('/about', {

                templateUrl: 'about.html',

                controller: 'AboutController'

            })

            .otherwise('/home')

    }

])

调用 $routeProvider.when 来配置不同路由的具体信息。 $routeProvider.when 方法接受2个参数，第一个是路由的url。第二个路由的具体配置，包括对应的模板地址，控制器名称等.$routeProvider.otherwise 可以用于设置默认路由地址。简单来说就是将未设置的url自动重定向到此url。

路由参数

angular.module('Module.Post', ['ngRoute'])

.config([

    '$routeProvider',

    function ($routerProvider) {

        $routerProvider

            .when('/post', {

                templateUrl: 'post.html',

                controller: 'PostController'

            })

            .when('/post/:postId', {

                templateUrl: 'post-id.html',

                controller: 'PostIdController'

            })

    }

])

.controller('PostController', [

    '$scope',

    function ($scope) {

        $scope.posts = [

            {

                name: 'post1',

                id: 'post-001'

            }, {

                name: 'post2',

                id: 'post-002'

            }

        ]

    }

])

.controller('PostIdController', [

    '$scope',

    '$routeParams',

    function ($scope, $routeParams) {

        $scope.msg = 'post id: ' + $routeParams.postId;

    }

]);

路由中的 /:postId 其实是一个参数，它将匹配类似 /post/001 这种url，其中001 就是这个 :postId 的值。

我们在路由对应的控制器中，可以通过 $routeParams 参数来获取这个url参数。依次类推，我们可以为路由的url设置多个参数，比如 /post/:year/:month/:day/:postName 这样的路由，它将匹配 /post/2015/12/15/angular-router-demo 这样的路径。控制器中注入的 $routeParams 服务将会得到类似下面的对象，

{

    "year": 2015,

    "month": 12,

    "day": 15,

    "postName": "angular-router-demo"

}

http://www.tuicool.com/articles/jqMveaB

ngRoute的更多相关文章

  1. AngularJs ng-route路由详解

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

  2. ngRoute插件

    angular中可以使用插件,例如ngRoute插件就是用与路由控制. 首先要在模块中引入即可: var m1 = angular.module('myApp',['ngRoute']); 然后我们进 ...

  3. angularjs之插件ngRoute和ngAnimate

    使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...

  4. ngRoute AngularJs自带的路由

    ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...

  5. AngularJS Best Practices: ngRoute

    app/----- components/---------- users/--------------- controllers/-------------------- users.control ...

  6. angularjs中ng-route和ui-router简单用法的代码比较

    1.使用ng-route: app.js中的写法: var app=angular.module('birthdayApp',['ngRoute']); app.config(function($ro ...

  7. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  8. ngRoute 路由

    做单页面应用多是通过不同的url来识别出不同的页面展现的. angularjs 为我们提供一个封装好的ngRoute工具 简单介绍用法 : <div ng-view></div> ...

  9. AngularJs练习Demo17 ngRoute

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. AngularJs练习Demo16 ngRoute

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Linux 下安装和使用 Redis

    系统: CentOS-7-1611 首先安装gcc 因为要make编译 参照官网 wget  下载包 解压  make 编译完成后会在src目录下生成几个可执行文件 然后执行:make install ...

  2. PHP配置环境中如何开启伪静态

    1.在httpd.conf中引入httpd-vhosts.conf 2.在httpd.conf中开启mod_rewrite.so 3.在httpd-vhosts.conf中配置虚拟主机 AllowOv ...

  3. 【JZOJ5086】【GDOI2017第四轮模拟day1】数列 折半搜索

    题面 有一个长度为n 的排列,现在有一些位置的数已经模糊不清了,你只知道这个排列的逆序对个数是K,你能计算出总共有多少可能的排列吗? 对于100% 的数据,n <=10^3,K<=10^9 ...

  4. 【JZOJ4709】【NOIP2016提高A组模拟8.17】Matrix

    题目描述 输入 输出 样例输入 4 3 5 4 1 7 3 4 7 4 8 样例输出 59716 数据范围 解法 40%暴力即可: 60%依然暴力: 100%依次计算第一行和第一列对答案的贡献即可: ...

  5. ANN中乘积量化与多维倒排小结

    目前特征向量的比对加速优化能极大缩短比对耗时,改善用户体验. 优化的途径主要有两种,一是使用指令集(SSE,AVX)加速运算.二是使用ANN替代暴力搜索. 乘积量化和倒排索引组合是ANN中效果较好且实 ...

  6. 数据ETL是指什么

    ETL是数据抽取(Extract).清洗(Cleaning).转换(Transform).装载(Load)的过程.是构建数据仓库的重要一环,用户从数据源抽取出所需的数据,经过数据清洗,最终按照预先定义 ...

  7. epiinfo是美国CDC开发维护的流行病学数据录入和分析软件，在DOS时代占主流，随着Windows的普及用的人越来越少了，epiinfo重新开发Windows版本后，体积庞大且不好用。在数据录入方面已被EpiData取代，不过epiinfo的分析模块，比如地理信息系统某些情况下还是挺有用的。

    Manual: https://www.cdc.gov/epiinfo/support/userguide.html https://en.wikipedia.org/wiki/Epi_Info 教程 ...

  8. Servlet小结（转载）

    http://www.iteye.com/topic/766418 1 .首先,什么是Servlet?        Servlet是一个Java编写的程序,此程序是在服务器端运行的,是按照Servl ...

  9. larbin终于编译完成

    1.目前sourceforge不能下载,只能找mirror进行下载了: 2.一些头文件始终找不到,定位了一下,应该是makefile中设置有问题,把CXXFLAGS中的-I-去掉,即可编译成功:

  10. JavaScript--DOM操作例子：隔行变色

    上效果: 实现思想: 主要是js动态创建标签,还有动态结合css实现样式 <!DOCTYPE html> <html lang="en"> <head ...