基本介绍

在控制中注入$routeParams可以获取传递的参数

区别对比

angular中的路由是指#之后的内容，包括之后的？，而在之前的http地址中我们习惯性的将？放在前面

具体使用

1、形参

#/index/:id==>#/index/5

2、具体的值

#/index/page==>#/index/page

3、地址中？后的参数

#/index？name=wqx

在angular中在控制中注入$routeParams可以获取传递的参数

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .clearfix:after {

            content: '';

            display: block;

            visibility: hidden;

            clear: both;

        }

        .wrap {

            width: 600px;

            margin: 30px auto;

        }

        ul {

            list-style: none;

            border: 1px solid black;

            border-bottom: none;

        }

        li {

            width: 199px;

            height: 30px;

            line-height: 30px;

            float: left;

            /*margin-left: -2px;*/

            text-align: center;

            position: relative;

        }

        li a {

            text-decoration: none;

            color: black;

        }

        li:after {

            content: '';

            display: block;

            position: absolute;

            width: 1px;

            height: 16px;

            border-right: 1px solid black;

            top: 7px;

            right: 0px;

        }

        li:last-child:after {

            border: none;

        }

        .wrap .main {

            height: 400px;

            border: 1px solid #000;

            text-align: center;

            line-height: 400px;

        }

    </style>

</head>

<body>

<div class="wrap">

    <ul class="clearfix">

        <li><a href="#/index1?name=wqx">index1</a></li>

        <li><a href="#/index2/5">index2</a></li>

        <li><a href="#/index3/5/page?name=wqx">index3</a></li>

    </ul>

    <div class="main">

        <div ng-view=""></div>

    </div>

</div>

<script src="../libs/angular.min.js"></script>

<script src="../libs/angular-route.js"></script>

<script>

    //之前路由模块也是处于核心模块之中,后来独立出去了

    //对路由模块的使用主要是进行config配置，配置完成之后即可使用

    var App = angular.module('App', ['ngRoute']);

    App.config(['$routeProvider', function ($routeProvider) {

        $routeProvider.when('/index1', {

            template: '<h1>index1</h1>',

            controller:'Demo1Controller'

        }).when('/index2/:id', {

            template: '<h1>index2</h1>',

            controller:'Demo2Controller'

        }).when('/index3/:id/page/', {

            template: '<h1>index3</h1>',

            controller:'Demo3Controller'

        }).otherwise({

            redirectTo: '/index1'

        })

    }]);

    App.controller('Demo1Controller',['$routeParams',function ($routeParams) {

        console.log($routeParams);

    }]);

    App.controller('Demo2Controller',['$routeParams',function ($routeParams) {

        console.log($routeParams);

    }]);

    App.controller('Demo3Controller',['$routeParams',function ($routeParams) {

        console.log($routeParams);

    }]);

</script>

</body>

</html>

Angular——路由参数的更多相关文章

  1. angular路由传参和获取路由参数的方法

    1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...

  2. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. angular路由操作

    在单页面应用程序中比如angular应用,我们需要根据url的变化(即:不同的请求),来分配不同的资源.根据请求的URL来决定执行哪个模块,这个过程叫路由,同时,我们需要设计路由规则. 下面给出一个简 ...

  4. Angular路由——在路由时候传递数据

    有3种方式 1.在查询参数中传递数据 2.在路由路径中传递数据 定义路由路径时就要指定参数名字,在实际路径中携带参数. 3.在路由配置中传递数据 一.在查询参数中传递数据 第一步:修改模版中商品详情链 ...

  5. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  6. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  7. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  8. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  9. Angular07 路由的工作流程、路由参数、子路由、利用路由加载模块、模块懒加载？？？

    1 Angular路由的工作流程 用户在浏览器输入一个URL -> Angular将获取到这个URL并将其解析成一个UrlTree实例 -> Angular会到路由配置中去寻找并激活与Ur ...

随机推荐

  1. 条款九: 避免隐藏标准形式的new

    因为内部范围声明的名称会隐藏掉外部范围的相同的名称,所以对于分别在类的内部和全局声明的两个相同名字的函数f来说,类的成员函数会隐藏掉全局函数 class x { public: void f(); / ...

  2. SSLStrip 终极版 —— location 瞒天过海

    之前介绍了 HTTPS 前端劫持 的方案,尽管非常有趣.然而现实却并不理想. 其唯一.也是最大的缺陷.就是无法阻止脚本跳转.若是没有这个缺陷,那就非常完美了 -- 当然也就没有必要写这篇文章了. 说究 ...

  3. Python正則表達式小结(1)

    学习一段python正則表達式了, 对match.search.findall.finditer等函数作一小结  以下以一段网页为例,用python正則表達式作一个范例: strHtml = '''& ...

  4. 跨域CORS原理及调用详细演示样例

      上篇博客介绍了JSONP原理,其不足,就是仅仅能使用GET提交.若传输的数据量大.这个JSONP方式就歇菜了.那这篇博客就来介绍还有一种跨域介绍方案-CORS.   相对JSONP,CORS支持P ...

  5. 图像处理之基础---滤波器之高斯低通滤波器的高斯模板生成c实现

    ()代码实现 对原图进行高斯平滑,去除图像中的计算噪声void Bmp::MakeGauss(double sigma,double **pdKernel,int *pnWindowSize){ // ...

  6. 2016/1/1 运算符 笔记整理 接2015/12/30 Java 语法

    ④运算符 1,赋值运算符:实现从右向左的赋值,符号= 2,算术运算符:符号 + - * / %(求余或求模),结果自动转成最大的                      类型,自动升级. 3, 比较 ...

  7. 【bzoj4591】[Shoi2015]超能粒子炮·改

    设S(n,k)=Σ C(n,i) i=0..k 根据lucas定理可以得到 S(n,k) mod p = [ S(n/p,k/p-1)*S(n mod p,p-1)+C(n/p,k/p)*S(n mo ...

  8. 如何理解scrapy Selector

    1 scrapy Selector是什么 Selector对象本质上是对DOM tree的子树的抽象,这种抽象的目的是用于定位我们感兴趣的node.比如某次http response是一棵完整的DOM ...

  9. USACO 刷题有感

    最近每天都尽量保持着每天一道USACO的题目,呵呵,一开始都是满简单的,一看题目基本上思路就哗啦啦地出来了,只不过代码实现有点麻烦,花了一些时间去调试,总体感觉还不错,但是越往后做,应该就很难保持一天 ...

  10. SPOOL 命令使用实例【oracle导出纯文本格式文件】

    SPOOL 命令使用实例[oracle导出纯文本格式文件] SET echo off              --在用start命令执行一个sql脚本时,是否显示脚本中正在执行的SQL语句: SET ...