Я не могу найти разумный способ, который не похож на хак, решить эту довольно тривиальную проблему.
Я хочу, чтобы посетитель увидел всплывающую страницу, когда они обратились к индексу веб-сайта и зарегистрированному пользователю, чтобы просмотреть их профиль, причем каждая страница имеет собственный шаблон и контроллер. В идеале для одного URL должно существовать два состояния, и как-то я мог бы автоматически изменять активный в зависимости от состояния loggin. Оба эти представления будут иметь свои собственные вложенные представления, поэтому ng-include не может использоваться (я предполагаю).
Я новичок в angular и ui router, и думаю, что я мог бы игнорировать легкое решение проблемы.
Можно ли это сделать с именованными представлениями и ng-show?
Если вы используете UI-маршрутизатор, просто создайте три состояния: состояние root, с URL '/' и два прямых состояния потомков без URL-адресов. В onEnter состояния корня вы определяете состояние пользователя и соответствующим образом переходите к правильному дочернему состоянию. Это дает вид сохранения одного и того же URL-адреса для обоих дочерних состояний, но позволяет вам разделить состояния с отдельными конфигурациями.
templateUrl также может быть функцией, поэтому вы можете проверить состояние входа в систему и вернуть другое представление и определить контроллер в представлении а не как часть конфигурации состояния
Мое решение:
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/',
controller: function (Auth, $state) {
if (someCondition) {
$state.go('state1');
} else {
$state.go('state2');
}
}
});
});
где состояние 1 и состояние 2 определены в другом месте.
Для целей документов я использовал:
$rootScope.$on('$stateChangeStart', function(event, toState) {
if ((toState.name !== 'login') && (!$localStorage.nickname)) {
event.preventDefault();
$state.go('login');
}
});
Использование $routeChangeStart не помогло мне.
Если я пойму вопрос; вы хотите убедиться, что пользователь, который не вошел в систему, не может видеть страницу, требующую входа в систему. Это правильно?
Я сделал это с таким кодом внутри контроллера:
if(!'some condition that determines if user has access to a page'){
$location.path( "/login" );
}
В любом месте (возможно, в каком-то контроллере высокого уровня) вы должны просто привязать событие '$routeChangeStart' к $rootScope и выполнить проверку:
$rootScope.$on('$routeChangeStart', function(next, current){
if(next != '/login' && !userLoggedIn){
$location.path( "/login" );
}
});
Это будет срабатывать каждый раз, когда будет установлен новый маршрут, даже при первом посещении страницы.
Используется для меня условным видом в u-route
$stateProvider.state('dashboard.home', {
url: '/dashboard',
controller: 'MainCtrl',
// templateUrl: $rootScope.active_admin_template,
templateProvider: ['$stateParams', '$templateRequest','$rootScope', function ($stateParams, templateRequest,$rootScope) {
var templateUrl ='';
if ($rootScope.current_user.role == 'MANAGER'){
templateUrl ='views/manager_portal/dashboard.html';
}else{
templateUrl ='views/dashboard/home.html';
}
return templateRequest(templateUrl);
}]
});
То, как я это сделал, довольно просто. Я сделал один для нашей стратегии A/B-тестирования. Это суть:
resolve: {
swapTemplate: function(service) {
// all of this logic is in a service
if (inAbTest) {
this.self.templateUrl = '/new/template.html';
}
}
... other resolves
}
Это вызывается перед загрузкой шаблона, и поэтому вы можете поменять URL шаблона.
В моем случае, если два состояния могут совместно использовать логику одного контроллера, условный шаблон является хорошим выбором. В противном случае создание отдельных состояний является хорошим вариантом.