Angular könyvtár létrehozása

Szerző:

A mai napon egy új újrafelhasználható könyvtárat fogunk létrehozni. Ha több alkalmazásban is ugyanazt a komponenst készítjük (vagy meg akarjuk osztani a komponensünket más fejlesztőkkel), akkor szükségünk van egy könyvtárra.

Projekt létrehozása

Az angular cli segítségével fogjuk létrehozni a könyvtár vázát. Ha nincs telepítve az angular cli, olvassa el az angular cli telepítési útmutatóját.

A következő parancsok létrehozzák az angular projekt my-project és a könyvtár my-lib

ng new my-projectcd my-projectng generate library my-lib
Belépés a teljes képernyős módba Kilépés a teljes képernyős módból

Ez létrehozza projects/my-lib a my-project mappában, amely tartalmazza
my-lib.component.ts és my-lib.service.ts. Az Angular cli létrehozott egy public-api.ts fájlt is a my-lib mappában. Ez a fájl a következő kódsorokat tartalmazza,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Enter fullscreen mode Exit fullscreen mode

Ez a fájl határozza meg, hogy mi áll a könyvtár felhasználói rendelkezésére (A.K.A public API).

Ha megnyitjuk a my-lib.component.ts fájlt, a következő kódot látjuk:

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}
Enter fullscreen mode Exit fullscreen mode

Ez az egyszerű könyvtár kimenet my-lib works! és mi a szelektor,
<lib-my-lib></lib-my-lib> segítségével fogyasztjuk a komponenst.

Telepítsük a könyvtárat npm függőségként.

Hogy bármilyen könyvtárat használjunk az angularban, telepítenünk kell a csomagkezelőből, például az npm-ből. Ebben a példában nem fogjuk közzétenni a könyvtárunkat az npm csomagkezelőben. Ha meg szeretné tanulni, hogyan kell közzétenni az angular könyvtárat, olvassa el az angular útmutatót.

Most telepítjük a my-lib mint npm függőséget a fájlból. Nyisd meg a package.json és add hozzá a "my-lib": "file:projects/my-lib" függőségek blokkban, Lásd az alábbi kódrészletet. 

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }
Enter fullscreen mode Exit fullscreen mode

my-lib a csomag neve, amit a node_modules mappában fogsz látni és file:projects/my-lib a tényleges könyvtár. Ha közzétennénk a könyvtárunkat az npm-ben, akkor az file:projects/my-lib helyett a verziószámot(0.0.1) adnánk meg.

Ha a npm install futtatásával észrevehetjük, hogy a node_modules mappába my-lib került. Most már importálhatjuk és használhatjuk a könyvtárat a projektünkben. lásd az alábbi kódrészletet:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Most, hogy importáltuk a könyvtár modult a projektünkbe, használhatjuk a MyLibComponent. Nyissuk meg a app.component.html-et, és cseréljük ki az összes kódot
<lib-my-lib></lib-my-lib>-ra.

Az alkalmazás futtatása

Futtassuk a npm start vagy ng serve parancsot az alkalmazás elindításához. Nyissa meg a böngészőt és látogassa meg a http://localhost:4200, látni fogja a my-lib works! megjelenését.

Gratulálok, sikeresen létrehozta az angular könyvtárat!!!

A kód elérhető a githubon

.

Szólj hozzá!