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
<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"/><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"/><link href="css/login.css" rel="stylesheet" type="text/css"/><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"/><link rel="shortcut icon" href="favicon.ico"/>
head>
<body class="page-md login" ng-app="UserManagerApp"><div ui-view>div>
<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><script src="../bower_components/jquery-validation/dist/jquery.validate.min.js" type="text/javascript">script><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>
<script>jQuery(document).ready(function() {//Metronic.init(); // init metronic core components//Layout.init(); // init current layoutLogin.init();//Demo.init();});
script>
body>
html>
login.html
其余关于登录页面的html自定义，就不贴了。
home.html
<div ng-controller="AppController"><div ng-spinner-bar class="page-spinner-bar"><div class="bounce1">div><div class="bounce2">div><div class="bounce3">div>div><div ui-view="header" data-ng-controller="HeaderController" class="page-header md-shadow-z-1-i navbar navbar-fixed-top">div><div class="clearfix">div><div class="page-container"><div ui-view="sidebar" data-ng-controller="SidebarController" class="page-sidebar-wrapper">div><div class="page-content-wrapper"><div class="page-content"><div ui-view="container" class="fade-in-up">div>div>div>div>
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 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 languagesvar settings = {layout: {pageSidebarClosed: false, // sidebar statepageAutoScrollOnLoad: 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",}}})
}]);本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！