Как запустить компонентное приложение Angular 1?

Используя угловой 1.6, вот компоненты, которые мне нужны:

+-------------------+
|side|              | 
|bar |              |
|... |     view     |
|... |              |
|... |              |
+-------------------+
  • боковая панель: расположена слева. используя ng-repeat и обновляет динамически.
  • вид: остальная часть приложения. шаблон статический, но содержимое меняется при нажатии на боковую панель.

когда пользователь нажимает на каждый список <li> боковой панели, он обновляет вид. только просмотр контента / модели изменится. не шаблон HTML.

Важно: я просто не хочу писать код на <body>, Хотелось бы иметь боковую панель в одном html-файле и просматривать в другом, связанном с их контроллерами, и рендерить все приложение через ng-view в <body>,

Боковая панель обновляется динамически, так что я не могу указать состояние в config() для каждого.

любая другая стандартная архитектура приветствуется.

Источник

1 ответ

Решение

Как уже упоминалось в комментариях, есть несколько вариантов архитектуры и структуры, которые можно сделать для реализации того типа шаблонов, который вы ищете. Я приведу базовый пример, основанный на том, что я использовал в прошлом с angular, используя ui-router и дочерние / вложенные представления.

Допустим, у вас есть index.html вроде:

<body>
    <div ui-view="header" class="header"></div>
    <div ui-view="main" class="main"></div>
    <div ui-view="footer" class="footer"></div>
</body>

Страница индекса имеет только макет для самого высокого уровня представления, а именно заголовок, содержимое и нижний колонтитул. Если вам не нужны верхний и нижний колонтитулы, вы можете просто проигнорировать / удалить их. Теперь макет, который вы ищете, с боковой панелью слева и содержимым справа, будет размещен в главном окне. Чтобы сделать это, давайте объявим еще одну страницу, которая определит эту структуру, назовите ее landing.html (для простоты используйте bootstrap):

<div class="container-fluid">
  <div class="row landingContainer">
    <div class="col-md-2 col-sm-4 col-xs-3 sidebarSection">
      <div class="row item" ng-click="landing.changePage('content1')">
        <span>Show Content 1</span>
      </div>
      <div class="row item" ng-click="landing.changePage('content2')">
        <span>Show Content 2</span>
      </div>
      <div class="row item" ng-click="landing.changePage('content3')">
        <span>Show Content 3</span>
      </div>
    </div> 
    <div class="col-md-10 col-sm-8 col-xs-9 contentSection">
      <div ui-view="content"></div>
    </div> 
  </div>
</div>

Вы можете думать об этой странице как о корне вашего макета. Страница разделена на левый и правый раздел с помощью столбцов начальной загрузки. Левая сторона содержит список всех ваших просмотров контента. Вы можете использовать li, я просто предпочитаю div. Правая сторона будет там, где находится динамическая часть страницы, где содержимое будет меняться в зависимости от элемента, выбранного на боковой панели. Каждый компонентный вид является дочерним по отношению к целевой странице, он наследует все функции родительского элемента, а затем добавляет свой собственный контент в представление пользовательского интерфейса, аналогично тому, как landing.html добавляет свой контент в основное пользовательское представление. Теперь давайте взглянем на конфигурацию ui-router, которая делает всю эту работу.

function routerConfig($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('landing', {
        url: '/landing',
        views: {
         'header': {
            templateUrl: 'app/components/header/headerPrivate.html',
            controller: 'HeaderController',
            controllerAs: 'header'
          },
          'main': {
            templateUrl: 'app/landing/landing.html',
            controller: 'LandingController',
            controllerAs: 'dashboard'
          },
          'footer': {
            templateUrl: 'app/components/footer/footer.html',
            controller: 'FooterController',
            controllerAs: 'footer'
          }
        }
      })
      .state('landing.content1', {
        url: '/content1',
        views: {
         'content': {
            templateUrl: 'app/content1/content1.html',
            controller: 'Content1Controller',
            controllerAs: 'content1'
          }
        }
      })
      .state('landing.content2', {
        url: '/content2',
        views: {
         'content': {
            templateUrl: 'app/content2/content2.html',
            controller: 'Content2Controller',
            controllerAs: 'content2'
          }
        }
      })
      .state('landing.content3', {
        url: '/content3',
        views: {
         'content': {
            templateUrl: 'app/content3/content3.html',
            controller: 'Content3Controller',
            controllerAs: 'content3'
          }
        }
      })
    $urlRouterProvider.otherwise('/');
}

Здесь вы заметите, что маршрут целевой страницы определяет конфигурацию для 3 основных видов: верхнего, главного и нижнего колонтитулов. Путь URL будет / посадка. Затем content1, content2 и content3 определяются как дочерние, вложив их в посадку с использованием точечной нотации: landing.content1. Пути URL для каждого дочернего элемента затем будут преобразованы в / Landing/ Content1, / Landing/ Content2, Landing/ Content3. Так что теперь, когда вы переходите в эти места, только контент для этого конкретного дочернего элемента будет вложен в пользовательский интерфейс "содержимого" целевых страниц, а оставшийся макет страницы останется прежним.

Для завершения, вот как может выглядеть контроллер посадки:

function LandingController($state) {
    var vm = this;

    vm.changePage = function(page){
        $state.transitionTo('landing.'+page, null, null);
    }    
}
Источник
Другие вопросы по тегам