基本介绍

在控制中注入$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. how to get geometry type of layer using IMapServer3 and IMapLayerInfo? (C#)

    http://forums.arcgis.com/threads/11481-how-to-get-geometry-type-of-layer-using-IMapServer3-and-IMapL ...

  2. 条款二：最好使用c++转型操作符

    一.static_cast基本上拥有与c旧式转型相同的威力与意义,以及相同的限制,不能够移除表达式的常量性,const_cast负责这个功能 二.const_cast用来改变表达式中的常量性,如果将c ...

  3. Python学习系列之内置函数

    数学相关 abs(a):求取绝对值 max(list):求取list最大值 min(list):求取list最小值 sum(list):求取list元素的和 sorted(list):排序,返回排序后 ...

  4. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  5. DEDE织梦 后台特别卡，有时响应超时的解决办法

    跟大家一样,大致情况是: 1.打开后台首页第一次没问题,但是刷新或者点其他菜单就一直卡着了. 2.关掉浏览器重新进首页没问题,但是一旦进了首页再打开php页面就卡死了. 3.服务器返回Maximum ...

  6. mysql_connect 等待时间长，修改连接地址为127.0.0.1即可

    程序搬家后,运行非常慢分析流程: 1.外网的等待时间太长 2.内容等待时间也很长 3.断点查到仅仅一句 mysql_connect ("localhost",***,***)就要1 ...

  7. Linux/Android——Input系统之InputReader (七)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/42739197 在前文Linux/Android——Input系统之frameworks层Inpu ...

  8. finger的使用

    finger命令用来查询一台主机上的登录账号的信息,通常会显示用户名.主目录.停滞时间.登录时间.登录Shell等信息,使用权限为所有用户. 安装 sudo apt-get install finge ...

  9. 7 Worksheet 对象

    7.1 设置阶段 代码清单7.1:使用Parent属性获得一个对象的父对象的指针 '使用Parent属性获得一个对象的父对象的指针 Sub MeetMySingleParent() 'Declare ...

  10. POJ3675 Telescope 圆和多边形的交

    POJ3675 用三角剖分可以轻松搞定,数据也小 随便AC. #include<iostream> #include<stdio.h> #include<stdlib.h ...