Angular Academy · Oppitunti

Miksi itsenäiset komponentit

Tutustukaa siihen, miten itsenäiset komponentit yksinkertaistavat Angularia.

Oppitunti 1/413 vaihetta

Miksi itsenäiset komponentit 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 itsenäiset komponentit?

Itsenäisten komponenttien avulla Angular-sovelluksia voi rakentaa ilman NgModuleja. Komponentti ilmoittaa omat riippuvuutensa, joten rakennuspalikat ovat itsenäisiä ja helpompia ymmärtää.

NgModule-aikakausi

Perinteisesti jokainen komponentti, direktiivi ja putki piti ilmoittaa @NgModule-sisällä. Moduulit ryhmittelivät ilmoitukset ja hallitsivat tuonteja ja vientiä.

Tämä lisäsi toisteista perustekstiä ja ylimääräisen epäsuoruustason.

NgModulejen aiheuttamat ongelmat

NgModulet aiheuttivat yleisiä hankaluuksia: komponentin ilmoittaminen unohtui, sama komponentti ilmoitettiin kahdessa moduulissa, tuonnit ja ilmoitukset menivät sekaisin ja suuret jaetut moduulit toivat mukaan liikaa sisältöä.

Itsenäisyyden idea

Itsenäisten komponenttien yhteydessä kukin komponentti luettelee tarvitsemansa asiat omassa imports-taulukossaan. Keskitettyä moduulia, jonka pitäisi tietää komponentista, ei ole.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

Itsenäiset riippuvuudet

Koska itsenäinen komponentti ilmoittaa omat riippuvuutensa, voitte lukea yhden tiedoston ja tietää kaiken, mihin se tukeutuu. Tämä parantaa selkeyttä ja työkalujen toimintaa.

Vähemmän toisteista perustekstiä

Moduulien välisiä ilmoituksia ja vientiä ei enää tarvitse sovittaa yhteen. Tuotte komponentin suoraan siellä, missä käytätte sitä, samaan tapaan kuin ES-moduulit toimivat.

Parempi puunravistelu

Itsenäiset komponentit tekevät riippuvuusgraafista selkeän, mikä auttaa paketoijia poistamaan käyttämättömän koodin ja voi pienentää pakettien kokoa.

Laiska lataus helposti

Reitit voivat ladata itsenäisen komponentin suoraan dynaamisella tuonnilla ilman ominaisuusmoduulin käärettä.

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

Uusi oletus

Angularin viimeaikaisissa versioissa itsenäisyys on uusille komponenteille oletus. NgModulet toimivat edelleen, mutta itsenäisiä komponentteja suositellaan jatkossa käytettäväksi.

Yhteentoimivuus NgModulejen kanssa

Itsenäinen ja moduulipohjainen koodi toimivat yhdessä. Itsenäisen komponentin voi tuoda NgModuleen, ja NgModule-pohjainen komponentti voi käyttää itsenäisiä tuonteja, mikä helpottaa siirtymistä.

Mitä vielä määritetään

Sovelluksen laajuinen määritys, kuten reititin tai HTTP-asiakas, annetaan bootstrapApplication-funktion tarjoajille juurimoduulin sijaan. Näette tämän myöhemmin.

Pikatarkistus: miksi itsenäisyys?

Mikä on itsenäisten komponenttien keskeinen hyöty?

Vastaa interaktiivisessa oppitunnissa

Kertaus: miksi itsenäisyys?

Itsenäiset komponentit poistavat NgModuleihin liittyvän toisteisen perustekstin, koska kukin komponentti ilmoittaa omat riippuvuutensa. Tämä tekee koodista selkeämpää, helpottaa laiskaa latausta ja parantaa puunravistelua. Itsenäisyys on nyt oletus. Seuraavaksi luotte itsenäisen komponentin.

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 ”Miksi itsenäiset komponentit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Miksi itsenäiset komponentit”. 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 ”Miksi itsenäiset komponentit”?

Tutustukaa siihen, miten itsenäiset komponentit yksinkertaistavat Angularia. 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 ”Miksi itsenäiset komponentit”-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