HelloWood

AngularJS 配置路由

2018-01-01

在使用AngularJS的时候需要用到路由来控制页面的跳转，从而达到使用一个面板进行控制的目的，面板页面如图所示

控制面板

该面板分为菜单栏和控制页面两部分，左侧和上方为不变的部分，中间区域随菜单选择变动

##项目下载 | GitHub下载 | 演示地址 | GitHub演示地址

1.引入所需的CSS和JS文件

  • 将所需要的CSS文件和JS文件引入到项目中index.html
  • angular.min.js
  • ocLazyLoad.js
  • angular-ui-router.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en" class="body">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1"/>
    <link href="../../plugin/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="dashboard/dashboard.css" rel="stylesheet">
</head>
<body >
<div data-ui-view="" style="height: 100%;overflow: hidden;"></div>
<script src="../../plugin/angular-1.5.8/angular.min.js"></script>
<script src="../../plugin/angular-1.5.8/angular-ui-router.js"></script>
<script src="../../plugin/oclazyload/ocLazyLoad.js"></script>
<script src="app.route.js"></script>
</body>
</html>

2. 配置dashboard页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="app app-header-fixed" id="app">
    <!-- navbar -->
    <div class="app-header navbar">
        <div class="collapse pos-rlt navbar-collapse box-shadow bg-white-only">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle clear">
                      <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                        <img src="/static/images/head.jpg">
                        <i class="on md b-white bottom"></i>
                      </span>
                        <span class="hidden-sm hidden-md">Administrator</span> <b class="caret"></b>
                    </a>
                    <!-- dropdown -->
                    <ul class="dropdown-menu animated fadeInRight w hidden-folded" role="menu">
                        <li>
                            <a href="#" role="menuitem">退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <!-- menu -->
    <div class="app-aside hidden-xs bg-dark">
        <div class="aside-wrap">
            <div class="navi-wrap">
                <!-- nav -->
                <nav ui-nav class="navi">
                    <ul class="nav">
                        <li>
                            <a ui-sref=".accountManagement" class="auto">
                                <i class="glyphicon glyphicon-user"></i>
                                <span class="font-bold">账户管理</span>
                            </a>
                        </li>
                        <li>
                            <a ui-sref=".academicYear">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <span class="font-bold">学年学期管理</span>
                            </a>
                        </li>
                        <li>
                            <a ui-sref=".feedbackManagement">
                                <i class="glyphicon glyphicon-send"></i>
                                <span class="font-bold">用户反馈管理</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- nav -->
            </div>
        </div>
    </div>
    <!-- / menu -->
    <!-- content 中间可替换的部分-->
    <div class="app-content">
        <div data-ui-view="">
        </div>
    </div>
    <!-- /content -->
</div>

##3. 配置路由

  • 配置各个页面的路由，通过懒加载加载所需要的文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    var adminApp = angular.module('adminApp', ['oc.lazyLoad', 'ui.router']);
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['adminApp']);
    });

    adminApp.run(function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    });
    adminApp.config(function ($stateProvider, $urlRouterProvider, $controllerProvider) {
        adminApp.controllerProvider = $controllerProvider;
        $urlRouterProvider.when("", "dashboard/accountManagement");
        $urlRouterProvider.otherwise("dashboard/accountManagement");
        $stateProvider
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: 'dashboard/dashboard.html',
                controller: 'dashboardController',
                resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load(['dashboard/dashboard.js']);
                    }]
                }
            })
            .state('dashboard.accountManagement', {
                url: '/accountManagement',
                templateUrl: 'accountManagement/accountManagement.html',
                controller: 'accountManagementController',
                resolve: {
                    deps: ['$ocLazyLoad',
                        function ($ocLazyLoad) {
                            return $ocLazyLoad.load(['accountManagement/accountManagement.js', 'accountManagement/accountManagement.css']);
                        }]
                }
            })
            .state('dashboard.academicYear', {
                url: '/academicYear',
                templateUrl: 'academicYear/academicYear.html',
                controller: 'academicYearController',
                resolve: {
                    deps: ['$ocLazyLoad',
                        function ($ocLazyLoad) {
                            return $ocLazyLoad.load(['academicYear/academicYear.js', 'academicYear/academicYear.css']);
                        }]
                }
            })
            .state('dashboard.feedbackManagement', {
                url: '/feedbackManagement',
                templateUrl: 'feedbackManagement/feedbackManagement.html',
                controller: 'feedbackManagementController',
                resolve: {
                    deps: ['$ocLazyLoad',
                        function ($ocLazyLoad) {
                            return $ocLazyLoad.load(['feedbackManagement/feedbackManagement.js', 'feedbackManagement/feedbackManagement.css']);
                        }]
                }
            });
    });

##4. 配置相应的页面controller

1
2
3
angular.module("adminApp").controllerProvider.register('dashboardController', function ($scope) {
    console.log("dashboardController");
});
Tags: AngularJs Router
← Nginx 配置 AngularJS配置Router(路由)提示Controller NaNunction/undefined错误 →