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

Question

[jack3d]

В 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 у меня как скелет. Там подключаются хедер, футер. Но в логин пейдж мне все это не надо отображать. Как сделать кастомную страницу и на логин?

Answer 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 , но сервер то их будет понимать по разному. Я это обошёл так- в сервере на все указанные адреса прописал вывод одного и того-же индексного файла, а о н уж потом разбирается и оформляет всё-таким образом-даже при перезагрузке страницы-будет восстановлено состояние из роутинга.
Впринципи и всё...

Comments

[jack3d]

Напишите, пожалуйста, подробнее ваш ответ.

[Роман Ракзин]

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

[jack3d]

Спасибо огромное за ответ! Я все понял :)

[Валентин Дубровский]

jack3d: я надеюсь кроме вас никто не воспользуется этим быдло решением, уж простите

[Роман Ракзин]

Валентин Дубровский: Ну если ты такой умный- распиши, как делают гении и об этом узнают все- только не фрагментом из нескольких строчек, а полностью, что б было понятно. Я думаю, тебе на форуме будут благодарны

[Валентин Дубровский]

Роман Ракзин: мы с вами на ты перешли? прикольно. Я внизу расписал как это делаю "тру" пацаны, советую посмотреть. А ну и да, зачем расписывать, если поисковая выдача выдаёт множество страниц на эту тему.

[Роман Ракзин]

Ок. Я не имею большого опыта в программировании- на самом деле я врач. Просто мне для себя интересно- что в моём примере не так? может буду использовать Ваш вариант. У меня всё работает-данные грузятся во вью, как я и описал и при перезагрузке страницы получаю индексный файл, а его роутинг потом подгружает нужную вью и в тоже время, когда меняю url- страница не перезапускается- впринципи то- чего я хотел у себя в приложении. Единственно, я у себя login вывел отдельно, дабы не грузить индексный файл, пока чел не залогинется

Answer 2

[Сергей]

Первое что пришло в голову - оформить хидер и футер в ng-include и при нужном state не показывать. Но, думаю, есть поизящней способы

Answer 3

[Валентин Дубровский]

заведите 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'
      })

Comments

[jack3d]

function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('main.dashboard', {
url: '/dashboard',
templateUrl: 'app/main/dashboard.html',
controller: 'DashboardController',
controllerAs: 'dashboard'
})
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'app/components/authentication/views/login.html'
})
.state('main.feed', {
url: '/feed',
templateUrl: 'app/feed/feed.html',
controller: 'FeedController',
controllerAs: 'feed'
})
;

$urlRouterProvider.otherwise('/');
}

[Валентин Дубровский]

jack3d: url: 'dashboard'