基本介绍

在控制中注入$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. 免费好用的Microsoft iSCSI Software Target 3.3

    我们在搭建Windows群集的时候往往会使用到IP-SAN.但是面对昂贵的硬件IP-SAN,我们在学习和实验的环境中更加多的用到的往往是软件模拟的IP-SAN.今天就给大家介绍一个微软出品的免费iSC ...

  2. android动态控制组件的位置、大小和新的动画

    一.动态设置组件的位置 当中view是须要改变位置的控件,top是须要设制的位置: private static void setLayoutX(View view,int top)  { //克隆v ...

  3. HDMI接口基础知识及硬件设计

    参考资料:http://blog.csdn.net/u013625961/article/details/53434189: http://blog.csdn.net/u014276460/artic ...

  4. Nginx入门详解文档

    1 文章内容 掌握nginx+tomcat反向代理的使用方法. 掌握nginx作为负载均衡器的使用方法. 掌握nginx实现web缓存方法. 2 nginx介绍 2.1 什么是nginx Nginx是 ...

  5. android 7源码的下载【转】

    本文转载自:http://www.jianshu.com/p/0799435daf8e android 7源码的下载 step: 1.ubuntu 环境 2.打开终端(快捷键:ctrl + alt + ...

  6. spark groupByKey().mapValues

    >>> rdd = sc.parallelize([("bone", 231), ("bone", 21213), ("jack&q ...

  7. 怎么样关掉红米note开发者选项

    进 系统设置\应用 ,找到“设置”点进去,清一下数据,再打开“设置”查看,就没有“开发者选项”了

  8. [ZJOI 2007] 矩阵游戏

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1059 [算法] 二分图最大匹配 时间复杂度 : O(N^3) [代码] #inclu ...

  9. ModuleNotFoundError: No module named 'cStringIO'

    这是2.x转3.x问题: 2.x写法: import cStringIO 3.x写法: from io import StringIO 问题解决.

  10. luogu3605晋升者计数

    https://www.zybuluo.com/ysner/note/1282069 题面 给一颗带点权的树,求每个点的子树中比该点权值大的点的个数. \(n\leq10^5\) 解析 首先有个很无脑 ...