Angular Libraries

Biblioteki Angular są budowane jako rozwiązanie ogólnych problemów, takich jak prezentacja ujednoliconego interfejsu użytkownika, prezentacja danych i umożliwienie wprowadzania danych. Programiści mogą tworzyć ogólne rozwiązania dla poszczególnych domen, które mogą być dostosowane do ponownego użycia w różnych aplikacjach. Te rozwiązania mogą być budowane jako biblioteki Angular i te biblioteki mogą być publikowane i udostępniane jako pakiety npm.

Biblioteka Angular jest projektem Angular, ale różni się od aplikacji Angular w tym sensie, że nie może działać samodzielnie. Jest importowana i używana w aplikacji.

Użycie bibliotek Angular

• Biblioteki Angular rozszerzają bazowe funkcjonalności Angulara. Na przykład, jeśli chcesz dodać reaktywne formularze do aplikacji, dodaj pakiet bibliotek za pomocą ng add @angular/forms, a następnie zaimportuj moduł ReactiveFormsModule z biblioteki @angular/forms w swoim kodzie aplikacji.
• Angular Material jest przykładem dużej biblioteki ogólnego przeznaczenia, która zapewnia zaawansowane, wielokrotnego użytku i adaptowalne komponenty UI.

Instalowanie bibliotek

Biblioteki są publikowane jako pakiety npm i zintegrowane z Angular CLI. Aby zintegrować kod biblioteki wielokrotnego użytku z aplikacją, musimy zainstalować pakiet i zaimportować dostarczoną funkcjonalność tam, gdzie będziemy z niej korzystać.

Syntaktyka

Polecenie ng add używa menedżera pakietów npm do zainstalowania pakietu biblioteki i wywołuje schematy, które są zawarte w pakiecie do innych rusztowań w kodzie projektu, takich jak dodawanie deklaracji importu, czcionek, motywów i tak dalej.

Biblioteczne typowanie

Pakiety bibliotek zawierają typowania w plikach .d.ts. Jeśli pakiet biblioteki nie zawiera typowania i IDE pokazuje błąd, musisz zainstalować powiązany z biblioteką pakiet @types/.

Na przykład, załóżmy, że masz bibliotekę o nazwie d1:

Typy zdefiniowane w pakiecie @types/ dla biblioteki zainstalowanej w przestrzeni roboczej są automatycznie dodawane do konfiguracji TypeScript dla projektu, który używa tej biblioteki. TypeScript domyślnie szuka typów w folderze node_modules/@types, więc nie trzeba dodawać każdego pakietu z osobna.

Jeśli biblioteka nie zawiera typów w @types/, nadal można z niej korzystać, ręcznie dodając dla niej typy. Możesz to zrobić w następujący sposób:

Utwórz plik typings.d.ts w swoim folderze src/. Ten plik jest automatycznie dołączany jako globalna definicja typu.

Dodaj następujący kod w src/typings.d.ts.

Dodaj następujący kod w komponencie lub pliku, który używa biblioteki:

Uaktualnianie bibliotek

Możesz aktualizować biblioteki za pomocą polecenia ng update. Aktualizuje ono poszczególne wersje bibliotek. Angular CLI sprawdza najnowsze opublikowane wydanie biblioteki, a jeśli znajdzie, że najnowsza wersja jest nowsza niż twoja zainstalowana wersja, pobiera ją i aktualizuje twój package.json, aby dopasować najnowszą wersję.

Syntaktyka

Uwaga: Kiedy aktualizujesz Angular do nowej wersji, musisz upewnić się, że wszystkie biblioteki, których używasz, są aktualne. Jeśli biblioteki mają współzależności, również muszą zostać zaktualizowane.

Jak dodać bibliotekę do globalnego zakresu runtime

Biblioteki JavaScript Legacy, które nie są zaimportowane do aplikacji, można dodać do globalnego zakresu runtime i załadować tak, jakby były w znaczniku skryptu. Musisz skonfigurować CLI, aby zrobić to w czasie budowania, używając opcji „scripts” i „styles” celu budowania w pliku konfiguracyjnym CLI, angular.json.

Na przykład, aby użyć biblioteki Bootstrap 4, najpierw zainstaluj bibliotekę i jej zależności za pomocą menedżera pakietów npm:

Dodaj plik CSS biblioteki Bootstrap do tablicy „styles”:

Tworzenie nowych bibliotek

Możesz tworzyć i publikować własne nowe biblioteki w celu rozszerzenia funkcjonalności Angulara. Jest to ogólnie używane, gdy potrzebujesz rozwiązać ten sam problem w więcej niż jednej aplikacji (lub chcesz podzielić się swoim rozwiązaniem z innymi programistami), masz kandydata na bibliotekę.

Na przykład: Możesz stworzyć przycisk, który wysyła użytkowników na stronę internetową Twojej firmy, który byłby zawarty we wszystkich aplikacjach, które buduje Twoja firma.

Otwórz Angular CLI i użyj następującej składni, aby utworzyć nową bibliotekę.

Syntax

To utworzy folder projects/my-lib w Twoim obszarze roboczym, który zawiera komponent i usługę wewnątrz NgModule. Plik konfiguracyjny przestrzeni roboczej, angular.json, jest aktualizowany o projekt typu 'library’.

Teraz możesz zbudować, przetestować i podlinkować swój projekt za pomocą następujących poleceń: