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. StudyJams学习历程总结

    Study Jams 是一个学习 Google 在线课程的活动.该活动由学员自发组建课程学习小组,旨在带领小组成员入门 Android 开发,最终将 Android App 上载至 Google Pl ...

  2. MVC学习笔记3 - JsRender

    许多发展平台减少代码和简化维护,使用模板和 HTML5 和 JavaScript 也不例外. JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构,并使用它来动态地生成 ...

  3. 从输入url到页面加载完成发生了什么？——前端角度

    这是一道经典的面试题,这道面试题不光前端面试会问到,后端面试也会被问到.这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当 ...

  4. AE + GDAL实现影像按标准图幅分割（上）

    最近有个项目,其中有个功能是要将遥感影像按标准图幅分割,一开始用AE的接口,慢的让人抓狂,就改用GDAL,速度提升很大.我主要通过http://blog.csdn.net/liminlu0314/学习 ...

  5. css2.1实现圆角边框

    虽然css3的border-radius实现圆角很简单,但是我还是认为css2.1中好多技术还是很值得学习的,我也是后来才知道这就是传说中的滑动门技术.脑洞大开啊 附上demo <!DOCTYP ...

  6. 02 nodejs命令参数（NodeJS基础入门）

    声明:本文章可供有一定js基础的朋友参考nodejs入门,本文未讲解nodejs的安装,如有需要的同学可以加QQ3382260752找我,进行交流学习. 建议使用开发软件:webstorm或hbuil ...

  7. [SinGuLaRiTy] 树形存储结构阶段性测试

    [SinGuLaRiTy-1011] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. G2019级信息奥赛专项训练 题目 程序名 时间 内存 ...

  8. Windows下检测文件名大小写是否匹配

    跨平台开发有一个众所周知,但因为只是偶尔受到困扰,一般人不会在意的问题,就是windows对文件名大小写不敏感,而其他平台对文件名大小写敏感.因此可能出现在windows平台开发时一切正常,但部署/打 ...

  9. Android软键盘遮挡布局的那些事

    有朋友提到软键盘遮挡布局的问题,说网上找了很多资料都未能解决,下面我来总结一下那些事,有些内容也是从网友那里学来的,但是我都会自己验证正确了才会贴出来. 首先来分析下我们常见的遮挡问题有哪些(本次所说 ...

  10. body全屏

    html, body { min-height: 100%; }