基本介绍

在控制中注入$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. Wps 2013 拼音标注两种方式分析

    Wps 2013 拼音标注两种方式分析 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转 ...

  2. android深入之设计模式（一）托付模式

    (一)托付模式简单介绍 托付模式是主要的设计模式之中的一个.托付.即是让还有一个对象帮你做事情. 更多的模式,如状态模式.策略模式.訪问者模式本质上是在更特殊的场合採用了托付模式. 托付模式使得我们能 ...

  3. Servlet之中文乱码问题【入门版】

    请求数据的中文问题 1 post请求提交中文 get请求建议不提交中文(只是也有方法解决) 1.1post request.setCharacterEncoding("utf-8" ...

  4. 获取SQLServer连接字符串的方法

     第一步:创建向导文件 在桌面创建一个txt文件,并将文件后缀改成“.udl”.    第二步:选择“提供程序”tab页 双击新创建的“.udl”文件,进入后选择“提供程序”tab页,选择“Micro ...

  5. FFmpeg将多张图片合成视频 子视频合并

    FFmpeg将多张图片合成视频 - CSDN博客 https://blog.csdn.net/wangshuainan/article/details/77914508 Slideshow – FFm ...

  6. 第一次PHP面试题

    1.标记符title是放在标记符什么之间:head 2.级联样式表文件的扩展名:CSS 3.html中<pre>的作用:pre 元素可定义预格式化的文本 4.mysql_affected_ ...

  7. 蓝桥 ADV-233 算法提高 队列操作 【STL】

      算法提高 队列操作   时间限制:1.0s   内存限制:256.0MB      问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. ...

  8. SpringMVC 运行过程

    加入jar包 在web.xml中配置DispatherServlet 加入SpringMVC配置文件 编写处理请求的处理器,并表示为处理器 编写视图 可见的运行流程: 实际的运行流程:

  9. ubuntu-10.10嵌入式开发环境搭建【转】

    本文转载自:http://blog.csdn.net/zjhsucceed_329/article/details/8036781 版权声明:本文为博主原创文章,未经博主允许不得转载. ubuntu- ...

  10. P1198 [JSOI2008]最大数（线段树）

    P1198 [JSOI2008]最大数(线段树) 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值 ...