приличный URL с вложенным пользовательским интерфейсом в AngularJs

Question

приличный URL с вложенным пользовательским интерфейсом в AngularJs

0

Мы все знаем, что Angular является SPA (одностраничное приложение). Я хочу знать правильное решение, где я могу показать одну главную страницу выбора левой стороны меню, и когда пользователь нажимает что-либо из меню, он должен находиться в правом боковом представлении div.

У меня это есть и реализовано так.

  $stateProvider
        .state('home', {
           url: '/',
           cache: false,
           templateUrl : 'resources/components/home/home.html',
            controller : 'homeController',

         }).state('main', {
            url: '/main',
           templateUrl : 'resources/components/dashboard/main.html',
            controller : 'dashboardController',


        }).state('main.profile', {
            url: '/profile',
           templateUrl : 'resources/components/clinicprofile/profile.html',
            controller : 'profileController',

мой метод работает именно так...

на самой первой странице /# я показываю страницу входа, и когда пользователь вводит логин, он перенаправляет на #/main, где отображается только левая строка меню, а когда пользователь переходит на страницу профиля, URL становится как #/main/profile из-за ui view в main.html, так что main.html может содержать в себе все остальные представления (profile., setting.html и т.д.).

то, что я хочу, когда пользовательский логин, он должен быть перенаправлен на страницу профиля и профиля, будет там с левой колонкой.. снова, если пользователь нажмет на настройку в левой строке меню, он должен быть перенаправлен на/параметр, но в этом случае у меня есть для перезагрузки всей страницы и содержимого main.html будет отображаться на каждой странице.. то опять же, в чем смысл SPA, если я даю каждой странице полный контент, например, верхний колонтитул в левой панели меню... есть ли какое-либо решение, где слева столбец будет там, и пользователь может пользоваться приличным URL-адресом, например /profile,/setting, а не /main/profile, main/setting.

Надеюсь, у тебя есть мой вопрос.

Aman 04 сен. 2016, в 12:25

Источник

Теги:

javascript

html

angularjs

css

angular-ui-router

1 ответ

Ещё вопросы

Robert Sandu · Answer 1 · 2016-09-05T16-23-00.000Z

Да, вы можете определить отдельные виды для бокового меню, главного меню, добавить и т.д. И повторно использовать их. Например, вы можете создать файл sidemenu.html и поместить его в ресурсы/компоненты/панель управления, а затем повторно использовать его как для основного, так и для main.profile.

 $stateProvider
        .state('home', {
           url: '/',
           cache: false,
           templateUrl : 'resources/components/home/home.html',
            controller : 'homeController',

         }).state('main', {
            url: '/main',
            views: {
                '': {
                    templateUrl : 'resources/components/dashboard/main.html',
                    controller : 'dashboardController',
                },

                'nav@main': {
                    templateUrl : 'resources/components/dashboard/sidemenu.html'
                }
            }

        }).state('profile', {
            url: '/profile',
            views: {
                '': {
                    templateUrl : 'resources/components/clinicprofile/profile.html',
                    controller : 'profileController',
                },

                '[email protected]': {
                    templateUrl : 'resources/components/dashboard/sidemenu.html'
                }
            }
        });

А в index.html у вас есть что-то вроде этого:

<div ui-view></div>
<div ui-view="nav"></div>