Устойчивые элементы страницы urilejs ui-router

Я пытаюсь раздобыть голову вокруг angularjs и ui-router в настоящее время, мое приложение разделено на 3 макета в основном (макет маркетинга, макет проверки подлинности & Application Layout). Я в настоящее время изо всех сил пытаюсь заставить мой ui-router работать, чтобы позволить мне сделать это, я понимаю, что у меня могут быть родительские состояния, которые абстрагированы (правильно?), Но я борется за то, чтобы заставить дочерние состояния наследовать родительские взгляды и т. Д.Устойчивые элементы страницы urilejs ui-router

В основном я хочу сделать следующее: я буду использовать раздел приложения сайта для примера.

Пользователь зарегистрирован в журнале, а экран разбит на заголовок, боковую панель и главную область содержимого, где пользователь когда-либо входит в область приложения сайта, заголовок и боковая панель остаются, но основной коннект будет обновляться до соответствующего содержимого. Вот что у меня есть до сих пор

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider){ 

$urlRouterProvider.otherwise('/application/dashboard'); 

$stateProvider 
    .state('application', { 
     abstract : true, 
     views : { 
      '@' : { 
       templateUrl : 'templates/layout.html', 
       controller : 'applicationController' 
      }, 
      '[email protected]' : { 
       templateUrl : 'templates/app/header.html' 
      }, 
      '[email protected]' : { 
       templateUrl : 'templates/app/sidebar.html' 
      }, 
      '[email protected]' : { 
       templateUrl : 'templates/app/main.html' 
      } 
     } 
    }) 
    .state('application.dashboard', { 
     url : '/application/dashboard', 
     views : { 
      '@' : { 
       templateUrl : 'templates/schools/manage.html', 
       controller : '' 
      }, 
      '[email protected]' : { 
       templateUrl : '' 
      } 
     } 
    })

}]);

https://plnkr.co/edit/6fJNjTFhoKqyN82P7NvL?p=preview

Как вы будете в состоянии видеть, что я могу видеть шаблон manage.html, но на предварительном просмотре я должен также увидеть заголовок страницы из шаблона header.html, и sidebar.html также .. .

Любые идеи относительно того, почему я не являюсь? Я предполагаю, что это то, что я делаю неправильно.

источник

2017-01-20 Udders

Если я понимаю, что вы говорите, вы в основном хотите скелет приложения заголовка, боковой панели и MainContent. Единственное, что должно измениться, это MainContent. Содержимое заголовка или боковой панели может измениться, но они будут постоянными.

Я лично считаю, что маршрутизатор не должен иметь никакого отношения к этому; маршрутизатор должен маршрутизировать. Наличие диспетчера данных и диспетчера состояний приложения, похоже, тесно связаны с вещами, которых не должно быть.

В любом случае, с учетом сказанного, вот как я это делаю. В моем index.html, вот моя разметка:

<body ng-app="app"> 
    <div header-directive></div> 
    <div ng-view></div> 
    <div footer-directive></div> 
</body>

Вот и все. Если у вас есть другие элементы и им нужно быть отзывчивыми, просто используйте загрузочную сетку (например, чтобы лежать в боковых панелях или что-то еще). Если вам не нужно беспокоиться об этом, хорошая «простая» таблица html делает работу отлично. Вы можете использовать CSS для фиксированного позиционирования, высоты и т. Д.

С помощью этой настройки ваш верхний и нижний колонтитулы никогда не исчезают, и маршрутизатор будет изменять контент только в ng-view. Вы используете маршрутизатор для того и другого, что термин «маршрутизатор» имеет смысл для: маршрутизации отсюда, туда. Вот пример конфигурации маршрутизатора:

.config(['$routeProvider', ... 

     function ($routeProvider, ...) { 

      $routeProvider. 

       when('/home', { 
        templateUrl: 'views/home.html', 
        controller: 'HomeController', 
        controllerAs: 'homeCtl' 
       }) 

       .when('/info', { 
        templateUrl: 'views/info.html', 
        controller: 'InfoController', 
        controllerAs: 'infoCtl' 
       }) 

       ....

Для связи между этими тремя компонентами, вы можете просто создать службу, что все они впрыснуть. Таким образом вы можете отправить любой из элементов (или все из них) инструкции по изменению их содержимого, скрыть/показать себя, что вам нужно.

Угловой иногда резко перекомплементивает что-то простое. Это определенно один из них. Маршрутизатор в Угловом 2 - сложный бегемот.

источник

2017-01-20 12:50:45

Устойчивые элементы страницы urilejs ui-router

ответ

Смежные вопросы