Angular ir TypeScript izstrādes platforma un ietvars, ko izmanto vienas lapas lietojumprogrammu izveidei.

Angular ir sarežģīta vēsture. Izstrādātāji izmantoja JavaScript, lai izveidotu šīs sistēmas pirmo versiju (AngularJS). Angulardevelopers vēlāk izmantoja TypeScript, lai izveidotu visas secīgās Angular versijas (pateicoties kļūdu skaitam pirmajā versijā).

No 2021. gada jaunākā Angular versija ir 12.0. Šajā rakstā jūs uzzināsit visu, kas jums jāzina par Angularframework.

Kas ir leņķiskais?

Daudzi cilvēki raksturo Angularas kā ietvaru, un, lai gan šī definīcija nav nepareiza, Angular nav tikai ietvars. Angular ir arī attīstības platforma. Tas nozīmē, ka tai ir aparatūras un programmatūras sistēma, kas darbina Angular lietojumprogrammas.

Lai gan tā ir balstīta uz TypeScript, lielāko daļu platformas koda varat rakstīt JavaScript. Tāpat kā lielākā daļa ietvaru, arī Angular pamatā ir komponenti. Tas nozīmē, ka katra Angular lietotāja saskarnes sadaļa tiek uzskatīta par neatkarīgu entītiju, kas noved pie atkārtoti lietojama koda un mērogojamu lietojumprogrammu izveides.

Lai izmantotu Angular, jums ir jāpārzina HTML, CSS un JavaScript (zinot, ka TypeScript ir priekšrocība, bet ne prasība). Angularis bieži salīdzina ar VueJS un ReactJS, un viena no galvenajām sūdzībām ir tā, ka Angular mācīšanās līkne ir stāvāka.

Saistīts: Kas ir ReactJS un kādam nolūkam to var izmantot?

Tas nav pārsteigums, jo Angular (kas ir izstrādes platforma) ir pieejams vairāk pamata struktūru, ar kurām jūs varat iepazīties. Šīs struktūras ietver:

• Moduļi
• Sastāvdaļas
• Veidnes

Izpratne par šīm pamatfunkcijām nodrošinās, ka esat labā ceļā, lai kļūtu par Angular izstrādātāju.

Angular failu izpēte

Lietojumprogramma Angular ģenerē daudzus failus jūsu jaunajā projekta mapē (kā redzat tālāk esošajā attēlā). Norādījumus par Angular instalēšanu datorā skatiet Angular oficiālajā vietnē.

Viens no svarīgākajiem failiem galvenajā projekta mapē ir pack.json failu. Šis fails norāda jūsu projekta nosaukumu, kā sākt projektu (kalpot), kā izveidot savu projektu (būvēt), un kā pārbaudīt savu projektu (ng testu) cita starpā.

Jūsu galvenajā projekta mapē ir arī divas mapes —node_modules un src. The src mape ir vieta, kur jūs veiksit visu savu attīstību; tajā ir vairāki faili un mapes.

src mape

The stili.css fails ir vieta, kur jūs ievietosit visas savas globālās stila preferences un index.html fails ir viena lapa, kas tiek renderēta jūsu pārlūkprogrammā.

Faila index.html izpēte

Vienīgā lieta, ko jūs vēlētos mainīt index.html augšējais fails ir pieteikuma nosaukums. The tags HTML faila pamattekstā virs saitēm uz app.component.ts failu, kas atrodas lietotņu mapē (kā redzams tālāk esošajā attēlā).

Izpētiet failu app.component.ts

importēt {Component } no '@angular/core';
@Komponents({
atlasītājs: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
eksporta klases AppComponent {
virsraksts = 'mana lietotne';
}

The app.component.ts fails izmanto app-root selektors, kas atrodas index.html failu augstāk. Tas izmanto app.component.html failu kā veidni un app.component.css stila fails.

The app.component.css fails ir tukšs, kad tas tiek ģenerēts, jo visas stila preferences, kā arī HTML izkārtojums atrodas app.component.html failu.

Lietojumprogrammas Angular palaišana ar ng serve --atvērts komanda pārlūkprogrammā parādīs šādu informāciju:

Lai mainītu to, kas tiek rādīts jūsu pārlūkprogrammā, jums ir jārediģē app.component.html failu.

Šī faila satura aizstāšana ar šādu kodu:

Sveika pasaule

Jūsu pārlūkprogrammā tiks parādīta šāda izvade:

Izpratne par leņķiskajiem moduļiem

Katrs Leņķisks lietojumprogramma ir veidota uz pamata moduļu sistēmas, kas pazīstama kā NgModules. Katrā lietojumprogrammā ir vismaz viens NgModule. Leņķisks ģenerē divus moduļus no jauns komanda (app-routing.module.ts un app.module.ts).

The app.module.ts fails satur saknes moduli, kuram jābūt klāt, lai programma darbotos.

Faila app.module.ts izpēte

importēt { NgModule } no '@angular/core';
importēt { BrowserModule } no '@angular/platform-browser';
importēt { AppRoutingModule } no './app-routing.module';
importēt { AppComponent } no './app.component';
@NgModule({
deklarācijas: [
AppComponent
],
imports: [
Pārlūka modulis,
AppRoutingModule
],
pakalpojumu sniedzēji: [],
bootstrap: [AppComponent]
})
eksportēt klases AppModule { }

Iepriekš minētajā failā tiek izmantots JavaScript imports paziņojums par importēšanu NgModule, Pārlūka modulis, AppComponent, un AppRoutingModule (kas ir otrais NgModule projektā).

The @NgModule dekorators nāk pēc importa. Tas norāda, ka app.module.ts fails patiešām ir a NgModule. The @NgModule dekorators pēc tam konfigurē vairākus masīvus: deklarācijas, imports, pakalpojumu sniedzēji, un bootstrap.

The deklarācijas masīvs saglabā komponentus, direktīvas un caurules, kas pieder konkrētai NgModule. Tomēr saknes moduļa gadījumā tikai AppComponent tiek glabāts deklarācija masīvs (kā redzat iepriekš minētajā kodā).

The imports masīvs importē otru NgModules ko izmantojat lietojumprogrammā. The imports masīvs iepriekš minētajā kodā importē Pārlūka modulis (kas ļauj izmantot pārlūkprogrammai raksturīgus pakalpojumus, piemēram, DOM renderēšanu), un AppRoutingModule (kas ļauj lietojumprogrammai izmantot Leņķisks maršrutētājs).

Saistīts: Vietņu slēptais varonis: DOM izpratne

The pakalpojumu sniedzēji masīvā ir jāietver pakalpojumi, kas komponenti citos NgModules var izmantot.

The bootstrap masīvs ir ļoti svarīgs, jo tas satur ievades komponentu, ko Angular izveido un ievieto index.html failu galvenajā projekta mapē. Katra Angular lietojumprogramma tiek palaista no bootstrap masīvs saknē NgModule autors bootstrapping uz NgModule (kas ietver procesu, kurā katrs komponents tiek ievietots bootstrap masīvs pārlūkprogrammas DOM).

Leņķisko komponentu izpratne

Katrs Angular komponents tiek ģenerēts ar četriem konkrētiem failiem. Ja apskatīsit iepriekš redzamo lietotņu mapes attēlu, tiks parādīti šādi faili:

• app.component.css (CSS fails)
• app.component.html (veidnes fails)
• app.component.spec.ts (testēšanas specifikācijas fails)
• app.component.ts (komponentu fails)

Visi iepriekš minētie faili ir saistīti ar vienu un to pašu komponentu. Ja jūs izmantojat ng ģenerēt komandu, lai ģenerētu jaunu komponentu, tiks ģenerēti četri līdzīgi faili iepriekšminētajiem. The app.component.ts fails satur saknes sastāvdaļa, kas savieno dažādus komponenta aspektus (piemēram, veidni un stilu).

Izpētiet failu app.component.ts

importēt { Component } no '@angular/core';
@Komponents({
atlasītājs: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
eksporta klases AppComponent {
virsraksts = 'mana lietotne';
}

The app.component.ts fails izmanto JavaScript importēšanas paziņojumu, lai importētu “Component” no Angular kodola. Tad @Komponents dekorators identificē klasi kā sastāvdaļu. The @Komponents dekorators satur objektu, kas sastāv no a atlasītājs, a veidnes URLun a stila URL masīvs.

The atlasītājs stāsta Leņķisks lai ievietotu lietotnes komponenta gadījumu jebkurā HTML veidnē, kurā ir tags, kas atbilst atlasītājs (tātad tag). Un, ja atskatīsities uz kodu, kas atrodas index.html augstāk esošajā failā jūs atradīsit tagu.

Galvenais lietotnes komponenta fails arī veido saiti uz veidnes failu, izmantojot veidnes URL īpašums. Tas ir app.component.html failu, kurā ir izklāstīts, kā konkrēts komponents ir jāatveido Angular lietojumprogrammā.

Galīgais objektā esošais īpašums ir stila URL. Šis rekvizīts atsaucas uz stilu lapu masīvu, kas nozīmē, ka varat lietot vairākas stila lapas viens komponents (lai jūs varētu pievienot globālo stilu lapu mapē src masīvam styleUrls kā labi).

Izpratne par leņķiskām veidnēm

The app.component.html fails ir Angular veidnes piemērs. Šis fails ir HTML fails, kā arī komponenta fails (lietotnes komponents). Tāpēc katram komponentam ir jābūt HTML veidnei, jo tajā ir norādīts, kā komponents tiek renderēts DOM.

Ko tālāk?

DOM izpratne ir jūsu nākamais labākais solis. Angular platformas un sistēmas izmantošana neapšaubāmi ir izaicinājums. Tomēr tas ir iespējams, un, ņemot vērā to, ka Angular atveido savus komponentus DOM, mācīšanās par DOM — kā jūs mēģināt apgūt Angular — ir vēl viens lielisks solis.

Vietņu slēptais varonis: DOM izpratne

Vai mācāties tīmekļa dizainu un vēlaties uzzināt vairāk par dokumenta objektu modeli? Lūk, kas jums jāzina par DOM.

Lasiet Tālāk

Par autoru