Angular on TypeScript-kehitysalusta ja -kehys, jota käytetään yksisivuisten sovellusten luomiseen.

Angularilla on monimutkainen historia. Kehittäjät käyttivät JavaScriptiä tämän kehyksen ensimmäisen version (AngularJS) rakentamiseen. Angular-kehittäjät käyttivät myöhemmin TypeScriptiä kaikkien peräkkäisten Angular-versioiden rakentamiseen (ensimmäisen version virheiden lukumäärän vuoksi).

Vuodesta 2021 lähtien Angularin uusin versio on 12.0. Tässä artikkelissa opit kaiken, mitä sinun tulee tietää Angularframeworkista.

Mikä on Angular?

Monet ihmiset kuvailevat Angularas-kehystä, ja vaikka tämä määritelmä ei ole virheellinen, Angular ei ole vain kehys. Angular on myös kehitysalusta. Tämä tarkoittaa, että siinä on laitteisto- ja ohjelmistojärjestelmä, joka suorittaa Angular-sovelluksia.

Vaikka se on rakennettu TypeScriptille, voit kirjoittaa suurimman osan alustan koodista JavaScriptillä. Kuten useimmat puitteet, Angular on komponenttipohjainen. Tämä tarkoittaa, että jokaista Angular-käyttöliittymän osaa käsitellään itsenäisenä kokonaisuutena, mikä johtaa uudelleenkäytettävän koodin ja skaalautuvien sovellusten luomiseen.

Angularin käyttäminen edellyttää HTML: n, CSS: n ja JavaScriptin tuntemista (tiedä, että TypeScript on etu, mutta ei vaatimus). Angularisia verrataan usein VueJS: ään ja ReactJS: ään, ja yksi tärkeimmistä valituksista on, että Angularilla on jyrkempi oppimiskäyrä.

Aiheeseen liittyvä: Mikä ReactJS on ja mihin sitä voidaan käyttää?

Tämä ei ole yllätys, sillä Angularilla (kehitysalustana) on suurempi määrä ydinrakenteita, joihin voit tutustua. Näitä rakenteita ovat:

• Moduulit
• Komponentit
• Mallit

Ja näiden ydinominaisuuksien ymmärtäminen varmistaa, että olet hyvällä tiellä kohti Angular-kehittäjää.

Kulmatiedostojen tutkiminen

Angular-sovellus luo monia tiedostoja uudessa projektikansiossasi (kuten näet alla olevasta kuvasta). Katso Angularin viralliselta verkkosivustolta ohjeet Angularin asentamiseen tietokoneellesi.

Yksi tärkeimmistä tiedostoista pääprojektikansiossa on package.json tiedosto. Tämä tiedosto kertoo projektin nimen, kuinka projekti aloitetaan (palvella), kuinka rakentaa projektisi (ng rakentaa) ja kuinka testaat projektiasi (ng testi) muun muassa.

Pääprojektikansiosi sisältää myös kaksi kansiota –solmu_moduulit ja src. The src kansio on paikka, jossa teet kaiken kehitystyösi; se sisältää useita tiedostoja ja kansioita.

src-kansio

The styles.css tiedostoon sijoitat kaikki yleiset tyyliasetuksesi ja index.html tiedosto on yksittäinen sivu, joka näkyy selaimessasi.

Index.html-tiedoston tutkiminen

Ainoa asia, jonka haluaisit muuttaa index.html yllä oleva tiedosto on sovelluksen otsikko. The -tunniste HTML-tiedoston rungossa linkkien yläpuolella app.component.ts tiedosto, joka sijaitsee sovelluskansiossa (kuten näet alla olevasta kuvasta).

App.component.ts-tiedoston tutkiminen

tuo {komponentti } osoitteesta @angular/core;
@Component({
valitsin: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
vientiluokka AppComponent {
title = 'oma-sovellus';
}

The app.component.ts tiedosto käyttää app-root valitsin, joka sijaitsee kohdassa index.html tiedosto yllä. Se käyttää app.component.html tiedosto mallina ja app.component.css tiedosto tyyliä varten.

The app.component.css tiedosto on tyhjä, kun se luodaan, koska kaikki tyyliasetukset sekä HTML-asettelu ovat app.component.html tiedosto.

Angular-sovelluksen suorittaminen palvella -- auki komento näyttää selaimessasi seuraavan:

Jos haluat muuttaa, mitä selaimessasi näkyy, sinun on muokattava app.component.html tiedosto.

Tämän tiedoston sisällön korvaaminen seuraavalla koodilla:

Hei maailma

Tuottaa seuraavan tulosteen selaimessasi:

Kulmamoduulien ymmärtäminen

Joka Kulmikas sovellus on rakennettu perusmoduulijärjestelmään, joka tunnetaan nimellä NgModules. Jokainen sovellus sisältää vähintään yhden NgModule. Kulmikas luo kaksi moduulia uutta komento (app-routing.module.ts ja app.module.ts).

The app.module.ts tiedosto sisältää juurimoduulin, jonka on oltava läsnä, jotta sovellus voi toimia.

App.module.ts-tiedoston tutkiminen

tuo { NgModule } osoitteesta @angular/core;
tuo { BrowserModule } @angular/platform-browserista;
tuo { AppRoutingModule } osoitteesta './app-routing.module';
tuo { AppComponent } osoitteesta './app.component';
@NgModule({
ilmoitukset: [
AppComponent
],
tuonti: [
Selainmoduuli,
AppRoutingModule
],
palveluntarjoajat: [],
bootstrap: [AppComponent]
})
vie luokka AppModule { }

Yllä oleva tiedosto käyttää JavaScriptiä tuonti lausunto tuodaksesi NgModule, Selainmoduuli, AppComponent, ja AppRoutingModule (joka on projektin toinen NgModule).

The @NgModule sisustaja tulee tuonnin jälkeen. Se osoittaa, että app.module.ts tiedosto on todellakin a NgModule. The @NgModule decorator määrittää sitten useita taulukoita: ilmoituksia, tuonti, tarjoajat, ja bootstrap.

The ilmoituksia array tallentaa komponentit, direktiivit ja putket, jotka kuuluvat tiettyyn NgModule. Kuitenkin juurimoduulin tapauksessa vain AppComponent on tallennettu ilmoitus array (kuten näet yllä olevasta koodista).

The tuonti array tuo toisen NgModules joita käytät sovelluksessa. The tuonti taulukko yllä olevassa koodissa tuo Selainmoduuli (jolloin se voi käyttää selainkohtaisia ​​palveluita, kuten DOM-renderöintiä) ja AppRoutingModule (joka sallii sovelluksen käyttää Kulmikas reititin).

Aiheeseen liittyvä: Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

The tarjoajat taulukon tulee sisältää palveluita, jotka komponentit muissa NgModules voi käyttää.

The bootstrap matriisi on erittäin tärkeä, koska se sisältää syöttökomponentin, jonka Angular luo ja lisää siihen index.html tiedosto projektin pääkansiossa. Jokainen Angular-sovellus käynnistyy osoitteesta bootstrap joukko juurissa NgModule kirjoittaja bootstrapping the NgModule (johon sisältyy prosessi, joka lisää jokaisen komponentin bootstrap taulukko selaimen DOM: ssa).

Kulmakomponenttien ymmärtäminen

Jokainen Angular-komponentti luodaan neljällä tietyllä tiedostolla. Jos katsot yllä olevaa sovelluskansiokuvaa, näet seuraavat tiedostot:

• app.component.css (CSS-tiedosto)
• app.component.html (mallitiedosto)
• app.component.spec.ts (testausmääritystiedosto)
• app.component.ts (komponenttitiedosto)

Kaikki yllä olevat tiedostot liittyvät samaan komponenttiin. Jos käytät ng tuottaa -komento luodaksesi uuden komponentin, luodaan neljä samanlaista tiedostoa kuin yllä olevat tiedostot. The app.component.ts tiedosto sisältää juurikomponentti, joka yhdistää komponentin eri näkökohdat (kuten mallin ja tyylin).

App.component.ts-tiedoston tutkiminen

tuo { Komponentti } osoitteesta @angular/core;
@Component({
valitsin: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
vientiluokka AppComponent {
title = 'oma-sovellus';
}

The app.component.ts tiedosto käyttää JavaScript-tuontilauseketta tuodakseen "komponentin" Angularin ytimestä. Sitten @Komponentti sisustaja tunnistaa luokan komponentiksi. The @Komponentti koristelu sisältää esineen, joka koostuu a valitsin, a mallin URL-osoite, ja a styleUrls joukko.

The valitsin kertoo Kulmikas lisätäksesi sovelluskomponentin esiintymän mihin tahansa HTML-malliin, jossa on valitsin (joten tag). Ja jos katsot taaksepäin koodia index.html yllä olevasta tiedostosta löydät tag.

Sovelluksen pääkomponenttitiedosto linkittää myös mallitiedostoon käyttämällä mallin URL-osoite omaisuutta. Tämä on app.component.html tiedosto, joka hahmottaa, kuinka tietty komponentti tulee renderöidä Angular-sovelluksessa.

Objektin lopullinen ominaisuus on styleUrls. Tämä ominaisuus viittaa joukkoon tyylisivuja, mikä tarkoittaa, että voit käyttää useita tyylisivuja yksi komponentti (joten voit lisätä yleisen tyylisivun src-kansiossa styleUrls-taulukkoon hyvin).

Kulmaisten mallien ymmärtäminen

The app.component.html tiedosto on esimerkki Angular-mallista. Tämä tiedosto on HTML-tiedosto sekä komponenttitiedosto (sovelluskomponentti). Siksi jokaisella komponentilla on oltava HTML-malli, yksinkertaisesti siksi, että se hahmottaa, kuinka komponentti renderöi DOM: ssa.

Mitä seuraavaksi?

DOM: n ymmärtäminen on seuraava paras siirtosi. Angular-alustan ja -kehyksen ottaminen käyttöön on epäilemättä haastavaa. Se on kuitenkin mahdollista, ja koska Angular renderöi komponenttinsa DOM: ssa, DOM: sta oppiminen – kun yrität hallita Angularia – on toinen hieno liike.

Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

Opitko web-suunnittelua ja haluat tietää lisää asiakirjaobjektimallista? Tässä on mitä sinun tulee tietää DOM: sta.

Lue Seuraava

Kirjailijasta