Biblioteci Angular

Bibliotecile Angular sunt construite ca o soluție la probleme generale, cum ar fi prezentarea unei interfețe utilizator unificate, prezentarea datelor și permiterea introducerii de date. Dezvoltatorii pot crea soluții generale pentru anumite domenii care pot fi adaptate pentru a fi reutilizate în diferite aplicații. Aceste soluții pot fi construite ca biblioteci Angular și aceste biblioteci pot fi publicate și partajate ca pachete npm.

O bibliotecă Angular este un proiect Angular, dar este diferită de aplicația Angular în termenii în care nu poate rula singură. Ea este importată și utilizată în aplicație.

Utilizarea bibliotecilor Angular

• Bibliotecile Angular extind funcționalitățile de bază ale lui Angular. De exemplu, dacă doriți să adăugați formulare reactive la o aplicație, adăugați pachetul de bibliotecă folosind ng add @angular/forms, apoi importați ReactiveFormsModule din biblioteca @angular/forms în codul aplicației.
• Angular Material este un exemplu de bibliotecă mare, de uz general, care oferă componente UI sofisticate, reutilizabile și adaptabile.

Instalarea bibliotecilor

Bibliotecile sunt publicate ca pachete npm și integrate cu Angular CLI. Pentru a integra codul reutilizabil al bibliotecii într-o aplicație, trebuie să instalăm pachetul și să importăm funcționalitatea furnizată acolo unde o vom utiliza.

Sintaxa

Comanda ng add utilizează managerul de pachete npm pentru a instala pachetul de bibliotecă și invocă schemele care sunt incluse în pachet pentru alte eșafodaje din codul proiectului, cum ar fi adăugarea de instrucțiuni de import, fonturi, teme și așa mai departe.

Tipare de bibliotecă

Pachetele de bibliotecă includ tipăriri în fișiere .d.ts. Dacă pachetul bibliotecii dvs. nu include tipăriri și IDE afișează o eroare, trebuie să instalați pachetul @types/ asociat bibliotecii.

De exemplu, să presupunem că aveți o bibliotecă numită d1:

Tipurile definite într-un pachet @types/ pentru o bibliotecă instalată în spațiul de lucru sunt adăugate automat la configurația TypeScript pentru proiectul care utilizează acea bibliotecă. TypeScript caută implicit tipurile în folderul node_modules/@types, astfel încât nu trebuie să adăugați fiecare pachet de tipuri în mod individual.

Dacă o bibliotecă nu conține tipuri în @types/, o puteți utiliza în continuare adăugând manual tipurile pentru aceasta. Puteți face acest lucru după cum urmează:

Crearea unui fișier typings.d.ts în dosarul src/. Acest fișier este inclus automat ca definiție globală a tipurilor.

Adaugați următorul cod în src/typings.d.ts.

Adaugați următorul cod în componenta sau fișierul care utilizează biblioteca:

Actualizarea bibliotecilor

Puteți actualiza bibliotecile utilizând comanda ng update. Aceasta actualizează versiunile individuale ale bibliotecilor. Angular CLI verifică cea mai recentă versiune publicată a bibliotecii și, dacă găsește că cea mai recentă versiune este mai nouă decât versiunea dvs. instalată, o descarcă și actualizează fișierul package.json pentru a corespunde celei mai recente versiuni.

Syntaxă

Nota: Când actualizați Angular la o versiune nouă, trebuie să vă asigurați că toate bibliotecile pe care le utilizați sunt actuale. Dacă bibliotecile au interdependențe, acestea trebuie, de asemenea, să fie actualizate.

Cum să adăugați o bibliotecă în domeniul global de execuție

Bibliotecile JavaScript Legacy care nu sunt importate într-o aplicație pot fi adăugate în domeniul global de execuție și încărcate ca și cum ar fi într-o etichetă de script. Trebuie să configurați CLI pentru a face acest lucru în momentul compilării, utilizând opțiunile „scripts” și „styles” ale țintei de compilare din fișierul de configurare CLI, angular.json.

De exemplu, pentru a utiliza biblioteca Bootstrap 4, instalați mai întâi biblioteca și dependențele sale utilizând managerul de pachete npm:

Adaugați fișierul CSS Bootstrap la matricea „styles”:

Crearea de noi biblioteci

Puteți crea și publica propriile biblioteci noi pentru a extinde funcționalitățile Angular. Se utilizează în general atunci când aveți nevoie să rezolvați aceeași problemă în mai multe aplicații (sau doriți să împărtășiți soluția dvs. cu alți dezvoltatori), aveți un candidat pentru o bibliotecă.

De exemplu: Puteți crea un buton care să trimită utilizatorii pe site-ul web al companiei dumneavoastră, care să fie inclus în toate aplicațiile pe care compania dumneavoastră le construiește.

Deschideți Angular CLI și utilizați următoarea sintaxă pentru a crea o nouă bibliotecă.

Sintaxa

Aceasta va crea un dosar projects/my-lib în spațiul de lucru, care conține o componentă și un serviciu în interiorul unui NgModule. Fișierul de configurare a spațiului de lucru, angular.json, este actualizat cu un proiect de tip ‘library’.

Acum, puteți construi, testa și lint proiectul dvs. folosind următoarele comenzi: