$routeParams传递路由参数
$routeParams传的值是一个对象数组。
案例:
index.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="zh-cn" data-ng-app="myApp"> 3 <!--myApp这里要和module模型里的名称一样--> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 8 <title>angularjs</title> 9 <link rel="stylesheet" href="bootstrap/css/bootstrap.css" /> 10 <link rel="stylesheet/less" href="styles/site.less"> 11 <script src="scripts/jquery.js"></script> 12 <script src="bootstrap/js/bootstrap.js"></script> 13 <script src="scripts/less.js"></script> 14 <!--<script src="scripts/angular-1.2.5.js"></script>--> 15 <script src="../../angular.js"></script> 16 <!--路由--> 17 <script src="scripts/angular-route.js"></script> 18 <!--控制器--> 19 <script src="controller1.js"></script> 20 <!--模型--> 21 <script src="module.js"></script> 22 </head> 23 <body class="container"> 24 <header class="page-header"><h1>index</h1></header> 25 <section> 26 <div class="col-sm-6"> 27 <a class="btn btn-danger btn-block" href="#one">1</a> 28 </div> 29 <div class="col-sm-6"> 30 <a class="btn btn-primary btn-block" href="#two">2</a> 31 </div> 32 </section> 33 34 <section> 35 <div ng-view> 36 占位符 37 </div> 38 </section> 39 </body> 40 </html>
one.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div> 2 第一个页面 3 </div> 4 <p> 5 {{title}} 6 </p> 7 <form action=""> 8 <div class="form-group"> 9 <label class="control-label" for="name">姓名:</label> 10 <input ng-model="name" type="text" id="name" class="form-control"> 11 </div> 12 <div class="form-group"> 13 <label class="control-label" for="pass">密码:</label> 14 <input ng-model="pass" type="text" id="pass" class="form-control"> 15 </div> 16 <p> 17 <a href="#two?name={{name}}&pass={{pass}}" class="btn btn-primary">提交</a> 18 </p> 19 </form>
two.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div> 2 第二个页面 3 </div> 4 <div> 5 {{name}}{{pass}} 6 </div>
控制器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function textOne($scope) { 2 $scope.title="用户登录" 3 } 4 function textTwo($scope,$routeParams) { 5 console.log($routeParams); 6 $scope.name = $routeParams.name; 7 $scope.pass = $routeParams.pass; 8 }
模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //定义模块 2 var app = angular.module("myApp",['ngRoute']); 3 4 //配置驱动类 5 app.config(["$routeProvider",function ($routeProvider) { 6 $routeProvider 7 .when("/one",{ 8 templateUrl:"one.html", 9 controller:"oneCtrl" 10 }) 11 .when("/two",{ 12 templateUrl:"two.html", 13 controller:"twoCtrl" 14 }) 15 .otherwise({ 16 redirectTo:"/one" 17 }) 18 }]); 19 20 //添加控制器 21 app 22 .controller("oneCtrl",textOne) 23 .controller("twoCtrl",textTwo);
只有在泥泞的道路上才能留下脚印