AngularJs之ui.router路由基本配置及传参方法_angularjs ui-router路由上增加参数

作者：正经夜光杯 | 2024-08-21 01:41:35

踩

angularjs ui-router路由上增加参数

使用AngularJs可以方便的做出单页面应用，既然是应用，那就涉及到页面跳转的问题，使用Angularjs的路由插件可以方便的使用路由功能，而且可以传参非常容易。

代码如下：

路由插件：angular-ui-router.js。

文件：index.html

01<!DOCTYPE HTML>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>路由测试</title>
06    <style type="text/css">
07        td{height:30px;line-height:30px;border:1px solid #ccc;text-align:center;padding:0 10px;}
08    </style>
09</head>
10<body ng-app="app">
11    <div class="nav">
12        <a ui-sref="home">首页</a>
13        <a ui-sref="list">列表页</a>
14        <a ui-sref="article">文章页</a>
15    </div>
16    <div ng-controller="ctr">
17        <a href="javascript:;" ng-click="fn('hello', 'world');">点我</a>
18    </div>
19    <div ui-view></div>
20</body>
21</html>
22<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
23<script type="text/javascript" src="http://www.zymseo.com/js/angular-ui-router.js"></script>
24<script type="text/javascript">
25    var m = angular.module('app', ['ui.router']);
26    m.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
27        //默认路由,没有匹配的路由时，跳转到这个地址
28        $urlRouterProvider.otherwise('/home');
29        //自定义路由，点击某个链接跳转的链接
30        $stateProvider.state('home', {
31            url : '/home',
32            templateUrl : function(){
33                return './home.html';
34            }
35        })
36        .state('list', {
37            url : '/list',
38            templateUrl : function(){
39                return  './list.html';
40            },
41            controller : 'ctr'
42        })
43        .state('article', {
44            url : '/article',
45            params : {a:'', b:''},
46            templateUrl : function($routerParams){
47                return  './article.html?a='+$routerParams.a+'&b='+$routerParams.b;
48            },
49            controller : 'ctr'
50        })
51        .state('webcontent', {
52            url : '/webcontent/{id}',//ui-sref中的接受参数
53            templateUrl : function(){
54                return './web_content.html';
55            },
56            controller : 'ctr'
57        })
58    }]);
59    //控制器中使用到了$scope、$http、$stateParams、$state等服务
60    m.controller('ctr', ['$scope', '$http', '$stateParams', '$state', function($scope, $http, $stateParams, $state){
61        //使用$scope服务从服务端获取数据
62        var obj = $http({
63            url : './test.php',
64            method : 'post'
65        }).then(function(result){
66            $scope.webList = result.data;
67            return $scope.webList;
68        });
69        //解析obj对象
70        obj.then(function(result){
71            for(var i=0; i<result.length; i++){
72                if($stateParams.id==result[i].webid){
73                    $scope.webname = result[i].webname;
74                    break;
75                }
76            }
77        });
78        //自定义网址跳转方法，并传参
79        $scope.fn = function(a, b){
80            $state.go('article', {a:a, b:b});
81        }
82         
83        //通过$stateParams服务获取网址中的参数
84        if($stateParams.a){
85            $scope.a = $stateParams.a;
86        }
87        if($stateParams.b){
88            $scope.b = $stateParams.b;
89        }
90    }]);
91</script>

文件：home.html

01<!DOCTYPE HTML>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title></title>
06</head>
07<body>
08    <h1>这里是首页</h1>
09</body>
10</html>

文件：list.html

01<!DOCTYPE HTML>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title></title>
06</head>
07<body>
08    <table cellpadding="0" cellspacing="0">
09        <thead>
10            <tr>
11                <td>ID</td>
12                <td>网站名称</td>
13                <td>网站地址</td>
14            </tr>
15        </thead>
16        <tbody>
17            <tr ng-repeat="(k, v) in webList">
18                <td>{{v.webid}}</td>
19                <td><a ui-sref="webcontent({id:v.webid})">{{v.webname}}</a></td><!--ui-sref传参-->
20                <td>{{v.weburl}}</td>
21            </tr>
22        </tbody>
23    </table>
24</body>
25</html>

文件：article.html

01<!DOCTYPE HTML>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title></title>
06</head>
07<body>
08    <h1>这里是文章页</h1>
09    {{a}}
10    {{b}}
11</body>
12</html>

文件：web_content.html

01<!DOCTYPE HTML>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title></title>
06</head>
07<body>
08    <h1>这里是：{{webname}}</h1>
09</body>
10</html>

文件：test.php

01<?php
02 
03header('Content-type:text/html;charset="utf8"');
04 
05$arry = array(
06    array('webid'=>'1', 'webname'=>'赵一鸣个人技术博客', 'weburl'=>'http://www.zymseo.com'),
07    array('webid'=>'2', 'webname'=>'太原雅辉装修网', 'weburl'=>'http://www.0351zhuangxiu.com')
08);
09 
10echo json_encode($arry);

以上几个文件放置到同一目录下即可！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/1009339