AngularJS 配置路由

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

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

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

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

将所需要的CSS文件和JS文件引入到项目中index.html
- angular.min.js
- ocLazyLoad.js
- angular-ui-router.js

<!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页面

<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. 配置路由

配置各个页面的路由，通过懒加载加载所需要的文件

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',function ($ocLazyLoad) {
                        return $ocLazyLoad.load(['accountManagement/accountManagement.js','accountManagement/accountManagement.css']);
                    }]
            }
        })
        .state('dashboard.academicYear',{
            url: '/academicYear',templateUrl: 'academicYear/academicYear.html',controller: 'academicYearController',function ($ocLazyLoad) {
                        return $ocLazyLoad.load(['academicYear/academicYear.js','academicYear/academicYear.css']);
                    }]
            }
        })
        .state('dashboard.FeedbackManagement',{
            url: '/FeedbackManagement',templateUrl: 'FeedbackManagement/FeedbackManagement.html',controller: 'FeedbackManagementController',function ($ocLazyLoad) {
                        return $ocLazyLoad.load(['FeedbackManagement/FeedbackManagement.js','FeedbackManagement/FeedbackManagement.css']);
                    }]
            }
        });
});

4. 配置相应的页面controller

angular.module("adminApp").controllerProvider.register('dashboardController',function ($scope) {
    console.log("dashboardController");
});

AngularJS 配置路由

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

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

2. 配置dashboard页面

3. 配置路由

4. 配置相应的页面controller

猜你在找的Angularjs相关文章