在使用AngularJS的时候需要用到路由来控制页面的跳转，从而达到使用一个面板进行控制的目的，面板页面如图所示@H_403_2@
项目下载 | GitHub下载 | 演示地址 | GitHub演示地址
1.引入所需的CSS和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");
}); 原文链接：https://www.f2er.com/angularjs/147222.html