您的位置：首页 > Web前端 > AngularJS

AngularJS 配置路由

2017-05-23 22:07 357 查看

在使用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',
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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航