Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 19
Если для новичков писать, то хорошо бы разобрать конкретный пример.
А так, и новичкам не очень понятно, и для опытных ни о чем.
А так, и новичкам не очень понятно, и для опытных ни о чем.
Не понял, что значит «не работают вложенные инклуды»?
plnkr.co/edit/PKEWKZJHKNhxGWqAJuTm — всё работает.
P.S. А оборачивать header и footer сайта в директивы это какой-то совершенно ужасный совет, IMHO.
plnkr.co/edit/PKEWKZJHKNhxGWqAJuTm — всё работает.
P.S. А оборачивать header и footer сайта в директивы это какой-то совершенно ужасный совет, IMHO.
А что вас так пугает в этом совете? Оборачивать меню, которое на каждой странице одно и то же, что в этом страшного? Мне кажется вполне уместно. Футер — по сути тоже самое меню. Отделить логику многократно используемых элементов от контента, разве это не хорошо?
> которое на каждой странице одно и то же
> многократно используемых элементов
Контент в ngView, остальное в layout'е, зачем мучиться, кэп? :)
> многократно используемых элементов
Контент в ngView, остальное в layout'е, зачем мучиться, кэп? :)
Ну, вот как то так:
Вот главный шаблон, index.html:
Теперь я хочу что бы на публичных страницах у меня была одно меню, на приватных другое.
В шаблоне страницы делаем:
На другой страницу вместо <top-menu> будет, например, <top-public-menu>
Что сложного? Что плохого? Где аргументы? Как вы предлагаете это решить?
Вот главный шаблон, index.html:
<html ng-app="website">
<head>...<head>
<body>
...
<div ng-view></div>
...
</body>
</html>
Теперь я хочу что бы на публичных страницах у меня была одно меню, на приватных другое.
В шаблоне страницы делаем:
<top-menu></top-menu>
<div ng-controler="ctrl">
some content
</div>
На другой страницу вместо <top-menu> будет, например, <top-public-menu>
Что сложного? Что плохого? Где аргументы? Как вы предлагаете это решить?
Не понял, вы предлагаете на каждой странице вставлять директивы <app-header>, <app-footer>, <side-menu>, <top-menu> и т. д.?
Я предлагаю: использовать директивы вместо ngInclude. Всё. Точка. Больше ничего не предлагаю.
Если у вас меню на каждой странице инклудится, а такое бывает, то да — используйте директиву.
Ели вам достаточно держать меню, футер и т.п вне странице, в шаблоне верхнего уровня — значит у вас нет проблемы с вложенными инклудами.
Если у вас меню на каждой странице инклудится, а такое бывает, то да — используйте директиву.
Ели вам достаточно держать меню, футер и т.п вне странице, в шаблоне верхнего уровня — значит у вас нет проблемы с вложенными инклудами.
1. Ну, во-первых, ngInclude это тоже директива, которая предназначена как раз для включения в шаблон повторяющихся элементов разметки.
2. Во-вторых, никаких проблем со вложенными инклудами нет (или я о них не знаю). Приведите пожалуйста пример, когда вложенные инклуды не работают.
3. В-третьих, если вам нужно грузить разную разметку в зависимости от внешних условий (залогинен юзер или не залогинен), используйте ngSwitch и ngSwitchWhen (посмотрите решение Бена Наделя).
4. В-четвертых, элементы, которые повторяются на всех страницах (или на большом их количестве) должны описываться в некотором мастер-шаблоне (которых может быть и несколько), а не инклудиться на каждую из страниц.
2. Во-вторых, никаких проблем со вложенными инклудами нет (или я о них не знаю). Приведите пожалуйста пример, когда вложенные инклуды не работают.
3. В-третьих, если вам нужно грузить разную разметку в зависимости от внешних условий (залогинен юзер или не залогинен), используйте ngSwitch и ngSwitchWhen (посмотрите решение Бена Наделя).
4. В-четвертых, элементы, которые повторяются на всех страницах (или на большом их количестве) должны описываться в некотором мастер-шаблоне (которых может быть и несколько), а не инклудиться на каждую из страниц.
Откройте для себя ng route segment. Делаете один index.html и в него вставляете:
А все свои странички пишете с любой степенью вложенности вот так:
Когда вы разберётесь, то странички будете плодить без боязни запутаться. И ng-include не понадобится.
<div class="" app-view-segment="0"></div>
А все свои странички пишете с любой степенью вложенности вот так:
так:
$routeSegmentProvider
.when('/user/login', 'user.login')
.when('/user/reg', 'user.reg')
.when('/fpk', 's1')
.when('/fpk/clients', 's1.clients')
.when('/test_doc/:client/:do', 'test_doc')
.when('/com_doc/:client/:do', 'com_doc')
.when('/fpk/reiting', 's1.reiting')
.when('/fpk/st/statistic', 's1.st.statistic')
.when('/fpk/st/stat_table', 's1.st.stat_table')
.when('/fpk/st/stat_day', 's1.st.stat_day')
.when('/fpk/st/stat_all_day', 's1.st.stat_all_day')
.when('/fpk/st/stat_big', 's1.st.stat_big')
.when('/fpk/admin_cup', 's1.admin_cup')
.when('/fpk/news', 's1.news')
.when('/fpk/calendar', 's1.calendar')
.when('/fpk/calendar/:type', 's1.calendar')
.when('/fpk/settings', 's1.settings')
.when('/fpk/settings/models', 's1.settings.models')
.when('/fpk/settings/tests', 's1.settings.tests')
.when('/fpk/settings/organizations', 's1.settings.organizations')
.segment('test_doc', {
templateUrl: 'views/test_doc.html',
controller: 'testCtrl'})
.segment('com_doc', {
templateUrl: 'views/com_doc.html',
controller: 'comCtrl'})
.segment('user', {
templateUrl: 'views/user.html',
controller: 'loginCtrl'})
.within()
.segment('login', {
templateUrl: 'views/user/login.html'})
.segment('reg', {
templateUrl: 'views/user/reg.html'})
.up()
.segment('s1', {
templateUrl: 'views/fpk.html',
controller: 'fpkCtrl'})
.within()
.segment('clients', {
templateUrl: 'views/fpk/clients.html',
controller: 'clientsCtrl'
})
.segment('reiting', {
templateUrl: 'views/fpk/reiting.html',
controller: 'reitingCtrl'
})
.segment('admin_cup', {
templateUrl: 'views/fpk/admin_cup.html',
controller: 'adminCtrl'
})
.segment('news', {
templateUrl: 'views/fpk/news.html',
controller: 'newsCtrl'
})
.segment('calendar', {
templateUrl: 'views/fpk/calendar.html',
controller: 'calendarCtrl'
})
.up();
$routeProvider.otherwise({redirectTo: '/fpk/clients'});
Когда вы разберётесь, то странички будете плодить без боязни запутаться. И ng-include не понадобится.
Именование вложенных вьюх с помощью индексов — в высшей степени неудачное решение. При сложном лэйауте будет много времени уходить на поиск нужных темплейтов.
Странно, но мне такой подход очень нравится и я его использую на практике. У меня появляется возможность каждую форму и страничку вести в отдельном html файле и иметь вложенную структуру. Тем более, что у каждого файла можно использовать свой контроллер.
Когда у тебя больше 40 видов отображений, то такая иерархическая структура по настоящему удобна. И очень быстро работает.
Когда у тебя больше 40 видов отображений, то такая иерархическая структура по настоящему удобна. И очень быстро работает.
Выглядит неплохо, но это как раз из серии «написать своё».
Не хочу обидеть вас, называя это велосипедом — решение имеет право на жизнь, но об этом я как раз и говорил: зачем изобретать, если есть стандартный функционал директив.
Не хочу обидеть вас, называя это велосипедом — решение имеет право на жизнь, но об этом я как раз и говорил: зачем изобретать, если есть стандартный функционал директив.
UI-router тоже очень сырой и постоянно подкидывает неприятные сюрпризы. Одно из самых интересных решений проблемы было предложено Беном Наделем www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
По сути, директива — это инклюд со встроенным контроллером.
И относиться к нему лучше именно так.
Я по началу тоже очень воодушевился, и лепил директивы где ни попадя.
А когда понял, что вместо раздувшихся директивных контроллеров можно к одному шаблону использовать разные контроллеры — моя жизнь стала проще, а код гибче.
В вашем же случае (в случае меню) тем более нужно использовать один контроллер и несколько шаблонов к нему (для верхнего, нижнего и левого меню).
Логика вся в одном месте, отображения можно кастомайзить до умопомрачения.
И относиться к нему лучше именно так.
Я по началу тоже очень воодушевился, и лепил директивы где ни попадя.
А когда понял, что вместо раздувшихся директивных контроллеров можно к одному шаблону использовать разные контроллеры — моя жизнь стала проще, а код гибче.
В вашем же случае (в случае меню) тем более нужно использовать один контроллер и несколько шаблонов к нему (для верхнего, нижнего и левого меню).
Логика вся в одном месте, отображения можно кастомайзить до умопомрачения.
Но на самом деле это гораздо проще и полезнее, чем, например, вникать в angular ui-router.
А может проще один раз разобраться? Он все таки специально для таких целей и сделан.
Директива = компонент.
Ее еще хорошо делать с isolated scope для того чтобы было очевидно как с ней нужно взаимодействовать.
Например у вас есть хедер -> диектива топ хедер, в хедере есть контрол с поиском -> директива поиск и т.д.
Директивами вы обявляете компоненты в которые можно:
а) добавить кастомную работу с дом деревом (кстати по феншую только тут и можно)
б) обявить интерфейс и барть из скоупа только то что действительно нужно (и написать на это тест)
в) добавить совой контроллер если надо
В общем директивы — самая крутая часть ангуряра и никаких инклудов.
И вообще директивы директивы директивы!
Вот моя позиция!
Ее еще хорошо делать с isolated scope для того чтобы было очевидно как с ней нужно взаимодействовать.
Например у вас есть хедер -> диектива топ хедер, в хедере есть контрол с поиском -> директива поиск и т.д.
Директивами вы обявляете компоненты в которые можно:
а) добавить кастомную работу с дом деревом (кстати по феншую только тут и можно)
б) обявить интерфейс и барть из скоупа только то что действительно нужно (и написать на это тест)
в) добавить совой контроллер если надо
В общем директивы — самая крутая часть ангуряра и никаких инклудов.
И вообще директивы директивы директивы!
Вот моя позиция!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Angular. Почему не работают вложенные инклуды