Как сделать login page с angular-ui/ui-router?

В index.html я добавил
<div ui-view></div>

В роуте
function routeConfig($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      })
      .state('login', {
        url: '/login',
        controller: 'LoginController',
        templateUrl: 'app/components/authentication/views/login.html'
      })
      .state('feed', {
        url: '/feed',
        templateUrl: 'app/feed/feed.html',
        controller: 'FeedController',
        controllerAs: 'feed'
      })
    ;

    $urlRouterProvider.otherwise('/');
  }


index.html у меня как скелет. Там подключаются хедер, футер. Но в логин пейдж мне все это не надо отображать. Как сделать кастомную страницу и на логин?
  • Вопрос задан
  • 790 просмотров
Решения вопроса 1
Я подобное делал и решил login вообще отдельно вывести(т.е. без роутинга ангуляровского),но у себя делал так например
ui-view="MainContentViev" если при login-e грузить его данные, а при остальных-соответственно их данные.
.state('training', {
            url: '/training',
			views: {
				'MainContentViev': { 
					templateUrl: 'static/templates/training.html'
				}
			}
        })

Есть index файл,который запрашивается с сервера-там подключение всех скриптов(ангуляра,роутинга и т.д.) и стилей, но данных-нет. Там пишу только в разметке ui-view="MainContentViev". Когда ui-роутинг видит, например '/training' он грузит в MainContentViev данные (1 раз-потом кеширует) по указанному пути. И ещё- не забудьте написать после роутинга
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});

И вставьте ещё $locationProvider здесь routeConfig($stateProvider, $urlRouterProvider,$locationProvider)
Ещё нюанс. Вы здесь создаёте много урлов, например /training , /exam ,/login , но сервер то их будет понимать по разному. Я это обошёл так- в сервере на все указанные адреса прописал вывод одного и того-же индексного файла, а о н уж потом разбирается и оформляет всё-таким образом-даже при перезагрузке страницы-будет восстановлено состояние из роутинга.
Впринципи и всё...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Первое что пришло в голову - оформить хидер и футер в ng-include и при нужном state не показывать. Но, думаю, есть поизящней способы
Ответ написан
Комментировать
matroskin13
@matroskin13
JavaScript developer, GO developer
заведите main state с такими параметрами:

.state('main', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      })


и в его шаблон не забудьте подключить футер и хедер, а так-же ещё один

url: '/',
templateUrl: 'ваш урл до шаблона с хедером и футером, и добавьте в этот шаблон ещё один ',
controller: 'Если нужен контроллер'
А все остальные state подключайте как дочерние:

.state('main.feed', {
        url: '/feed',
        templateUrl: 'app/feed/feed.html',
        controller: 'FeedController',
        controllerAs: 'feed'
      })
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы