Size: a a a

Angular - русскоговорящее сообщество

2021 February 21

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Alex Bu
Вероятно, тут не о чем читать. Просто любой компонент идёт со своим модулем, который имеет экспорт этого компонента. Вот и вся идея
блин, все эти идеи по моему опыту разбиваются о суровую реальность)
Есть примеры больших проектов, реализованных таким подходом?)
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Oleg Safonov
блин, все эти идеи по моему опыту разбиваются о суровую реальность)
Есть примеры больших проектов, реализованных таким подходом?)
Хм, пример с разбиванием о реальность приведите, плс?)

Пример проекта, полагаю, среди популярных либ найти можно
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Alex Bu
Хм, пример с разбиванием о реальность приведите, плс?)

Пример проекта, полагаю, среди популярных либ найти можно
С этой конкретной идеей примеров нет, т.к. не встречал нигде и не пробовал сам,)
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Oleg Safonov
С этой конкретной идеей примеров нет, т.к. не встречал нигде и не пробовал сам,)
Попробуйте, понравится)
источник

DT

Denchik Tymokhin in Angular - русскоговорящее сообщество
вообщем идея есть но пока не понимаю как в ней имплементировать лейзи
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Alex Bu
Попробуйте, понравится)
А как выглядит при этом иерархия каталогов?
Вот у меня есть компонент-страница, т.е.  некий компонент, для которого есть свой путь и который рендерит кусок какой то логики. У этого компонента есть отдельный модуль (например, page.module)
Внутри компонента есть (например) 10 компонентов, которые нигде больше не используются. Мне создавать рядом с page.module каталог с ещё 10 модулями по одному компоненту в каждом?
источник

DT

Denchik Tymokhin in Angular - русскоговорящее сообщество
к примеру делаем 1 комп 1 модуль.... и альтернативный роутинг на основе скринов (1 роут в урле и все)
источник

DT

Denchik Tymokhin in Angular - русскоговорящее сообщество
в зависимости от скринов грузим пачку динамики
источник

DT

Denchik Tymokhin in Angular - русскоговорящее сообщество
вопрос только в том как без обычного роутинга сделать лейзи для модулей
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Просто как раз пилю структуру под очередной пет проект и В ЭТОТ РАЗ Я ТОЧНО СДЕЛАЮ ВСЁ ПРАВИЛЬНО)
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Denchik Tymokhin
а DDD подходит под этот вывод?
А откуда картинка такая, не подскажите?)
источник

DT

Denchik Tymokhin in Angular - русскоговорящее сообщество
Oleg Safonov
А откуда картинка такая, не подскажите?)
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Спасибо)
источник

DT

Denchik Tymokhin in Angular - русскоговорящее сообщество
Oleg Safonov
Спасибо)
💪💪💪
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Oleg Safonov
А как выглядит при этом иерархия каталогов?
Вот у меня есть компонент-страница, т.е.  некий компонент, для которого есть свой путь и который рендерит кусок какой то логики. У этого компонента есть отдельный модуль (например, page.module)
Внутри компонента есть (например) 10 компонентов, которые нигде больше не используются. Мне создавать рядом с page.module каталог с ещё 10 модулями по одному компоненту в каждом?
Всё просто на самом деле. Давайте сначала с термионологией разберемся. Я использую следующие понятия
- view модули
- widget модули

Под view модулями я понимаю модуль, реалзиующий кусок философской логики проекта, например AdminModule, в котором будет будут свои view модули, например, AdminListModule, AdminCardModule

Под widget модулями я понимаю модули, которые реализуют независимый от философии кусок экрана, например, PersonCardModule, ItemsListModule

Соответсвенно, component per module подход используется для widget модулей. Таким образом, например, в PersonCardModule будет примерно следющее

NgModule({
imports: [все модули, которые обеспечивают контект файла <app-person-card>],
declrations: [PersonCardComponent, +все компоненты, пайпы и проч, которые обеспечивают контент файла <app-person-card>],
и важный момент
exports: [PersonCardComponent]
})

Этот PersonCardModule соответствует только PersonCardComponent и несет всё описание, необходимое для PersonCardComponent

Использовать его нужно, например, в view модуле AdminCardModule. Импорт PersonCardModule даст возможность в AdminCardModule использовать тег <app-person-card>, в которые, вы можете прокинут админа, то бишь
<app-person-card [person]="admin">

Если есть где-то потребность использовать PersonCardComponent, вы просто импортите в том месте PersonCardModule и используете как<app-person-card [person]="admin или user или person или woman и проч">

Примерно такой подход, очень удобный. Складываю все widget модули в специльную папочку widgets, в зависимости оттого, где используется этот компонент. Если везде используется, то widgets лежит прям на самом верху, то бишь в src/app/widgets/person-card, если только в разделе Admin, то там тоже будет widgets, где эта папка ляжет, то бишь src/app/views/admin/widgets/person-card
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
И да, любой widget модуль может быть использован внутри другого widget модуля - в этом нет проблем
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Alex Bu
Всё просто на самом деле. Давайте сначала с термионологией разберемся. Я использую следующие понятия
- view модули
- widget модули

Под view модулями я понимаю модуль, реалзиующий кусок философской логики проекта, например AdminModule, в котором будет будут свои view модули, например, AdminListModule, AdminCardModule

Под widget модулями я понимаю модули, которые реализуют независимый от философии кусок экрана, например, PersonCardModule, ItemsListModule

Соответсвенно, component per module подход используется для widget модулей. Таким образом, например, в PersonCardModule будет примерно следющее

NgModule({
imports: [все модули, которые обеспечивают контект файла <app-person-card>],
declrations: [PersonCardComponent, +все компоненты, пайпы и проч, которые обеспечивают контент файла <app-person-card>],
и важный момент
exports: [PersonCardComponent]
})

Этот PersonCardModule соответствует только PersonCardComponent и несет всё описание, необходимое для PersonCardComponent

Использовать его нужно, например, в view модуле AdminCardModule. Импорт PersonCardModule даст возможность в AdminCardModule использовать тег <app-person-card>, в которые, вы можете прокинут админа, то бишь
<app-person-card [person]="admin">

Если есть где-то потребность использовать PersonCardComponent, вы просто импортите в том месте PersonCardModule и используете как<app-person-card [person]="admin или user или person или woman и проч">

Примерно такой подход, очень удобный. Складываю все widget модули в специльную папочку widgets, в зависимости оттого, где используется этот компонент. Если везде используется, то widgets лежит прям на самом верху, то бишь в src/app/widgets/person-card, если только в разделе Admin, то там тоже будет widgets, где эта папка ляжет, то бишь src/app/views/admin/widgets/person-card
Спасибо за подробный разбор, теперь понятно о чем речь, сам придерживаюсь чего то похожего)

я просто изначально подумал, что речь вообще обо всех компонентах была)
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Oleg Safonov
Спасибо за подробный разбор, теперь понятно о чем речь, сам придерживаюсь чего то похожего)

я просто изначально подумал, что речь вообще обо всех компонентах была)
Так все компоненты так и идут. Более Вам скажу, так идут и все директивы, пайпы: каждый со своим модулем
источник

OS

Oleg Safonov in Angular - русскоговорящее сообщество
Alex Bu
Так все компоненты так и идут. Более Вам скажу, так идут и все директивы, пайпы: каждый со своим модулем
Ну вот а примере выше в

NgModule({
imports: [все модули, которые обеспечивают контект файла <app-person-card>],
declrations: [PersonCardComponent, +все компоненты, пайпы и проч, которые обеспечивают контент файла <app-person-card>],
и важный момент
exports: [PersonCardComponent]
})

В декларациях несколько компонентов же, а не один
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Oleg Safonov
Ну вот а примере выше в

NgModule({
imports: [все модули, которые обеспечивают контект файла <app-person-card>],
declrations: [PersonCardComponent, +все компоненты, пайпы и проч, которые обеспечивают контент файла <app-person-card>],
и важный момент
exports: [PersonCardComponent]
})

В декларациях несколько компонентов же, а не один
Да, я так написал, так как иногда бывают случаи, что внутри виджета есть компоненты, которые 100% будут использоваться только в этом виджете, нигде больше. Или пайп только для этого виджета, нигде больше. Тут отпадает смысл делать для них отдельный модуль для каждого

Но вообще, в моих проектах в декларейшенсах почти всегда - один компонент
источник