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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ng new my-workspace — create-application=false
cd my-workspace
ng generate library common-utility-lib

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

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

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

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

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

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

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root'
})
export class CommonUtilityLibService { constructor() { } getDayName(dateStr, locale = 'en-us') { const date = new Date(dateStr; return date.toLocaleDateString(locale, { weekday: 'long' });
} }

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

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

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

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

import { Component, OnInit } from '@angular/core';
import {CommonUtilityLibService} from 'common-utility-lib'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { constructor(private libraryService: CommonUtilityLibService) { } ngOnInit() { // give day name in English const dayName = this.libraryService.getDayName('02/05/2020'); console.log(dayName); } }

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

import { Component, OnInit } from '@angular/core';
import {CommonUtilityLibService} from 'common-utility-lib'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { constructor(private libraryService: CommonUtilityLibService ) { } ngOnInit() { // give day name in French const dayName = this.libraryService.getDayName('02/05/2020','fr-Fr'); console.log(dayName); }
}

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

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

ng build common-utility-lib –prod cd dist/common-utility-lib npm adduser (run this command if you don’t have an account on npm) npm publish

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

npm install common-utility-lib

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

Автор: Ajay Srivastava

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

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