Angular-kirjastot

Angular-kirjastot on rakennettu ratkaisuksi yleisiin ongelmiin, kuten yhtenäisen käyttöliittymän esittämiseen, tietojen esittämiseen ja tietojen syöttämisen mahdollistamiseen. Kehittäjät voivat luoda yleisiä ratkaisuja tietyille aloille, joita voidaan mukauttaa uudelleenkäyttöön eri sovelluksissa. Nämä ratkaisut voidaan rakentaa Angular-kirjastoina, ja nämä kirjastot voidaan julkaista ja jakaa npm-paketteina.

Angular-kirjasto on Angular-projekti, mutta se eroaa Angular-sovelluksesta siinä mielessä, että se ei voi toimia yksinään. Se tuodaan ja sitä käytetään sovelluksessa.

Angular-kirjastojen käyttö

• Angular-kirjastot laajentavat Angularin perustoimintoja. Jos esimerkiksi haluat lisätä sovellukseen reaktiivisia lomakkeita, lisää kirjastopaketti käyttämällä ng add @angular/forms ja tuo sitten ReactiveFormsModule @angular/forms-kirjastosta sovelluskoodiin.
• Angular Material on esimerkki suuresta yleiskäyttöisestä kirjastosta, joka tarjoaa kehittyneitä, uudelleenkäytettäviä ja mukautettavia käyttöliittymäkomponentteja.

Kirjastojen asentaminen

Kirjastot julkaistaan npm-paketteina ja integroidaan Angular CLI:n kanssa. Integroidaksemme uudelleenkäytettävää kirjastokoodia sovellukseen, meidän on asennettava paketti ja tuotava tarjottu toiminnallisuus sinne, missä aiomme käyttää sitä.

Syntaksi

Komento ng add käyttää npm-paketinhallintaa kirjastopaketin asentamiseen ja kutsuu paketin sisältämiä kaavioita muihin projektikoodin sisällä oleviin telineisiin, kuten import-lausekkeiden, fonttien, teemojen ja niin edelleen lisäämiseen.

Kirjastojen tyypittely

Kirjastopaketit sisältävät tyypittelyjä .d.ts-tiedostoissa. Jos kirjastosi paketti ei sisällä typityksiä ja IDE näyttää virheen, sinun on asennettava kirjastoon liittyvä @types/-paketti.

Esimerkiksi oletetaan, että sinulla on kirjasto nimeltä d1:

Työtilaan asennetun kirjaston @types/-paketissa määritellyt tyypit lisätään automaattisesti kyseistä kirjastoa käyttävän projektin TypeScript-konfiguraatioon. TypeScript etsii tyypit oletusarvoisesti node_modules/@types-kansiosta, joten sinun ei tarvitse lisätä jokaista tyyppipakettia erikseen.

Jos kirjasto ei sisällä tyypityksiä @types/-kansiossa, voit silti käyttää sitä lisäämällä sille tyypitykset manuaalisesti. Voit tehdä sen seuraavasti:

Luo typings.d.ts-tiedosto src/-kansioon. Tämä tiedosto sisällytetään automaattisesti globaaliksi tyyppimääritykseksi.

Lisää seuraava koodi tiedostoon src/typings.d.ts.

Lisää seuraava koodi komponenttiin tai tiedostoon, joka käyttää kirjastoa:

Kirjastojen päivittäminen

Voit päivittää kirjastot käyttämällä ng update-komentoa. Se päivittää yksittäisten kirjastojen versiot. Angular CLI tarkistaa kirjaston viimeisimmän julkaistun version, ja jos se havaitsee, että uusin versio on uudempi kuin asentamasi versio, se lataa sen ja päivittää package.jsonin vastaamaan uusinta versiota.

Syntax

Huomaa: Kun päivität Angularin uuteen versioon, sinun on varmistettava, että kaikki käyttämäsi kirjastot ovat ajan tasalla. Jos kirjastoilla on keskinäisiä riippuvuuksia, myös ne on päivitettävä.

Kirjaston lisääminen ajonaikaiseen globaaliin laajuuteen

Legendaariset JavaScript-kirjastot, joita ei ole tuotu sovellukseen, voidaan lisätä ajonaikaiseen globaaliin laajuuteen ja ladata ikään kuin ne olisivat skriptitunnisteessa. Sinun on määritettävä CLI tekemään tämä rakennusaikana käyttämällä CLI:n konfiguraatiotiedoston angular.jsonissa olevan rakennuskohteen ”scripts”- ja ”styles”-vaihtoehtoja.

Jos haluat esimerkiksi käyttää Bootstrap 4 -kirjastoa, asenna ensin kirjasto ja sen riippuvuudet npm-paketinhallinnan avulla:

Lisää Bootstrap CSS-tiedosto ”styles”-joukkoon:

Uusien kirjastojen luominen

Voit luoda ja julkaista omia uusia kirjastoja Angularin toiminnallisuuksien laajentamiseksi. Sitä käytetään yleensä silloin, kun haluat ratkaista saman ongelman useammassa kuin yhdessä sovelluksessa (tai haluat jakaa ratkaisusi muiden kehittäjien kanssa), sinulla on ehdokas kirjastolle.

Esim: Voit luoda painikkeen, joka lähettää käyttäjät yrityksesi verkkosivuille ja joka sisältyisi kaikkiin sovelluksiin, joita yrityksesi rakentaa.

Avaa Angular CLI ja luo uusi kirjasto seuraavalla syntaksilla.

Syntax

Tällöin työtilaasi luodaan projects/my-lib-kansio, joka sisältää komponentin ja palvelun NgModulen sisällä. Työtilan konfigurointitiedostoon, angular.json, päivitetään projekti, jonka tyyppi on ’library’.

Nyt voit rakentaa, testata ja linttailla projektisi seuraavien komentojen avulla: