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. Day4 数据库的建立||数据库对外查询||使用命令行来操作数据库

    ###数据库的创建 建立一个项目 先进行测试,测试新项目是否可以成功运行 创建一个PersonContrary包,并建立一个Person类实现BaseColumns借口,在此类中添加所有的表的列名,并 ...

  2. 搭建高可用mongo集群3.4版本

    搭建高可用mongo集群3.4版本 说在开始之前:在搭建这个环境之前,已经有了一个师兄搭好的环境,虽然一样很棒,但是没有经过自己的手出来的东西,还是不属于自己,所以摸索着自己搭建一个吧,好巧不巧的是, ...

  3. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  4. iOS开发之instancetype

    instancetype和id使用方法类似,但他们还有不同点: (1)instancetype在类型表示上,跟id一样,可以表示任何对象类型 (2)instancetype只能用在返回值类型上,不能像 ...

  5. 一个web应用的诞生(9)--回到用户

    在开始之前,我们首先根据之前的内容想象一个场景,用户张三在网上浏览,看到了这个轻博客,发现了感兴趣的内容,于是想要为大家分享一下心情,恩?发现需要注册,好,输入用户名,密码,邮箱,并上传头像后,就可以 ...

  6. Memcache存储机制与指令汇总

    1.memcache基本简介 memcached是高性能的分布式内存缓存服务器.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展性. Memcach ...

  7. .NET Core开源组件:后台任务利器之Hangfire

    一.简述 Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库.在.net core的环境中,由Core自带的DI管理着生命周期,免去了在NF4.X环境中配置always ru ...

  8. 深入分析Java单例模式的各种方案

    单例模式 Java内存模型的抽象示意图: 所有单例模式都有一个共性,那就是这个类没有自己的状态.也就是说无论这个类有多少个实例,都是一样的:然后除此者外更重要的是,这个类如果有两个或两个以上的实例的话 ...

  9. Debian 8开启sftp服务

    看到某云的CDN居然是使用ftp这种早该淘汰的协议,不禁有些吐槽.ftp曾经作为互联网上最重要的协议,但漫长使用过程中体现出的各种缺点,已不适合再使用.其中最致命的问题就是明文传输用户密码.建议使用这 ...

  10. 2017.3.12 H5学习的第一周

    本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...