Angular ui-router同时加载多个视图，根据不同url在同一个视图切换内容模板
郭兴文
Angular ui-router同时加载多个视图，根据不同url在同一个视图切换内容模板。
目的：点击sidebar切换在container中切换视图
- 入口页面 index.html 包含一个没名ui-view
- 登录页面 login.html 登录按钮ui-serf=”home”
- 主页面 home.html 包含三个有名ui-view 分别是header\sidebar\container
代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>登录</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../bower_components/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css"/>
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../bower_components/jquery.uniform/themes/default/css/uniform.default.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="css/login.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME STYLES -->
<link href="css/components-md.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="css/plugins-md.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link href="css/themes/light.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-md login" ng-app="UserManagerApp">
<div ui-view></div>
<!-- END LOGIN -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../bower_components/angular/angular.js" type="text/javascript"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../bower_components/oclazyload/dist/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../bower_components/jquery.uniform/dist/jquery.uniform.min.js" type="text/javascript"></script>
<script src="plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../bower_components/datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../bower_components/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="js/scripts/metronic.js" type="text/javascript"></script>
<script src="js/scripts/layout.js" type="text/javascript"></script>
<script src="js/scripts/demo.js" type="text/javascript"></script>
<script src="js/scripts/login.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
jQuery(document).ready(function() {
//Metronic.init(); // init metronic core components
//Layout.init(); // init current layout
Login.init();
//Demo.init();
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
login.html
其余关于登录页面的html自定义，就不贴了。
<button type="submit" class="btn btn-success uppercase" ui-sref="home">登录</button>home.html
<div ng-controller="AppController">
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div ui-view="header" data-ng-controller="HeaderController" class="page-header md-shadow-z-1-i navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div ui-view="sidebar" data-ng-controller="SidebarController" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN ACTUAL CONTENT-->
<div ui-view="container" class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- END CONTAINER -->
</div>sidebar.html
<div class="page-sidebar md-shadow-z-2-i navbar-collapse collapse" ng-controller="SidebarController">
<ul class="page-sidebar-menu" ng-siderbar-ul data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}">
<li class="start">
<a ui-sref=".userManager">
<i class="icon-home"></i>
<span class="title">用户管理</span>
</a>
</li>
<li>
<!--<a href="#/home/roleManager" > -->
<a ui-sref=".roleManager" >
<i class="icon-user"></i>
<span class="title">角色管理</span>
</a>
</li>
</ul>
</div>其他html页面就不一一粘了，也都只是写内容而已，根据需要显示的去布局编写页面就好了。
app.js
/***
Metronic AngularJS App Main Script
***/
/* Metronic App */
var UserManagerApp = angular.module("UserManagerApp", ["ui.router", "ui.bootstrap", "oc.lazyLoad", "ngSanitize"]);
/* Setup global settings */
UserManagerApp.factory('settings', ['$rootScope', function($rootScope) {
// supported languages
var settings = {
layout: {
pageSidebarClosed: false, // sidebar state
pageAutoScrollOnLoad: 1000 // auto scroll to top on page load
},
layoutImgPath: 'img/',
layoutCssPath: 'css/'
};
$rootScope.settings = settings;
return settings;
}]);
/* Setup Rounting For All Pages */
UserManagerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// Redirect any unmatched url
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html"
})
.state('home', {
url: "/home",
views: {
"": {
templateUrl: "home.html",
},
"header@home" : {
templateUrl: "tpls/header.html",
},
"sidebar@home": {
templateUrl: "tpls/sidebar.html",
},
"container@home" : {
templateUrl: "tpls/userManager.html",
controller: "userManagerCtrl"
},
},
resolve: {
UserManagerApp1: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'UserManagerApp',
cache : false,
files: [
'../bower_components/select2/dist/css/select2.min.css',
'../bower_components/datatables/media/css/dataTables.bootstrap.css',
'css/adcc-datatables.css',
'../bower_components/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js',
'../bower_components/jquery-slimscroll/jquery.slimscroll.min.js',
'../bower_components/select2/dist/js/select2.min.js',
'../bower_components/datatables/media/js/dataTables.bootstrap.js',
'js/scripts/table-advanced.js',
'js/directives/directives.js',
'js/controllers/homeCtrl.js',
'js/services/datatablesCommonService.js',
'js/controllers/userManagerCtrl.js'
]
});
}]
}
})
// Advanced Datatables
.state('home.userManager', {
url: "/userManager",
views : {
"container@home": {
controller: "userManagerCtrl",
templateUrl: "tpls/userManager.html",
}
},
resolve: {
UserManagerApp1: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'UserManagerApp',
cache : false,
files: [
'../bower_components/select2/dist/css/select2.min.css',
'../bower_components/datatables/media/css/dataTables.bootstrap.css',
'css/adcc-datatables.css',
'../bower_components/select2/dist/js/select2.min.js',
//'../bower_components/datatables/media/js/dataTables.bootstrap.js',
'js/scripts/table-advanced.js',
'js/services/datatablesCommonService.js',
'js/controllers/userManagerCtrl.js'
]
});
}]
}
})
.state('home.roleManager', {
url: "/roleManager",
views : {
"container@home": {
controller: "roleManagerCtrl",
templateUrl: "tpls/roleManager.html",
}
},
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'UserManagerApp',
insertBefore: '#ng_load_plugins_before',
cache : false,
files: [
'../bower_components/select2/dist/css/select2.min.css',
'../bower_components/datatables/media/css/dataTables.bootstrap.css',
'css/adcc-datatables.css',
'../bower_components/select2/dist/js/select2.min.js',
'../bower_components/datatables/media/js/dataTables.bootstrap.js',
'js/scripts/table-advanced.js',
'js/services/datatablesCommonService.js',
'js/controllers/userManagerCtrl.js'
]
});
}]
}
})
}]);
/* Init global settings and run the app */
UserManagerApp.run(["$rootScope", "settings", "$state", function($rootScope, settings, $state) {
$rootScope.$state = $state; // state to be accessed from view
}]);解释一下：
UserManagerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// Redirect any unmatched url
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html"
})
.state('home', {
url: "/home",
//多视图加载
views: {
"": {
templateUrl: "home.html",
},
//@home 将html加载到父视图是home的名为ui-view="header"的子视图下
"header@home" : {
templateUrl: "tpls/header.html",
},
"sidebar@home": {
templateUrl: "tpls/sidebar.html",
},
"container@home" : {
templateUrl: "tpls/userManager.html",
controller: "userManagerCtrl"
},
}
})
//根据url进行跳转，home.userManager意味值在home视图下
.state('home.userManager', {
url: "/userManager", //对应着html页面是ui-sref=".userManager" .意味着子级关系
views : {
//将html加载到父视图是home的名为ui-view="header"的子视图下
"container@home": {
controller: "userManagerCtrl",
templateUrl: "tpls/userManager.html",
}
}
})
.state('home.roleManager', {
url: "/roleManager",
views : {
"container@home": {
controller: "roleManagerCtrl",
templateUrl: "tpls/roleManager.html",
}
}
})
}]);
类似资料：