Angular——路由参数

基本介绍

在控制中注入$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>

 

posted @ 2018-02-28 07:07  var_obj  阅读(314)  评论(0)  编辑  收藏  举报