Angular ui-router: ui-views против директив?

angular ui-router позволяет несколько вложенных представлений. Роль этих взаимозаменяемых взглядов, похоже, перекрывает роль директив.

Каковы преимущества/недостатки использования (нескольких, вложенных) ui-view s vs angular директив?

UPDATE

Состояния и маршрутизация - это две разные функции. Штаты позволяют вам заменять шаблоны partial.html и их контроллеры, и вы можете (необязательно?) указать соответствующий URL/маршрут.

В ответе от Тима Киндберга (a ui-router dev):

ui-view - это директива, поэтому, если вы ее используете, вы используете директиву который работал над тем, чтобы хорошо работать с остальными ui-router. Я не могу себе представить, что легко сворачивать свои собственные чтобы заменить эту функциональность.

И для этого, похоже, у вас может быть 2 варианта:

Нормальные директивы:

app.directive('myDir1', {/*  controller: ... */})
   .directive('myDir2', {/*  controller: ... */})

vs ui-view "Директивы" 

$stateProvider.state('route1', {
     /*  url: "/route1", // optional?? */
      views: {
        "myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
        "myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
      }
    })

Бонусный вопрос:

Доступны ли представления нормальные angular функции директивы? Например:

  • Transclude
  • Заменить
  • Изолировать область охвата
  • Функции компиляции/связывания

Если ui-views ARE директивы, кажется, что их использование отличается. Не имеет смысла согласовывать эти модели?

Ответы

Ответ 1

Как насчет того, используете ли вы встроенные представления Angular UI router для указания директив?

Скажем, у вас есть директива для таблицы, которая обрабатывает операции CRUD в учетных записях пользователей. Мы скажем, что директива называется user-admin. Наш файл маршрутов будет выглядеть так:

.state('users', {
  url: '/users',
  template: "<user-admin>"
});

Это даст вам много приятных вещей:

  • Позволяет иметь URL-адрес, указывающий прямо на директиву
  • Удаляет дублирование необходимости использования двух шаблонов (шаблон представления и шаблон директивы), когда состояние является только директивой
  • Позволяет начать перемещение логики контроллера в директивы в prep для Angular 2.0. См. здесь и здесь.

Ответ 2

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

ui-views определяют контейнеры, а состояния определяют, что происходит в этих контейнерах

Когда вы кладете директиву ui-view='containerName' на элемент, вы создаете контейнер, который что-то держит. Вы еще ничего не сказали о том, что там происходит.

Когда вы создаете определения $stateProvider.state(...), вы указываете, что происходит в этих контейнерах:

$stateProvider.state('someState', {
  views: {
    "containerName": { templateUrl: "someContents.html" /* , controller: ... */ },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

Можете ли вы использовать все традиционные функции директивы (трансключить, заменить, изолировать область охвата, компилировать/связывать функции) с помощью ui-views? Я не уверен. Например:

$stateProvider.state('someState', {
  views: {
    "containerName": { 
              templateUrl: "someContents.html",
              scope: { localVar: "@" },  // can you
              transclude: true,          // do this?
              controller: function(){}
    },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

В заключение, кажется, что каждый вариант имеет свои компромиссы. Директивы имеют некоторые дополнительные функции, но ui-views взаимозаменяемы и могут иметь связанные маршруты.

Ответ 3

Кажется, вы можете сделать что-то подобное с относительной безнаказанностью:

    $stateProvider.state('general', {
        url: '/general',
        views: {
            main: {
                template: '<general-directive></general-directive>'
            }
        }
    });

Ответ 4

**In Config function:**
.state('list', {
            url:'/list',
            template:'<user-info-table></user-info-table>',
            controller:'UserInfoTableController',
        });

**In Directive:**
angular.module('UserInfo').directive("userInfoTable", function() {
    return {
       templateUrl:'templates/UserInfoTable.html',
       restrict:'EA',
    };
});