Angular könyvtárak

Angular könyvtárak olyan általános problémák megoldására épülnek, mint az egységes felhasználói felület bemutatása, az adatok bemutatása és az adatbevitel lehetővé tétele. A fejlesztők általános megoldásokat hozhatnak létre bizonyos területekre, amelyek különböző alkalmazásokban történő újrafelhasználásra adaptálhatók. Ezek a megoldások Angular könyvtárakként építhetők, és ezek a könyvtárak npm csomagként közzétehetők és megoszthatók.

Az Angular könyvtár egy Angular projekt, de annyiban különbözik az Angular alkalmazástól, hogy önállóan nem futhat. Azt importálják és használják az alkalmazásban.

Az Angular könyvtárak használata

• Az Angular könyvtárak bővítik az Angular alapfunkciókat. Ha például reaktív űrlapokat szeretnénk hozzáadni egy alkalmazáshoz, adjuk hozzá a könyvtárcsomagot az ng add @angular/forms segítségével, majd importáljuk a ReactiveFormsModule-t a @angular/forms könyvtárból az alkalmazás kódjában.
• Angular Material egy példa egy nagy, általános célú könyvtárra, amely kifinomult, újrafelhasználható és adaptálható felhasználói felület komponenseket biztosít.

Könyvtárak telepítése

A könyvtárak npm csomagként vannak közzétéve és az Angular CLI-be integrálva. Ahhoz, hogy újrafelhasználható könyvtári kódot integráljunk egy alkalmazásba, telepítenünk kell a csomagot, és importálnunk kell a biztosított funkcionalitást, ahol használni fogjuk.

Szintaktika

A ng add parancs az npm csomagkezelőt használja a könyvtárcsomag telepítésére, és a csomagban szereplő sémákat hívja meg a projektkódon belüli egyéb állványokhoz, például import utasítások, betűtípusok, témák stb. hozzáadásához.

Könyvtári tipizálás

A könyvtárcsomagok tipizálásokat tartalmaznak a .d.ts fájlokban. Ha a könyvtár csomagja nem tartalmaz tipizálásokat, és az IDE hibát mutat, akkor telepítenie kell a könyvtárhoz tartozó @types/ csomagot.

Tegyük fel például, hogy van egy d1 nevű könyvtárunk:

A munkaterületre telepített könyvtár @types/ csomagjában definiált típusok automatikusan hozzáadódnak a könyvtárat használó projekt TypeScript konfigurációjához. A TypeScript alapértelmezés szerint a node_modules/@types mappában keresi a típusokat, így nem kell minden egyes típuscsomagot külön-külön hozzáadni.

Ha egy könyvtár nem tartalmaz típusokat a @types/ mappában, akkor is használhatja, ha manuálisan hozzáadja a típusokat. Ezt a következőképpen teheti meg:

Készítsen egy typings.d.ts fájlt az src/ mappában. Ez a fájl automatikusan bekerül a globális típusdefinícióba.

Add hozzá a következő kódot a src/typings.d.ts fájlhoz.

Adja hozzá a következő kódot a könyvtárat használó komponenshez vagy fájlhoz:

Könyvtárak frissítése

A könyvtárakat az ng update parancs segítségével frissítheti. Ez frissíti az egyes könyvtárverziókat. Az Angular CLI ellenőrzi a könyvtár legújabb közzétett kiadását, és ha úgy találja, hogy a legújabb verzió újabb, mint a telepített verzió, letölti azt, és frissíti a package.json-t a legújabb verziónak megfelelően.

Syntax

Megjegyzés: Amikor az Angular új verzióra frissíti, meg kell győződnie arról, hogy az összes használt könyvtár aktuális. Ha a könyvtáraknak kölcsönös függőségei vannak, azokat is frissíteni kell.

Hogyan adhat hozzá egy könyvtárat a futásidejű globális hatókörhöz

Az alkalmazásba nem importált JavaScript könyvtárak hozzáadhatók a futásidejű globális hatókörhöz, és betölthetők, mintha egy szkriptcímkében lennének. A CLI-t úgy kell beállítani, hogy ezt a CLI építéskor tegye meg, a CLI konfigurációs fájljában, az angular.json-ban a build target “scripts” és “styles” opcióival.

A Bootstrap 4 könyvtár használatához például először telepítse a könyvtárat és függőségeit az npm csomagkezelő segítségével:

Adja hozzá a Bootstrap CSS fájlt a “styles” tömbhöz:

Új könyvtárak létrehozása

Az Angular funkcionalitások bővítéséhez saját új könyvtárakat hozhat létre és tehet közzé. Ezt általában akkor használjuk, ha ugyanazt a problémát több alkalmazásban is meg kell oldanunk (vagy meg akarjuk osztani a megoldásunkat más fejlesztőkkel), van egy könyvtárjelöltünk.

Például: Létrehozhatsz egy gombot, amely a felhasználókat a céged weboldalára küldi, és amely minden alkalmazásban szerepelne, amelyet a céged épít.

Nyisd meg az Angular CLI-t, és használd a következő szintaxist egy új könyvtár létrehozásához.

Syntax

Ez létrehoz egy projects/my-lib mappát a munkaterületeden, amely egy NgModule-on belül tartalmaz egy komponenst és egy szolgáltatást. A munkaterület konfigurációs fájlja, az angular.json frissül egy ‘library’ típusú projekttel.

Most, a következő parancsokkal építheted, tesztelheted és lintelheted a projektedet: