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. 设置int、float型数据的输出格式

    设置整型输出的有效位数,比如在输出时间时时.分.秒都是两位有效数字,如果是5分钟应该输出00:05:00.需要加上头文件<iomanip> cout<<setw(2)<& ...

  2. C++枚举类型详解

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5171110.html  一.枚举类型的定义 enum 类型名 {枚举值表}: 类型名是变量名,指定 ...

  3. 【Yii系列】最佳实践之后台业务框架

    缘起 上面的几章都讲概念了,没有怎么讲到实践的东西,可能会有些枯燥,这很正常的,概念还是需要慢慢啃的,尤其是官网其他的部分,需要狠狠的啃. 什么,你啃不动了?看看官网旁边的那个在线用户吧. 你不啃的时 ...

  4. Zabbix3.0部署最佳实践

    Zabbix3整个web界面做了一个全新的设计. 更多新特性请点击当前字幕查看   笔者QQ:572891887 Linux架构交流群:471443208 1.1Zabbix环境准备 [root@li ...

  5. 手机自动化测试：appium源码分析之bootstrap十七

    手机自动化测试:appium源码分析之bootstrap十七   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  6. JS中遍历语法的比较

    for循环 JavaScript 提供多种遍历语法.最原始的写法就是for循环.(假设myArray是数组,下面同理) let arr = [1,2,3,4,5]; for (var index = ...

  7. wampserver安装错误 应用程序无法正常启动0xc000007b解决方法

    在重装系统之后发现以前安装的wampserver启动会出现错误提示"应用程序无法正常启动0xc000007b解决方法",重新安装也是一样的错误.上网找了相关信息后发现,并不是只有本 ...

  8. AOP学习笔记一

    软件开发的目的是为了解决各种需求,包括业务需求和系统需求.目前,业界通过使用面向对象的编程思想,已经可以对业务需求等普通关注点进行很好的抽象与封装,并且使之模块化.但是对于系统需求一类的关注点来说,情 ...

  9. java 基础知识九 类与对象

    java  基础知识九  类与对象 1.OO(Object–Oriented )面向对象,OO方法(Object-Oriented Method,面向对象方法,面向对象的方法)是一种把面向对象的思想应 ...

  10. JavaScript 格式化时间

    //格式化 yyyy-MM-dd hh:mm:ss function renderTime(date) { if (date == '' || date == null) { return ''; } ...