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