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

你可能感兴趣的:(Angular日志)