1
我想使用模糊管理模板在我的角度应用程序上实现登录系统。模糊管理侧栏菜单不显示？
我知道有auth.html但我想要的是自定义。
我的想法是当未经身份验证的用户打开应用程序页面时，我的应用程序将加载auth.html内容的login.html内容并放入index.html，否则我的应用程序将加载main.html，其中包含dashboard.html容器并将在index.html中，然后加载dashboard.html。
所以在我的应用程序的根我有index.html，login.html，main.html
index.html
...
all css component here
...
<body>
<div ui-view style="height: 100%;">
</div>
...
all js component here
...
</body>
login.html的auth.html
<main class="auth-main">
<div class="auth-block">
<h1>Sign in to Blur Admin</h1>
<a href="reg.html" class="auth-link">New to Blur Admin? Sign up!</a>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn-auth">Sign in</button>
<a href class="forgot-pass">Forgot password?</a>
</div>
</div>
</form>
<div class="auth-sep"><span><span>or Sign in with one click</span></span></div>
<div class="al-share-auth">
<ul class="al-share clearfix">
<li><i class="socicon socicon-facebook" title="Share on Facebook"></i></li>
<li><i class="socicon socicon-twitter" title="Share on Twitter"></i></li>
<li><i class="socicon socicon-google" title="Share on Google Plus"></i></li>
</ul>
</div>
</div>
</main>
main.html只是主要内容是befor的index.html主要内容e修改。
<div class="body-bg"></div>
<main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }">
<ba-sidebar></ba-sidebar>
<page-top></page-top>
<div class="al-main">
<div class="al-content">
<content-top></content-top>
<div ui-view></div>
</div>
</div>
<footer class="al-footer clearfix">
<div class="al-footer-right">Created with <i class="ion-heart"></i></div>
<div class="al-footer-main clearfix">
<div class="al-copy">Blur Admin 2016</div>
<ul class="al-share clearfix">
<li><i class="socicon socicon-facebook"></i></li>
<li><i class="socicon socicon-twitter"></i></li>
<li><i class="socicon socicon-google"></i></li>
<li><i class="socicon socicon-github"></i></li>
</ul>
</div>
</footer>
<back-top></back-top>
</main>
<div id="preloader" ng-show="!$pageFinishedLoading">
<div></div>
</div>
app/pages/pages.module.js负荷我的其他页面，并授权检查
/**
* @author v.lugovsky
* created on 16.12.2015
*/
(function() {
'use strict';
angular.module('BlurAdmin.pages', [
'angularCSS', //css lazy load
'ui.router',
'BlurAdmin.pages.dashboard', //dashboard page
'BlurAdmin.pages.transaksi', //my other page
'BlurAdmin.pages.ui',
'BlurAdmin.pages.components',
'BlurAdmin.pages.form',
'BlurAdmin.pages.tables',
'BlurAdmin.pages.charts',
'BlurAdmin.pages.maps',
'BlurAdmin.pages.profile',
])
.config(routeConfig).run(function ($rootScope, $state, authFactory){
$rootScope.$state = $state;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
authFactory.isAuthenticated().then(function (response) {
//authenticated user will go to dashboard
$state.transitionTo('home.dashboard')
}, function (error) {
event.preventDefault();
//unauthenticated user will go to login
$state.transitionTo("login");
});
});
});
/** @ngInject */
function routeConfig($urlRouterProvider, $stateProvider, baSidebarServiceProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'main.html',
authenticate: true,
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
title: 'Login',
authenticate: false,
css: 'app/auth.css' //css lazy load
});
$urlRouterProvider.otherwise('/login');
....
....
....
app/pages/dashboard/dashboard.module.js
/**
* @author v.lugovsky
* created on 16.12.2015
*/
(function() {
'use strict';
angular.module('BlurAdmin.pages.dashboard', [])
.config(routeConfig);
/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('home.dashboard', {
url: '/dashboard',
templateUrl: 'app/pages/dashboard/dashboard.html',
title: 'Dashboard',
css: 'app/main.css', //css lazy load
sidebarMeta: {
icon: 'ion-android-home',
order: 0,
},
authenticate: true,
});
}
})();
app/pages/transaksi/transaksi.module.js
(function() {
'use strict';
angular.module('BlurAdmin.pages.transaksi', [
'BlurAdmin.pages.transaksi.sewa', //sub menu for transaksi
'ngFileUpload'
])
.config(routeConfig)
function routeConfig($stateProvider){
$stateProvider
.state('home.transaksi', {
url: '/transaksi',
title: 'Transaksi',
sidebarMeta: {
icon: 'ion-grid',
order: 100
}
});
}
})();
app/pages/transaksi/sewa/sewa.module.js路由的transaksi的子菜单
(function() {
'use strict';
angular.module('BlurAdmin.pages.transaksi.sewa', [])
.config(routeConfig);
function routeConfig($stateProvider){
$stateProvider
.state('home.transaksi.sewa', {
url: '/sewa',
templateUrl: 'app/pages/transaksi/sewa/sewa.html', //contain something simple just "this is sewa page"
controller: 'SewaCtrl',
title: 'Sewa',
authenticate: true,
sidebarMeta: {
order: 0
}
});
}
})();
我目前正在验证用户，所以当我打开重定向到http://localhost:3000/account/#/home/dashboard
但正如标题所说仪表盘菜单和我的自定义页面transaksi包括分级别名称自营职业妇女协会不会出现这样的
我已经检查通过检查元素也许它只是CSS问题，不幸的是没有。
，当我去http://localhost:3000/account/#/home/transaksi/sewa我重定向到http://localhost:3000/account/#/home/dashboard而不是显示this is sewa page。
为什么会发生这种事？以及如何解决它？
在此先感谢。
你的路线在哪里？对于那条路？ – Aravind
@aravind哪条路？ '家用/ dashboard'？在上面显示的dashboard.module.js。和'/ home'在pages.module.js –
检查下面的答案 – Aravind