Angular ui-router同时加载多个视图，根据不同url在同一个视图切换内容模板

其他 2018-05-30 18:37:23 阅读次数: 1

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",
                }
            }
        })
}]);

猜你喜欢

转载自blog.csdn.net/u013938465/article/details/51820691
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022