How to become an author
Search
Profile
Pull to refresh

Comments 19

Если для новичков писать, то хорошо бы разобрать конкретный пример.
А так, и новичкам не очень понятно, и для опытных ни о чем.
Total votes 2: ↑2 and ↓0 +2
Не понял, что значит «не работают вложенные инклуды»?
plnkr.co/edit/PKEWKZJHKNhxGWqAJuTm — всё работает.
P.S. А оборачивать header и footer сайта в директивы это какой-то совершенно ужасный совет, IMHO.
Total votes 4: ↑4 and ↓0 +4
А что вас так пугает в этом совете? Оборачивать меню, которое на каждой странице одно и то же, что в этом страшного? Мне кажется вполне уместно. Футер — по сути тоже самое меню. Отделить логику многократно используемых элементов от контента, разве это не хорошо?
Total votes 2: ↑0 and ↓2 -2
> которое на каждой странице одно и то же
> многократно используемых элементов
Контент в ngView, остальное в layout'е, зачем мучиться, кэп? :)
Total votes 1: ↑1 and ↓0 +1
Ну, вот как то так:

Вот главный шаблон, 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>

Что сложного? Что плохого? Где аргументы? Как вы предлагаете это решить?
This comment wasn’t rated yet 0
Не понял, вы предлагаете на каждой странице вставлять директивы <app-header>, <app-footer>, <side-menu>, <top-menu> и т. д.?
Total votes 1: ↑1 and ↓0 +1
Я предлагаю: использовать директивы вместо ngInclude. Всё. Точка. Больше ничего не предлагаю.
Если у вас меню на каждой странице инклудится, а такое бывает, то да — используйте директиву.
Ели вам достаточно держать меню, футер и т.п вне странице, в шаблоне верхнего уровня — значит у вас нет проблемы с вложенными инклудами.
Total votes 2: ↑0 and ↓2 -2
1. Ну, во-первых, ngInclude это тоже директива, которая предназначена как раз для включения в шаблон повторяющихся элементов разметки.

2. Во-вторых, никаких проблем со вложенными инклудами нет (или я о них не знаю). Приведите пожалуйста пример, когда вложенные инклуды не работают.

3. В-третьих, если вам нужно грузить разную разметку в зависимости от внешних условий (залогинен юзер или не залогинен), используйте ngSwitch и ngSwitchWhen (посмотрите решение Бена Наделя).

4. В-четвертых, элементы, которые повторяются на всех страницах (или на большом их количестве) должны описываться в некотором мастер-шаблоне (которых может быть и несколько), а не инклудиться на каждую из страниц.
Total votes 1: ↑1 and ↓0 +1
Откройте для себя ng route segment. Делаете один index.html и в него вставляете:
    <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 не понадобится.
Total votes 2: ↑1 and ↓1 0
Именование вложенных вьюх с помощью индексов — в высшей степени неудачное решение. При сложном лэйауте будет много времени уходить на поиск нужных темплейтов.
This comment wasn’t rated yet 0
Странно, но мне такой подход очень нравится и я его использую на практике. У меня появляется возможность каждую форму и страничку вести в отдельном html файле и иметь вложенную структуру. Тем более, что у каждого файла можно использовать свой контроллер.

Когда у тебя больше 40 видов отображений, то такая иерархическая структура по настоящему удобна. И очень быстро работает.
This comment wasn’t rated yet 0
Если я вижу в коде:
<div class="" app-view-segment="12"></div>

Как мне понять какой шаблон будет грузиться в этот div? Считать уровни вложенности в файле роутера?
Почему нельзя было сделать что-то типа:

javascript
segment('overview')

html
<div class="" app-view-segment="overview"></div>

This comment wasn’t rated yet 0
Класс. Я думал сегменты можно указывать только номерами. В документации, видимо, не разобрался.
Спасибо, так действительно удобно.
This comment wasn’t rated yet 0
ээээ… я не говорил, что ng-route-segment это позволяет делать :) это был скорее вопрос к автору библиотеки: почему нельзя было сделать именованные вьюхи?
This comment wasn’t rated yet 0
Выглядит неплохо, но это как раз из серии «написать своё».
Не хочу обидеть вас, называя это велосипедом — решение имеет право на жизнь, но об этом я как раз и говорил: зачем изобретать, если есть стандартный функционал директив.
This comment wasn’t rated yet 0
По сути, директива — это инклюд со встроенным контроллером.
И относиться к нему лучше именно так.
Я по началу тоже очень воодушевился, и лепил директивы где ни попадя.
А когда понял, что вместо раздувшихся директивных контроллеров можно к одному шаблону использовать разные контроллеры — моя жизнь стала проще, а код гибче.
В вашем же случае (в случае меню) тем более нужно использовать один контроллер и несколько шаблонов к нему (для верхнего, нижнего и левого меню).
Логика вся в одном месте, отображения можно кастомайзить до умопомрачения.
This comment wasn’t rated yet 0
Но на самом деле это гораздо проще и полезнее, чем, например, вникать в angular ui-router.

А может проще один раз разобраться? Он все таки специально для таких целей и сделан.
This comment wasn’t rated yet 0
Директива = компонент.
Ее еще хорошо делать с isolated scope для того чтобы было очевидно как с ней нужно взаимодействовать.
Например у вас есть хедер -> диектива топ хедер, в хедере есть контрол с поиском -> директива поиск и т.д.
Директивами вы обявляете компоненты в которые можно:
а) добавить кастомную работу с дом деревом (кстати по феншую только тут и можно)
б) обявить интерфейс и барть из скоупа только то что действительно нужно (и написать на это тест)
в) добавить совой контроллер если надо

В общем директивы — самая крутая часть ангуряра и никаких инклудов.

И вообще директивы директивы директивы!
Вот моя позиция!
This comment wasn’t rated yet 0
Only those users with full accounts are able to leave comments. Log in, please.

Your account

Sections

Information

Services

Support Return to old version
© 2006–2023, Habr