• $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
  • 相关阅读:
    Spring Boot开发Web应用
    使用阿里云Docker镜像加速
    六种微服务架构的设计模式
    HashMap按键排序和按值排序
    Docker搭建本地私有仓库
    Ubuntu 14.04主机上部署k8s集群
    Ubuntu 16.04下搭建kubernetes集群环境
    Docker中images中none的镜像删除
    docker 下 alpine 镜像设置时区的有效办法
    offsetLeft和style.left的区别
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/6643629.html
Copyright © 2020-2023  润新知