Angular on TypeScripti arendusplatvorm ja raamistik, mida kasutatakse üheleheliste rakenduste loomiseks.

Angularil on keeruline ajalugu. Arendajad kasutasid selle raamistiku esimese versiooni (AngularJS) loomiseks JavaScripti. Angulardevelopers kasutas hiljem TypeScripti kõigi Angulari järjestikuste versioonide ehitamiseks (esimese versiooni vigade arvu tõttu).

Alates 2021. aastast on Angulari uusim versioon 12.0. Sellest artiklist saate teada kõike, mida peate nurkraami kohta teadma.

Mis on Angular?

Paljud inimesed kirjeldavad Angularast raamistikuna ja kuigi see määratlus ei ole vale, pole Angular lihtsalt raamistik. Angular on ka arendusplatvorm. See tähendab, et sellel on riist- ja tarkvarasüsteem, mis käitab Angulari rakendusi.

Kuigi see on üles ehitatud TypeScriptile, saate enamiku platvormi koodist kirjutada JavaScriptis. Nagu enamik raamistikke, on Angular komponendipõhine. See tähendab, et iga Angular kasutajaliidese jaotist käsitletakse iseseisva üksusena, mis viib korduvkasutatava koodi ja skaleeritavate rakenduste loomiseni.

Angulari kasutamiseks peate tundma HTML-i, CSS-i ja JavaScripti (teadmine, et TypeScript on vara, kuid mitte nõue). Angularist võrreldakse sageli VueJS-i ja ReactJS-iga ning üks peamisi kaebusi on see, et Angularil on järsem õppimiskõver.

Seotud: Mis on ReactJS ja milleks seda saab kasutada?

See pole üllatav, kuna Angularil (kuna arendusplatvorm) on rohkem põhistruktuure, millega saate tutvuda. Need struktuurid hõlmavad järgmist:

• Moodulid
• Komponendid
• Mallid

Ja nende põhifunktsioonide mõistmine tagab, et olete hästi teel Angulari arendajaks.

Nurgafailide uurimine

Rakendus Angular loob teie uues projektikaustas palju faile (nagu näete alloleval pildil). Angulari arvutisse installimise juhised leiate Angulari ametlikult veebisaidilt.

Üks olulisemaid faile põhiprojekti kaustas on package.json faili. See fail ütleb teile teie projekti nime, kuidas projekti alustada (teenida), kuidas oma projekti üles ehitada (ehitada) ja kuidas oma projekti testida (ng test) muuhulgas.

Teie projekti põhikaust sisaldab ka kahte kausta –node_modules ja src. The src kaust on koht, kus saate kogu oma arendustööd teha; see sisaldab mitmeid faile ja kaustu.

src kaust

The stiilid.css fail on koht, kuhu saate paigutada kõik oma üldised stiilieelistused ja index.html fail on üksainus leht, mis teie brauseris kuvatakse.

Faili index.html uurimine

Ainus asi, mida soovite selles muuta index.html ülaltoodud fail on rakenduse pealkiri. The HTML-faili põhiosas olev silt linkide kohal app.component.ts faili, mis asub rakenduse kaustas (nagu näete alloleval pildil).

Uurige faili app.component.ts

import {Component } kohast '@angular/core';
@Component({
valija: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ekspordi klass AppComponent {
title = 'minu rakendus';
}

The app.component.ts fail kasutab app-root valija, mis asub index.html ülaltoodud fail. See kasutab app.component.html faili mallina ja app.component.css faili stiili jaoks.

The app.component.css fail on genereerimisel tühi, kuna kõik stiilieelistused koos HTML-i paigutusega on app.component.html faili.

Rakenduse Angular käivitamine rakendusega serveeri --avatud käsk kuvab teie brauseris järgmist:

Brauseris kuvatava teabe muutmiseks peate muutma app.component.html faili.

Selle faili sisu asendamine järgmise koodiga:

Tere, Maailm

Toodab teie brauseris järgmise väljundi:

Nurgamoodulite mõistmine

iga Nurgeline rakendus on üles ehitatud alusmoodulisüsteemile, mida tuntakse kui Ngmoodulid. Iga rakendus sisaldab vähemalt ühte NgModule. Nurgeline genereerib kaks moodulit uus käsk (app-routing.module.ts ja app.module.ts).

The app.module.ts fail sisaldab juurmoodulit, mis peab rakenduse käitamiseks olemas olema.

Uurige faili app.module.ts

import { NgModule } kohast '@angular/core';
importida { BrowserModule } saidist '@angular/platform-browser';
import { AppRoutingModule } kohast './app-routing.module';
importida { AppComponent } saidist './app.component';
@NgModule({
deklaratsioonid: [
AppComponent
],
import: [
brauseri moodul,
AppRoutingModule
],
pakkujad: [],
bootstrap: [AppComponent]
})
ekspordi klassi AppModule { }

Ülaltoodud fail kasutab JavaScripti importida avaldus importimiseks NgModule, Brauseri moodul, AppComponent, ja AppRoutingModule (mis on projekti teine ​​NgModule).

The @NgModule dekoraator tuleb pärast importi. See näitab, et app.module.ts fail on tõepoolest a NgModule. The @NgModule Seejärel konfigureerib dekoraator mitu massiivi: deklaratsioonid, import, pakkujad, ja bootstrap.

The deklaratsioonid massiiv salvestab komponendid, direktiivid ja torud, mis kuuluvad konkreetsele NgModule. Juurmooduli puhul aga ainult AppComponent on salvestatud deklaratsiooni massiiv (nagu näete ülaltoodud koodist).

The import massiiv impordib teise Ngmoodulid mida rakenduses kasutate. The import ülaltoodud koodi massiiv impordib Brauseri moodul (mis võimaldab sellel kasutada brauseripõhiseid teenuseid, nagu DOM-i renderdamine) ja AppRoutingModule (mis võimaldab rakendusel kasutada Nurgeline ruuter).

Seotud: Veebisaitide varjatud kangelane: DOM-i mõistmine

The pakkujad massiiv peaks sisaldama teenuseid, mis komponendid muus Ngmoodulid saab kasutada.

The bootstrap massiiv on väga oluline, kuna see sisaldab sisestuskomponenti, mille Angular loob ja sellesse lisab index.html faili projekti põhikaustas. Iga Angular rakendus käivitub saidilt bootstrap massiiv juurus NgModule kõrval bootstrapping a NgModule (mis hõlmab protsessi, mis lisab iga komponendi bootstrap massiiv brauseri DOM-is).

Nurgakomponentide mõistmine

Iga Angular komponent genereeritakse nelja konkreetse failiga. Kui vaatate ülaltoodud rakenduse kausta pilti, näete järgmisi faile.

• app.component.css (CSS-fail)
• app.component.html (mallifail)
• app.component.spec.ts (testimise spetsifikatsiooni fail)
• app.component.ts (komponendi fail)

Kõik ülaltoodud failid on seotud sama komponendiga. Kui kasutate ng genereerida käsuga uue komponendi genereerimiseks, genereeritakse neli ülaltoodud failiga sarnast faili. The app.component.ts fail sisaldab juurkomponent, mis ühendab komponendi erinevad aspektid (nt mall ja stiil).

Uurige faili app.component.ts

import { Component } kohast '@angular/core';
@Component({
valija: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ekspordi klass AppComponent {
title = 'minu rakendus';
}

The app.component.ts fail kasutab Angulari tuumast "komponendi" importimiseks JavaScripti impordi avaldust. Siis @Component dekoraator identifitseerib klassi komponendina. The @Component dekoraator sisaldab objekti, mis koosneb a valija, a malliUrlja a stiili URL-id massiivi.

The valija jutustab Nurgeline rakenduse komponendi eksemplari sisestamiseks mis tahes HTML-malli, millel on märgend, mis vastab valija (seega silt). Ja kui vaatate tagasi failis olevale koodile index.html ülaltoodud failist leiate tag.

Rakenduse põhikomponendi fail lingib ka mallifailiga, kasutades malliUrl vara. See on app.component.html fail, mis kirjeldab, kuidas konkreetset komponenti Angular-rakenduses renderdada.

Objekti lõplik omadus on stiili URL-id. See atribuut viitab stiililehtede massiivile, mis tähendab, et saate rakendada mitu laadilehte ühest komponendist (nii et saate lisada src kausta globaalse stiililehe massiivi styleUrls kui hästi).

Nurgamallide mõistmine

The app.component.html fail on Angular malli näide. See fail on nii HTML-fail kui ka komponendifail (rakenduse komponent). Seetõttu peab igal komponendil olema HTML-mall, kuna see kirjeldab, kuidas komponent DOM-is renderdab.

Mis järgmiseks?

DOM-i mõistmine on teie järgmine parim samm. Angulari platvormi ja raamistiku kasutuselevõtt on kahtlemata keeruline. Siiski on see võimalik ja arvestades, et Angular renderdab oma komponendid DOM-is, on DOM-i tundmaõppimine – nagu proovite Angulari omandada – veel üks suurepärane samm.

Veebisaitide varjatud kangelane: DOM-i mõistmine

Kas õpite veebidisaini ja soovite dokumendiobjekti mudeli kohta rohkem teada saada? Siin on see, mida peate DOM-i kohta teadma.

Loe edasi

Autori kohta