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

「爱情、让人受尽委屈。」 2022-06-04 01:53 83阅读 0赞

#### 1.页面结构介绍： ####

![20171201110804545][]

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.效果欣赏 ####

![20171201114918168][]