AngularJs之ui.router路由基本配置及传参方法

最新推荐文章于 2020-02-22 22:08:25 发布

K'illCode

最新推荐文章于 2020-02-22 22:08:25 发布

阅读量3.2k

点赞数 1

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277592

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

使用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);

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

K'illCode

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AngularJs之ui.router路由基本配置及传参方法

使用AngularJs可以方便的做出单页面应用，既然是应用，那就涉及到页面跳转的问题，使用Angularjs的路由插件可以方便的使用路由功能，而且可以传参非常容易。代码如下：路由插件：angular-ui-router.js。文件：index.html01&lt;!DOCTYPE HTML&gt;02&lt;html lang="en"&gt;03&lt;head&gt;04 &lt;met...
复制链接

扫一扫