【发布时间】：2015-06-12 13:38:48
【问题描述】：
最初的问题
我最初的目标是在我的 angularJS 应用程序的管理仪表板之外创建一个登录页面。我遇到的问题是登录页面始终包含在管理仪表板骨架中，因为它是一个单页应用程序并且仪表板骨架位于 index.html
解决方案 1
有人向我建议 ui 路由，所以我使用它并能够创建登录页面和管理仪表板。
解决方案 1 问题
现在我遇到的问题是管理仪表板在导航时无法正常工作。因为管理仪表板标题和侧边栏应该是我浏览的页面的骨架。但是我不确定如何再次设置它。它最初起作用是因为管理仪表板标题和侧边栏是 index.html 的一部分，现在它是 header.html 模板的一部分。
这是我的 routes.js 代码：
angular.module('RDash').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider, $routeProvider, $locationProvider) {
// Login
$stateProvider
.state('login', {
url: "",
views: {
"viewA": {
templateUrl: "templates/login.html"
}
}
})
.state('adminDashboard', { //admin Dashboard
url: "/adminDashboard",
views: {
"viewA": {
templateUrl: "templates/header.html"
}
}
})
.state('dashboard', { //dashboard nav link in admin dashboard
url: '/dashboard',
templateUrl: 'templates/dashboard.html'
})
.state('tables', { //tables nav link in admin dashboard
url: '/tables',
templateUrl: 'templates/tables.html'
})
.state('question', { //question nav link in admin dashboard
url: '/question',
templateUrl: 'templates/question.html'
});
}
]);
如您所见，有两个大视图，adminDashboard 和 login，在 adminDashboard 视图内部，还有一个用于其他三个路由的导航栏：dashboard、表格和问题
这是我的 index.html 代码：
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Application</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<!-- NAVBAR FOR LOGIN AND DASHBOARD-->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="login">Quick Start</a>
<ul class="nav">
<li><a ui-sref="login">login</a></li>
<li><a ui-sref="adminDashboard">dashboard</a></li>
</ul>
</div>
</div>
<h1>Application</h1>
<div class="row">
<div class="span6">
<!-- div tag for ui-view-->
<div class="well" ui-view="viewA"></div>
</div>
</div>
</body>
</html>
我为索引页面创建了一个导航栏，用于从登录到管理仪表板（只是临时的），正如您所见，ui-view 的 div 标记通过在index.html 页面
那么我们如何让其他三个路由（仪表板、表格和问题）再次成为管理仪表板骨架的一部分？
我不确定我是否采取了正确的方法来完成这项工作
我也希望我能清楚地解释我的目标。请询问，如果我的解释有任何含糊之处，我会更新
提前谢谢你
【问题讨论】：
标签： angularjs angular-ui-router