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. SOA面向服务的架构理解

    Ø  单一应用架构 ·当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本. Ø  垂直应用架构 当访问量逐渐增大,单一应用增加机器带来的加速度越来越小,将应用拆成互不相干的几 ...

  2. 混合拉普拉斯分布（LMM）推导及实现

    作者:桂. 时间:2017-03-21  07:25:17 链接:http://www.cnblogs.com/xingshansi/p/6592599.html 声明:欢迎被转载,不过记得注明出处哦 ...

  3. 【树莓派】h2数据库操作相关

    之前在树莓派上面操作时候,遇到一些业务方面的bug,和团队中的同事经过多次尝试,但就是难以重现用户现场的问题. 但是问题却实实在在地发生,虽然并不是必然可重现的bug,但是也比较闹心: 发生了问题,也 ...

  4. C++获取字符cin,getchar,get,getline的区别

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5241544.html 1.cin>> 1)最常见的是获取输入的一个字符或数字,如 in ...

  5. .net Core 1.0.1 下的Web框架的的搭建过程step by step

    环境:ubuntu+VScode  数据库:mysql ,ORM框架:chloe 官网 看完本篇文章你能学会 在Vscode下创建项目,一些基础的命令 ,以及得到一个配置文件的简单读取实例 1,在VS ...

  6. IE6 margin 双倍边距解决方案

    一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...

  7. Modbus通信协议的压力测试

    最近物联网都比较的火,因此,特别为各位兄弟姐妹们,奉上一款Mobus协议的测试软件,可以用来做设备的压力测试,和通信测试. 起初软件开发缘由是我们最近在开发一款设备,需要将多个DS18B20并联起来, ...

  8. window.onload 和 $(document).ready(function(){})的区别

    这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的 ...

  9. post和get请求的区别

    post和get请求的区别: 1.post发送的数据在请求体中,用户看不到 get发送的数据在地址栏中 2.post请求中有content-type,作用是告诉服务器,发送给服务器的数据格式,是和ur ...

  10. iOS 按钮连续提交执行一次（如留言提交，多次拍照问题）

    在很多项目中暴力测试时会出现多次点击执行一个方法  可以用下面的语句进行解决 //先将未到时间执行前的任务取消. [[self class] cancelPreviousPerformRequests ...