Библиотеки Angular — что это, для чего их использовать и как

Библиотеки Angular - что это, для чего их использовать и как

От автора: уже более 3 лет я работаю с Angular. Я использовал так много сторонних библиотек в разных проектах Angular. Можем ли мы создать нашу собственную библиотеку в рамках Angular?

Ответ — библиотеки Angular. Бинго… Да, мы можем создать свою собственную библиотеку. В Angular 6 была добавлена возможность создавать библиотеки с помощью Angular CLI. Когда я разбирался с библиотеками Angular, у меня в голове возникли три мысли:

Что такое библиотеки Angular?

Для чего использовать библиотеки Angular?

Как мы можем их использовать?

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Давайте сначала рассмотрим «Что такое библиотеки Angular?»

Библиотека Angular — это проект Angular, который отличается от приложения тем, что не может работать самостоятельно. Библиотека должна быть импортирована и использована в приложении. В Angular 6 была добавлена возможность создавать библиотеки с помощью Angular CLI.

Если вы разработали функционал, который подходит для повторного использования, вы можете создавать свои библиотеки. Эти библиотеки могут использоваться локально в вашей рабочей области, или вы можете опубликовать их в виде пакетов npm, чтобы поделиться с другими проектами или другими разработчиками Angular.

Давайте рассмотрим следующую мысль: «Почему мы должны их использовать?»

Это улучшит возможность повторного использования кода. Мы можем импортировать библиотеки в нескольких приложениях.
Это позволит избежать различных плохих практик или архитектурных ошибок, которые могут затруднить разделение и повторное использование кода в будущем.

Мы можем отделить код, который менее подвержен изменениям (т. е. основные службы). Это предотвратит загрязнение разработчиками основных функций приложения.

Теперь пришло время последнего вопроса: «Как мы можем их использовать?»

В этой статье мы расскажем о шагах по созданию библиотеки и о том, как использовать ее в нескольких приложениях.

Шаги по созданию библиотек Angular

1. Создайте библиотеку с помощью следующих команд консоли:

2. Будет сгенерирован код для библиотеки. Вы можете добавить свои Компоненты, Службы, Пайпы и т. д. в папку src:

3. Angular.json будет обновлен с помощью projectType = «library».

4. Чтобы сделать код библиотеки повторно используемым, вы должны определить для него публичный API. Этот «пользовательский уровень» определяет, что доступно потребителям вашей библиотеки.

public_api.ts предназначен именно для этого. Все, что экспортируется из этого файла, является общедоступным и готово для повторного использования в различных приложениях Angular.

5. Ваша библиотека готова к использованию. Создайте свою библиотеку с помощью команды ng-build.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

6. В демонстрационных целях мы создали метод обслуживания и используем его в нескольких приложениях.

Как использовать созданную библиотеку

1. Использование в нескольких локальных проектах.

Я создал два тестовых проекта, используя модель monorepo.

test-library-first-app (команда: ng generate application test-library-first-app)

test-library-second-app (команда: ng generate application test-library-second-app).

2. Публикация библиотеки в npm

Используйте Angular CLI и менеджер пакетов npm, чтобы собрать и опубликовать свою библиотеку как пакет npm. Если вы никогда ранее не публиковали пакет в npm, вы должны создать учетную запись пользователя (npm adduser).

Для справки я опубликовал созданную здесь библиотеку. Вы можете установить и получить доступ к опубликованной библиотеке с помощью следующей команды:

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

Автор: Ajay Srivastava

Источник: //medium.com

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Angular 4 NgRx

Посмотрите видео по Angular 4 NgRx

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: