基本介绍

在控制中注入$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. 单一责任原则（SRP）

    1.就一个类而言,应该仅有一个引起它变化的原因. 2.在SRP中定义职责为:“变化的原因”.  如果你想到多个动机去改变这个类,那这个类就有多个职责

  2. 混合式框架-AgileLite

    Agile Lite是一个HTML5移动前端框架.支持jQuery和Zepto双引擎.而且提供与UI无关的独立框架,内置了Flat UI样式和Ratchet样式.同一时候也支持单页模式和多页模式开发. ...

  3. msyql索引详解

    一.mysql查询表索引命令两种形式 1.mysql>SHOW INDEX FROM 'biaoming' 2.mysql>SHOW keys FROM 'biaoming' 运行结果如下 ...

  4. iPhone微信防止撤销插件开发

    导语: 随着移动时代的发展以及微信的普及流行,越来越多的用户使用微信发送消息,但经常出现撤销消息的情况.因此需要一款微信防止消息撤回插件,微信用户可以防止对方撤回消息,看到对方发出的任何消息,妈妈再也 ...

  5. MySQl 子查询，左右连接，多表连接学习笔记

    1.子查询是指在还有一个查询语句中的SELECT子句.   例句:   SELECT * FROM t1 WHERE column1 = (SELECT column1 FROM t2);   当中, ...

  6. 洛谷T51924 忘情

    二分上界有多大开多大 二分上界有多大开多大 二分上界有多大开多大 重要的事情说三遍 又被bright神仙带着做题了 先无脑上wqs二分 我们可以把这个柿子画一下,区间的花费就变成((sigema(l~ ...

  7. uva 12265 贩卖土地

    题目大意: 有一个矩阵 有些点可以取有些不能 求以每个点为右下角的子矩阵(里面点都可以取)的周长最大值 最后统计出每个周长对应矩阵的个数 思路: 单调栈 先预处理出每个点向上最多能延伸多长记为h(i, ...

  8. [JSOI 2008] 星球大战

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1015 [算法] 考虑离线 , 将删点转化为加点 , 用并查集维护连通性即可 时间复杂 ...

  9. MySQL-day1数据库的安装与介绍

    一.mysql的安装步骤 以5.7.20版本为例: 第1步: 第2步: 第3步: 第4步: 第5步: 第6步: 第7步: 第8步: 第9步: 第10步: 第11步: 第12步: 第13步: 第14步: ...

  10. PHP面向对象技术(全面讲解)

    作者:高洛峰    来源:<PHPer>杂志 1.面向对象的概念      面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机 ...