Crearea bibliotecii Angular

de

Astăzi vom crea o nouă bibliotecă reutilizabilă. Dacă vă treziți că creați aceeași componentă în mai multe aplicații (sau doriți să vă partajați componenta cu alți dezvoltatori), aveți nevoie de o bibliotecă.

Creați proiectul

Vom folosi angular cli pentru a genera scheletul bibliotecii. Dacă nu aveți angular cli instalat, consultați ghidul de instalare angular cli.

Comenzile următoare vor genera proiectul angular my-project și biblioteca my-lib

ng new my-projectcd my-projectng generate library my-lib
Enter fullscreen mode Exit fullscreen mode

Aceasta creează projects/my-lib în folderul my-project, care conține
my-lib.component.ts și my-lib.service.ts. Angular cli a creat, de asemenea, fișierul public-api.ts în folderul my-lib. Acest fișier conține următoarele linii de cod,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Intră în modul fullscreen Ieșire din modul fullscreen

Acest fișier definește ceea ce este disponibil pentru utilizatorii bibliotecii (A.K.A public API).

Dacă deschideți my-lib.component.ts, veți vedea următorul cod:

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 {}}
Intră în modul fullscreen Ieșire din modul fullscreen

Această bibliotecă simplă scoate my-lib works! și vom folosi selectorul,
<lib-my-lib></lib-my-lib> pentru a consuma componenta.

Instalați biblioteca ca dependență npm.

Pentru a utiliza orice bibliotecă în angular, trebuie să o instalați din managerul de pachete, cum ar fi npm. În acest exemplu, nu vom publica biblioteca noastră în managerul de pachete npm. Dacă doriți să învățați cum să publicați biblioteca angular, consultați ghidul angular.

Acum vom instala my-lib ca dependență npm din fișier. Deschideți package.json și adăugați "my-lib": "file:projects/my-lib" în blocul de dependențe, Vedeți fragmentul de cod de mai jos. 

 "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" }
Intrați în modul fullscreen Ieșiți din modul fullscreen

my-lib este numele pachetului pe care îl veți vedea în folderul node_modules și file:projects/my-lib este biblioteca reală. Dacă am fi publicat biblioteca noastră în npm, am înlocui file:projects/my-lib cu numărul versiunii(0.0.1).

Dacă rulați npm install, veți observa că my-lib a fost adăugat în folderul node_modules. Acum putem importa și utiliza biblioteca în proiectul nostru. vezi fragmentul de cod de mai jos:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Intră în modul fullscreen Ieși din modul fullscreen

Acum că am importat modulul bibliotecii în proiectul nostru, putem utiliza MyLibComponent. Deschideți app.component.html și înlocuiți tot codul cu
<lib-my-lib></lib-my-lib>.

Rulați aplicația

Rulați npm start sau ng serve pentru a porni aplicația. Deschideți browserul și accesați http://localhost:4200, veți vedea my-lib works! afișat.

Felicitări, ați creat cu succes biblioteca angular!!!

Cod disponibil pe github

.

Lasă un comentariu