第26篇：AngularJS+ui-router实现一个超简单的登陆和跳转的二级路由demo

最新推荐文章于 2024-05-14 06:48:14 发布

骑着代马去流浪

最新推荐文章于 2024-05-14 06:48:14 发布

阅读量4.8k

点赞数

分类专栏： AngularJS 文章标签： ui-router二级路由

本文链接：https://blog.csdn.net/weixin_36185028/article/details/78684508

版权

AngularJS 专栏收录该内容

29 篇文章 5 订阅

订阅专栏

1.页面结构介绍：

1）index.html:页面入口文件；

2）views文件夹下：

login文件夹下：登陆页面和对应控制器；

home文件夹下：

home.html/home.js:二级路由页面和对应的控制器

adv/list文件夹:二级页面和对应的控制器文件

3）lib文件夹：引入的框架文件

4）common文件夹：公共样式和脚本等文件

2.定义路由

入口文件index/index.html

引入angularJS框架，对应的iu-router插件和oclazyload懒加载插件；

定义ng-app指令；

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>NTDATA</title>
	<link rel="stylesheet" href="common/css/style.css">
	<script src="lib/angular.min.js"></script>
	<script src="lib/angular-ui-router.min.js"></script>
	<script src="lib/ocLazyLoad.min.js"></script>
	<script src="common/script/main.min.js"></script>
</head>
<body>
	<ui-view></ui-view>			
</body>
</html>

路由文件index/common/script/main.js:

依赖注入对应的模块，定义一级路由和子路由，压缩后在index.html页面引入

'use strict';
var app = angular.module('app', ['ui.router','oc.lazyLoad']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
	$urlRouterProvider.otherwise('home');
	$stateProvider
		.state('login',{
			url:'/login',
			templateUrl:'./views/login/login.html',
			controller:'login',
			resolve:{
				loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) {
			        return $ocLazyLoad.load('./views/login/login.js');
			    }]
			}
		})
		.state('home',{
			url:'/home',
			templateUrl:'./views/home/home.html',
			controller:'home',
			resolve:{
				loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) {
			        return $ocLazyLoad.load('./views/home/home.js');
			    }]
			}
		})
		.state('home.advList',{
			url:'/advertiser',
			templateUrl:'./views/home/adv/list/list.html',
			controller:'advList',
			resolve:{
				loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) {
			        return $ocLazyLoad.load('./views/home/adv/list/list.js');
			    }]
			}
		})
		.state('home.chList',{
			url:'/channel',
			templateUrl:'./views/home/channel/list/list.html',
			controller:'chList',
			resolve:{
				loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) {
			        return $ocLazyLoad.load('./views/home/channel/list/list.js');
			    }]
			}
		})
}])

二级路由入口页面index/views/home.html

<div>
	<span ui-sref=".advList"><a href="">adv</a></span>
	<span ui-sref=".chList"><a href="">channel</a></span>
	<span ui-sref="login"><a href="">登出</a></span>
	<div ui-view=""></div>
</div>

对应的控制器index/views/home.js

angular.module('app').controller('home',['$state',function($state){
	$state.go('home.advList');
}])

其他子页面和对应的控制器
adv/list/list.html:

<div>
	advList
</div>

adv/list/list.js:

angular.module('app').controller('advList',['$scope',function($scope){
	
}])

channel/list/ist.html:

<div>
	channelList
</div>

channel/list/list.js:

angular.module('app').controller('chList',['$scope',function($scope){
	
}])

3.效果欣赏

骑着代马去流浪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
第26篇：AngularJS+ui-router实现一个超简单的登陆和跳转的二级路由demo

1.页面结构介绍：1）index.html:页面入口文件；2）views文件夹下：login文件夹下：登陆页面和对应控制器；home文件夹下：home.html/home.js:二级路由页面和对应的控制器adv/list文件夹:二级页面和对应的控制器文件3）lib文件夹：引入的框架文件4）common文件夹：公共样式和脚本等文件2.定义路由入
复制链接

扫一扫