基本介绍
在控制中注入$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>