$routeParams传递路由参数

$routeParams传的值是一个对象数组。

案例：

index.html

 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>
index.html

 

one.html

 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>
one.html

 

two.html

1 <div>
2     第二个页面
3 </div>
4 <div>
5     {{name}}{{pass}}
6 </div>
two.html

 

控制器

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 }
controller.js

 

模块

 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);
module

 

posted @ 2017-03-30 07:25  最爱小虾  阅读(1183)  评论(0)  编辑  收藏  举报