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

в 8:22, , рубрики: angular, AngularJS, directives, javascript, метки: , , ,

Это не статья — скорее заметка. И да, она для новичков в 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 и тратить время на их изучение, внедрение и т.п.

Автор: Light241

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js