Компонентное кодирование (с Angular 7) - PullRequest
0 голосов
/ 07 марта 2019

Я большой поклонник создания компонентов многократного использования и еще не нашел правильного способа сделать это. Возможно ли даже создать отдельные компоненты, которые можно просто добавить в другие приложения Angular, даже если они имеют зависимости, такие как Bootstrap или jQuery?

Пример: Я скачал красивый шаблон сайта, который я пытаюсь изменить и «разбить на части» для последующего повторного использования отдельных разделов сайта. Это одностраничный веб-сайт, и, скажем, я хочу выделить раздел «Контакты». Этот раздел исчезает с анимацией, как только вы переходите к нему. В его HTML-компоненте есть классы Bootstrap 3, а анимация взята из wowJS, который импортируется в файл index.html углового приложения.

Теперь, если бы я включил этот компонент раздела в другой проект, нет никакого способа узнать, какие у него зависимости (если, конечно, вы не распознаете синтаксис Bootstrap 3 и wowJS в компоненте HTML). Еще одна большая проблема: даже если я найду способ полностью изолировать компонент от остальной части веб-сайта, то после объединения нескольких компонентов на новый веб-сайт все общие зависимости будут загружаться несколько раз. Я предполагаю, что если вы используете инструменты только для Angular, то вполне возможно создавать собственные, полностью автономные повторно используемые компоненты. Но с внешними зависимостями все, что я могу сделать, это включить файл readme в каждый компонент и вывести список зависимостей?

Я много гуглил по этой теме и не нашел ответов, которые искал. Надеюсь, кто-нибудь может мне помочь!

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Возможно ли даже создать отдельные компоненты, которые можно просто добавить в другие приложения Angular, даже если они имеют зависимости, такие как Bootstrap или jQuery?

Технически, да.Например, PrimeNG является библиотекой Angular UI и поставляется с некоторыми опциями компонентов для построения диаграмм.Эти компоненты, в свою очередь, используют ChartsJS, другую стороннюю библиотеку, которую вам не нужно устанавливать вручную или даже поддерживать.PrimeNG заботится о своих собственных зависимостях.

... и скажем, я хочу изолировать раздел «Контакты» ... Теперь, если бы я включил этот компонент раздела в другой проект, нетспособ узнать, какие у него зависимости ..

Скорее всего, это источник вашей путаницы.Похоже, что в процессе разборки вещей вы рассматриваете каждый компонент как отдельный «модуль» со своими собственными зависимостями.Вы берете компонент, который подчиняется уже определенным правилам (требуется начальная загрузка и т. Д.), И пытаетесь превратить его в автономный модуль.Типичный комплект пользовательского интерфейса представляет собой набор «связанных» компонентов и пытается максимально консолидировать зависимости, чтобы все компоненты разделяли потребности.Я пытаюсь сказать, что сейчас вы работаете задом наперед, начиная с конечного результата и пытаясь найти общие черты.

0 голосов
/ 07 марта 2019

Да, вы правы. Для создания многоразовых и автономных угловых компонентов вы должны использовать angular-tools, который обрабатывает зависимости.

Но в соответствии с вашим примером вы должны управлять зависимостями вручную. Или, если вы можете разделить проблемы, такие как header или nav-bar, вы можете создать пакет npm, совместимый с угловыми приложениями и имеющий собственный packag.json, поддерживающий зависимости. Вот пакет: угловой сборщик пакетов

...