Pull to refresh

Angular. Почему не работают вложенные инклуды

Reading time 2 min
Views 11K
Это не статья — скорее заметка. И да, она для новичков в Angular.

Частый вопрос — почему в Angular не работают вложенные инклуды? Работают. Просто Angular — это не php.

Планируя лэйаут, мы обычно представляем что-то такое:
  • Меню сверху,
  • Меню слева,
  • Контент в центре
  • Футер

Первое что пытаемся сделать, так это добавить в главный шаблон ngView, а в шаблоны нижнего уровня добавить ngInclude. Пробуем, у нас не получается, идём читать StackOverFlow (давайте будем честны — сначала StackOverFlow, потом, может быть, если лениво не будет, — документацию).
И там нам говорят что-то в духе, “чувак, используй angular ui-router”, или “зацени, какой я себе костылесипед собрал!”.

Но давайте секундочку поразмыслим. Меню и футер — это что? Правильно — это элементы, которые используются многократно. Можно сказать, что это виджеты. Вы без сомнения в курсе, что Angular предлагает на этот счёт — директивы.

Иными словами, вложенные инклуды в Angular работают, просто надо оборачивать их в директивы. Кому-то это может показаться сложным. Но на самом деле это гораздо проще и полезнее, чем, например, вникать в angular ui-router.

Вот совственно и всё.
Для тех, кто сомневается, парочка плюсов такого подхода:.

Во-первых, улучшится читаемость — вместо абстрактного <ng-include/>, будут более ясные теги вроде <top-menu/>(ну или ) и так далее. Если вам это не нравится, то зачем вам angular?

Во-вторых, у директив довольно-таки много параметров, многие из которых весьма полезны. Подробнее, например здесь, или здесь.

В-третьих, опыт директив пригодиться вам в дальнейшем при работе с Angular, с другими библиотеками, вроде ui-bootstrap.

Ну и возможно главное — не надо будет завязываться на сторонние модули вроде ui-router и тратить время на их изучение, внедрение и т.п.

UPD: Минимально-необходимый код для директивы:
.directive('topMenu', function () {
        return {
            restrict: 'EA',
            templateUrl: 'path/to/topmenu.html',
            controller: function ($scope) {
                // Your code here
            }
        };
    })

У нас тут точно такой же контроллер, всё как обычно и путь до темплейта. Сложно ли? Не думаю.

Использование:
<top-menu></top-menu>

или
<div top-menu></div>


UPD2: Для тех, кто не понял зачем:
Я предлагаю использовать директивы в тех местах, где вы использовали ngInclude. Всё. Точка. Больше я ничего не предлагаю.
Если у вас меню на каждой странице инклудится, а такое бывает, то да — используйте вместо него директиву.
Ели вам достаточно держать меню, футер и т.п вне странице, в шаблоне верхнего уровня — значит у вас нет проблемы с вложенными инклудами.
Tags:
Hubs:
+4
Comments 19
Comments Comments 19

Articles