我正在使用 MEAN.JS(不是 .IO)提供的样板 MEAN 开始一个新项目。
我是 ui-router 的新手,我无法弄清楚如何完成这个场景:
这是路由提供者当前的样子:
angular.module('core').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// Redirect to home view when route not found
$urlRouterProvider.otherwise('/');
// Home state routing
$stateProvider.
state('home', {
url: '/',
abstract: true
}).
state('home.loggedOut', {
templateUrl: 'modules/core/views/home.client.view.html'
}).
state('home.loggedIn', {
templateUrl: 'modules/core/views/dashboard.client.view.html'
});
}
]);
我正在寻找类似数据库术语中的预保存钩子(Hook)的东西,以确定要进入哪个状态。那会是什么样子?
最佳答案
有一个plunker提供如上所述的行为。首先,状态定义发生了变化,移动了 url
从 abstract 到两个子状态,并引入登录状态以供以后检查:
// Redirect to home view when route not found
$urlRouterProvider.otherwise('/');
// Home state routing
$stateProvider.
state('home', {
//url: '/',
abstract: true,
template: '<div ui-view=""></div>',
}).
state('home.loggedOut', {
url: '/',
...
}).
state('home.loggedIn', {
url: '/',
...
})
.state('logon', {
url: '/logon',
templateUrl: 'tpl.logon.html',
controller: 'LogonCtrl',
});
我们现在所做的是定义 2 个状态,具有相同的 url。第一个将被视为默认值..并使用。
现在,我们必须引入一个状态变化观察器,它将基于 AuthSvc 设置 重定向到正确的子状态。已登录 :
.run(['$rootScope', '$state', 'AuthSvc',
function($rootScope, $state, AuthSvc) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams
, fromState, fromParams) {
// logged out is logged out
var doRedirectToLoggedOut = !AuthSvc.isLoggedIn
&& toState.name === "home.loggedIn";
if (doRedirectToLoggedOut) {
event.preventDefault();
$state.go("home.loggedOut");
}
// logged in is logged in
var doRedirectToLoggedIn = AuthSvc.isLoggedIn
&& toState.name === "home.loggedOut";
if (doRedirectToLoggedIn) {
event.preventDefault();
$state.go("home.loggedIn");
}
});
}])
如this example实际显示,直到我们更改 已登录 (点击登录链接)我们被重定向到正确的子状态......即使我们想看到另一个
关于angularjs - Angular UI 路由器 : nested states for home to differentiate logged in and logged out,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25191768/