У нас есть веб-сайт, который вручную загружает угловой модуль на уровень документа. В этом модуле на каждой странице есть несколько контроллеров. Это не одностраничное приложение, и у него есть традиционное меню, а разные страницы загружают разные контроллеры.
Эта настройка хорошо зарекомендовала себя за последние пару лет, но теперь мы добавляем новый контроллер для грантового поиска и использует html5Mode = true. Это привело к захвату всех ссылок на сайте.
Одним из решений было создание директивы для динамического применения цели к каждой ссылке на сайте. Угловое не захватывает связи с целями. Нам это не понравилось, потому что сайт использует разные цели в разных местах.
Реализованное нами решение включало группировку контроллеров под модули. Поскольку Angular не разрешает вложенные модули, мы загружаем каждый модуль с помощью классов (т.е. любая данная страница может иметь несколько модулей, содержащих несколько контроллеров).
Вот что выглядит:
angular.element(document).ready(function () {
angular.bootstrap($('.moduleA'), ['moduleA']);
angular.bootstrap($('.moduleB'), ['moduleB']);
});
Главный вопрос:
Идея начальной загрузки удивительно работает, но я не осведомлен о внутренней работе, чтобы понять, является ли самонастройка таким образом отрицательной. Некоторые страницы имеют тот же модуль, что и 4 или 5 раз в разные div. Это работает, но все в порядке?
например, создает ли это тонну накладных или других побочных эффектов?
Да, будет куча побочных эффектов на вещи, которые распределяются между приложениями, и поэтому их нужно синхронизировать, например, расположение окна и прокрутку. Это, скорее всего, проблема XY, и несколько приложений на странице выглядят как ужасное решение здесь (как и почти в любом другом случае).
target
атрибут и абсолютные ссылки являются наиболее популярными и надежными решениями, позволяющими предотвратить привязку $location
от ссылок. Отчетливо видно здесь, почему это так.
Проблема легко решена с помощью этой директивы, которая следует за rel="external"
соглашением (особенно с поддержкой jQuery) при сохранении существующих target
атрибутов.
// <a external href="...
// <a rel="external" href="...
// <a data-rel="external" href="...
app.directive('a', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var relExternal = attrs.rel && attrs.rel.split(/\s+/).indexOf('external') >= 0;
if (!('target' in attrs) && (relExternal || 'external' in attrs)) {
attrs.$set('target', '_self');
}
}
};
});
То же самое можно сделать в обратном направлении, то есть включить target
везде, кроме внутренних ссылок.