1.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="app">
        <!-- ng-view 用来显示route的内容-->
        <div ng-view></div>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('app',['ngRoute']);
    //路由配置,$routeProvider提供了两种方法处理路由：when和otherwise
    app.config(['$routeProvider',function($routeProvider){
        // 方法when接收两个参数，第一个设置$location.path().  第二个参数是配置对象
        $routeProvider
        .when('/rest/1',{
            //定义控制器
            controller:'rest1',
            //template模板
            template:'<div>模板rest1</div>',
            //templateUrl,一般加载html的路径
            //templateUrl:'rest1.html'
        })
        .when('rest/11',{
            controller:'rest11',
            template:'<div>模板rest11</div>',
            //加载 type="text/ng-template"方式的模板，用的很少
            //templateUrl:'r_temp'
        })
        .when('rest/12',{
            controller:'rest12',
            template:'<div>模板rest12</div>'
        })
        //设置默认的访问路径
        .otherwise({
            redirectTo:'/rest/1'
        })  

    }]);
    app.controller('rest1',['$scope',function($scope){
        $scope.name='控制器1';
    }]);
    app.controller('rest11',['$scope',function($scope){
        $scope.name='控制器11';
    }]);
    app.controller('rest12',['$scope',function($scope){
        $scope.name='控制器12';
    }]);
</script>
<!--定义route模板的第二种方式-->
<script id='r_temp' type="text/ng-template">
    <div>模板rest11</div>
</script>
    </body>
</html>

2.  对于这种 http://hl.kawa.com/#/rest/1/1001  ，/rest/1/1001 ( /rest/1/为路由地址，1001为入参 )

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="app">
        <!-- ng-view 用来显示route的内容-->
        <div ng-view></div>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('app',['ngRoute']);
    app.config(['$routeProvider',function($routeProvider){
        $routeProvider
        //入参 ":" 表示占位符  "?"表示该参数可省略
        .when('/rest/1/:param?',{
            controller:'rest',
            templateUrl:'r_temp'
        })
    }]);
    //$routeParams 对应route的入参
    app.controller('rest',['$scope','$routeParams',function($scope,$routeParams){
        $scope.name='控制器';
        //获取入参   也可以写成$routeParams['param']
        $routeParams.param
    }]);
</script>
<!--定义route模板的第二种方式-->
<script id='r_temp' type="text/ng-template">
    <div>模板rest</div>
</script>
    </body>
</html>

angularjs 路由模块的更多相关文章

  1. AnguarJS——第10章 路由

    第10章 路由 一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键. 10.1 SPA SPA(Single Page Application)指的是通 ...

  2. 为什么推荐用ui-router替代ngRoute

    初学angularjs,第一个实例是官网的phoneCat,里面路由用的是ngRoute,后来看到别的用ui-router,觉得好奇,ui-route是什么呢?百度一些,得到如下解释: ui-rout ...

  3. 7_nodejs angularjs

    webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...

  4. AngularJS之高级Route【三】（八）

    前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...

  5. angularJs基础

    AngularJs是为了克服Html在构建应用上的不足而设计的.Html是一门很好的为静态文件展示设计的声明式语言,但是要构建web应用的话就显得乏力了.所以我做了一些工作来让浏览器做我瞎向要的事. ...

  6. AngularJS实现单页应用的原理——路由(Route)

    AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...

  7. ionic之AngularJS扩展 移动开发（视图导航一）

    目录: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-ba ...

  8. AngularJS PhoneCat代码分析

    转载自:http://www.tuicool.com/articles/ym6Jfen AngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些 ...

  9. AngularJs学习笔记7——四大特性之模块化设计

    模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...

随机推荐

  1. javascript 将数字（金额）转成大写

    将计算好的金额转换成大写,这些功能非常多,下面我改进了一下代码(原文在这里:http://www.cnblogs.com/zsanhong/p/3509464.html). /** * _SetNum ...

  2. iOS开发之计算文字尺寸

    /** *  计算文字尺寸 * *  @param text    需要计算尺寸的文字 *  @param font    文字的字体 *  @param maxSize 文字的最大尺寸 */ - ( ...

  3. ECMAScript6-let和const命令

    ▓▓▓▓▓▓ 大致介绍 ES6是下一代的JavaScript语言的标准,目标是让JavaScript可以用来编写大型的复杂程序,成为企业级开发语言,要查看浏览器对ES6的支持程度可以用阮一峰大佬写的工 ...

  4. Liniux系统下目录的权限意义

    访问者及其基本权限 Linux系统内的文件访问者有三种身份,分别是: a) 文件和文件目录的所有者: u---User(所有权);b) 文件和文件目录的所有者所在的组的用户: g---Group;c) ...

  5. 深入浅出数据结构C语言版（6）——游标数组及其实现

    在前两次博文中,我们由表讲到数组,然后又由数组的缺陷提出了指针式链表(即http://www.cnblogs.com/mm93/p/6576765.html中讲解的带有next指针的链表).但是指针式 ...

  6. 老李分享：使用 Python 的 Socket 模块开发 UDP 扫描工具

    老李分享:使用 Python 的 Socket 模块开发 UDP 扫描工具 poptest是业内唯一的测试开发工程师培训机构,测试开发工程师主要是为测试服务开发测试工具,在工作中要求你做网络级别的安全 ...

  7. WebService基础学习(三)—CXF

    一.什么是CXF?      Apache CXF = Celtix + Xfire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.Apache ...

  8. PCIE_DMA实例三：Xilinx 7系列(KC705/VC709)FPGA的EDK仿真

    一:前言 好久没写博客了,前段时间有个朋友加微信请教关于PCIe的一些学习方法.本人也不是专家,只是略知一些皮毛.对于大家反馈的问题未必能一一解答,但一定知无不言.以后我会常来博客园看看,大家可以把问 ...

  9. 设计模式的征途—3.工厂方法（Factory Method）模式

    上一篇的简单工厂模式虽然简单,但是存在一个很严重的问题:当系统中需要引入新产品时,由于静态工厂方法通过所传入参数的不同来创建不同的产品,这必定要修改工厂类的源代码,将违背开闭原则.如何实现新增新产品而 ...

  10. angularjs实现首页轮播图

    <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <met ...