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

Это не статья — скорее заметка. И да, она для новичков в Angular.

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

Планируя лэйаут, мы обычно представляем что-то такое:

• Меню сверху,
• Меню слева,
• Контент в центре
• Футер

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

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

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

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

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

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

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

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

Автор: Light241

Источник ^[4]