Angular Academy · Oppitunti

Kirjaston luominen ng generatella

Luokaa kirjastoprojektin runko

Oppitunti 1/413 vaihetta

Kirjaston luominen ng generatella on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Miksi kirjasto kannattaa rakentaa

Kun useat sovellukset tarvitsevat samoja komponentteja, palveluita tai apuohjelmia, paketoi ne Angular-kirjastoksi. Kirjasto on uudelleenkäytettävä, versioitava ja julkaistava kokonaisuus sen sijaan, että koodia kopioitaisiin projektien välillä.

Työtilat sisältävät kirjastot

Kirjastot sijaitsevat Angularin työtilassa: kyseessä on yhden angular.json-tiedoston hallinnoima kansio, joka voi sisältää useita sovelluksia ja kirjastoja. Voit lisätä kirjaston olemassa olevaan työtilaan tai luoda sille oman työtilan.

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

Kirjaston luominen

Skeema ng generate library (alias ng g lib) luo uuden kirjastoprojektin rungon hakemistoon projects/.

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

Mitä luodaan

Kirjaston mukana luodaan oma src/lib-kansio, public-api.ts-koontitiedosto, ng-package.json-tiedosto (käännöstä varten) sekä merkintä tiedostoon angular.json. Kyseessä on itsenäinen, käännettävä projekti.

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

Komponenttien lisääminen kirjastoon

Luo koodia kirjastoon kohdistamalla komento siihen valitsimella --project. CLI sijoittaa tiedostot oikeaan kansioon.

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

Itsenäiset komponentit kirjastoissa

Nykyaikaisissa kirjastoissa suositaan itsenäisiä komponentteja, jotka kuluttaja tuo suoraan ilman NgModule-moduulia. Merkitse komponentti määrityksellä standalone: true, jotta sovellukset voivat käyttää sitä yksinkertaisella importilla.

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

Kirjaston package.json

Jokaisella kirjastolla on oma package.json-tiedostonsa, jossa määritellään sen nimi, versio ja vertaisriippuvuudet, kuten @angular/core. Vertaisriippuvuudet tarkoittavat, että käyttävä sovellus toimittaa Angularin, jolloin päällekkäisiä kopioita ei synny.

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

Kehittäminen paikallista sovellusta vasten

Pidä samassa työtilassa esimerkkisovellus, jolla voit kokeilla kirjastoa sen kehittämisen aikana. Kun tuot kirjaston nimellä, TypeScriptin tsconfig-tiedostossa määritetyt polkukuvaukset ohjaavat tuonnin paikalliseen lähdekoodiin.

Kirjasto ja sovellus

Sovellus on tarkoitettu käyttöönotettavaksi, kirjasto käytettäväksi muissa sovelluksissa. Kirjastoa ei voi tarjota suoraan, vaan se käännetään jaeltavaksi paketiksi, joka joko julkaistaan tai tuodaan työtilan sovelluksiin.

Pidä kirjastot rajattuina

Hyvällä kirjastolla on selkeä tarkoitus, kuten käyttöliittymäkirjasto tai tiedonsaantikerros. Vältä toisiinsa liittymättömän koodin kokoamista samaan paikkaan: yhtenäisiä kirjastoja on helpompi versioida, dokumentoida ja käyttää uudelleen.

Seuraavat vaiheet

Kun kirjaston runko on luotu, jäljellä on sen julkisen rajapinnan määrittely, sen kääntäminen Angular Package Format -muotoon ja sen julkaiseminen. Seuraavilla oppitunneilla käsitellään kutakin vaihetta.

Pikatarkistus

Miten kirjasto luodaan?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kirjastot paketoivat uudelleenkäytettävää koodia useille sovelluksille. Luo kirjasto työtilassa komennolla ng generate library; se luo rungon hakemistoihin ja tiedostoihin src/lib, public-api.ts, ng-package.json sekä package.json, jossa on vertaisriippuvuudet. Lisää koodia valitsimella --project, suosi itsenäisiä komponentteja ja pidä jokainen kirjasto tarkoitukseltaan rajattuna.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Kirjaston luominen ng generatella” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kirjaston luominen ng generatella”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Kirjaston luominen ng generatella”?

Luokaa kirjastoprojektin runko Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Kirjaston luominen ng generatella”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy