Angular je razvojna platforma i okvir TypeScript koji se koristi za izradu aplikacija na jednoj stranici.

Angular ima složenu povijest. Programeri su koristili JavaScript za izgradnju prve verzije ovog okvira (AngularJS). Angulardeveloperi su kasnije koristili TypeScript za izgradnju svih uzastopnih verzija Angulara (zbog broja grešaka u prvoj verziji).

Od 2021. najnovija verzija Angulara je 12.0. U ovom članku ćete naučiti sve što trebate znati o Angularframeworku.

Što je kutni?

Mnogi ljudi opisuju Angularas kao okvir, i iako ova definicija nije netočna, Angular nije samo okvir. Angular je također razvojna platforma. To znači da ima hardverski i softverski sustav koji pokreće Angular aplikacije.

Iako je izgrađen na TypeScript-u, većinu koda platforme možete napisati u JavaScriptu. Kao i većina okvira, Angular se temelji na komponentama. To znači da se svaki dio korisničkog sučelja Angular tretira kao neovisni entitet, što dovodi do stvaranja koda za višekratnu upotrebu i skalabilnih aplikacija.

Da biste koristili Angular, morate biti upoznati s HTML-om, CSS-om i JavaScriptom (poznavanje TypeScript-a je prednost, ali ne i uvjet). Angularis se često uspoređuje s VueJS-om i ReactJS-om, a jedna od glavnih zamjerki je da Angular ima strmiju krivulju učenja.

Povezano: Što je ReactJS i za što se može koristiti?

To ne čudi, jer Angular (kao razvojna platforma) ima veći broj temeljnih struktura s kojima možete upoznati. Te strukture uključuju:

• Moduli
• Komponente
• Predlošci

A razumijevanje ovih osnovnih značajki osigurat će vam da ste na dobrom putu da postanete Angular programer.

Istraživanje kutnih datoteka

Aplikacija Angular generira mnogo datoteka unutar vaše nove mape projekta (kao što možete vidjeti na donjoj slici). Provjerite Angularovu službenu web stranicu za upute o tome kako instalirati Angular na svoje računalo.

Jedna od važnijih datoteka unutar glavne mape projekta je paket.json datoteka. Ova datoteka vam govori naziv vašeg projekta, kako započeti svoj projekt (ng poslužiti), kako izgraditi svoj projekt (ng graditi), i kako testirati svoj projekt (ng test) između ostalog.

Vaša glavna mapa projekta također sadrži dvije mape—čvor_moduli i src. The src mapa je mjesto gdje ćete raditi sav svoj razvoj; sadrži nekoliko datoteka i mapa.

Mapa src

The styles.css datoteka je mjesto gdje ćete staviti sve svoje globalne postavke stila i index.html datoteka je jedna stranica koja se prikazuje u vašem pregledniku.

Istraživanje datoteke index.html

Jedina stvar koju biste željeli promijeniti u index.html gornja datoteka je naslov aplikacije. The tag u tijelu HTML datoteke iznad linkova na app.component.ts datoteku, koja se nalazi unutar mape aplikacije (kao što možete vidjeti na donjoj slici).

Istraživanje app.component.ts datoteke

import {Component } iz '@angular/core';
@Komponenta({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
izvoz klase AppComponent {
title = 'moja aplikacija';
}

The app.component.ts datoteka koristi korijen aplikacije selektor, koji se nalazi u index.html datoteku iznad. Koristi se app.component.html datoteku kao predložak i app.component.css datoteka za stil.

The app.component.css datoteka je prazna kada se generira jer su sve postavke stila, zajedno s HTML izgledom, unutar app.component.html datoteka.

Pokretanje aplikacije Angular s ng poslužiti --otvoreno naredba će prikazati sljedeće u vašem pregledniku:

Da biste promijenili ono što se prikazuje u vašem pregledniku, morat ćete urediti app.component.html datoteka.

Zamjena sadržaja ove datoteke sljedećim kodom:

Pozdrav svijete

U vašem pregledniku će proizvesti sljedeći izlaz:

Razumijevanje kutnih modula

Svaki Kutni aplikacija je izgrađena na temeljnom modulskom sustavu, poznatom kao NgModuli. Svaka aplikacija sadrži barem jednu NgModule. Kutni generira dva modula iz novo naredba (app-routing.module.ts i app.module.ts).

The app.module.ts datoteka sadrži korijenski modul, koji mora biti prisutan da bi se aplikacija pokrenula.

Istraživanje datoteke app.module.ts

import { NgModule } iz '@angular/core';
import { BrowserModule } iz '@angular/platform-browser';
import { AppRoutingModule } iz './app-routing.module';
import { AppComponent } iz './app.component';
@NgModule({
izjave: [
AppComponent
],
uvozi: [
Modul preglednika,
AppRoutingModule
],
pružatelji usluga: [],
bootstrap: [AppComponent]
})
izvoz klase AppModule { }

Gornja datoteka koristi JavaScript uvoz izjavu za uvoz NgModule, the Modul preglednika, the AppComponent, i AppRoutingModule (što je drugi NgModule u projektu).

The @NgModule dekorater dolazi nakon uvoza. To ukazuje da je app.module.ts datoteka je doista a NgModule. The @NgModule dekorator zatim konfigurira nekoliko nizova: the deklaracije, the uvozi, the pružatelji usluga, i bootstrap.

The deklaracije niz pohranjuje komponente, direktive i cijevi koje pripadaju određenom NgModule. Međutim, u slučaju korijenskog modula samo AppComponent je pohranjena u deklaracija niz (kao što možete vidjeti u kodu iznad).

The uvozi niz uvozi drugi NgModuli koje koristite u aplikaciji. The uvozi niz u kodu iznad uvozi Modul preglednika (što mu omogućuje korištenje usluga specifičnih za preglednik, kao što je DOM renderiranje) i AppRoutingModule (što aplikaciji omogućuje korištenje Kutni usmjerivač).

Povezano: Skriveni heroj web stranica: razumijevanje DOM-a

The pružatelji usluga niz treba sadržavati usluge koje komponente u drugom NgModuli može koristiti.

The bootstrap array je vrlo važan jer sadrži ulaznu komponentu koju Angular stvara i umeće u index.html datoteku u glavnoj mapi projekta. Svaka Angular aplikacija pokreće se iz bootstrap niz u korijenu NgModule po bootstrapping the NgModule (što uključuje proces koji umeće svaku komponentu u bootstrap niz u DOM preglednika).

Razumijevanje kutnih komponenti

Svaka komponenta Angular generira se s četiri određene datoteke. Ako pogledate gornju sliku mape aplikacije, vidjet ćete sljedeće datoteke:

• app.component.css (CSS datoteka)
• app.component.html (datoteka predloška)
• app.component.spec.ts (datoteka sa specifikacijama testiranja)
• app.component.ts (komponentna datoteka)

Sve gore navedene datoteke povezane su s istom komponentom. Ako koristite ng generirati naredba za generiranje nove komponente, generirat će se četiri datoteke slične onima iznad. The app.component.ts datoteka sadrži korijenska komponenta, koji povezuje različite aspekte komponente (kao što su predložak i stil).

Istraživanje app.component.ts datoteke

import { Component } iz '@angular/core';
@Komponenta({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
izvoz klase AppComponent {
title = 'moja aplikacija';
}

The app.component.ts datoteka koristi JavaScript naredbu uvoza za uvoz "Komponente" iz Angularove jezgre. Onda @Komponenta dekorator identificira klasu kao komponentu. The @Komponenta dekorator sadrži objekt koji se sastoji od a selektor, a templateUrl, i a styleUrls niz.

The selektor pripovijeda Kutni za umetanje instance komponente aplikacije u bilo koji HTML predložak koji ima oznaku koja odgovara selektor (dakle, označiti). A ako se osvrnete na kod u index.html datoteku iznad ćete pronaći označiti.

Glavna datoteka komponente aplikacije također se povezuje na datoteku predloška, ​​koristeći templateUrl imovine. Ovo je app.component.html datoteku, koja opisuje kako bi se određena komponenta trebala prikazati u Angular aplikaciji.

Konačno svojstvo u objektu je styleUrls. Ovo svojstvo upućuje na niz stilskih listova, što znači da na njih možete primijeniti više stilskih listova jedna komponenta (tako da možete dodati globalni stilski list u mapi src u niz styleUrls kao dobro).

Razumijevanje kutnih predložaka

The app.component.html datoteka je primjer Angular predloška. Ova datoteka je HTML datoteka kao i datoteka komponente (komponenta aplikacije). Stoga svaka komponenta mora imati HTML predložak, jednostavno zato što opisuje kako se komponenta prikazuje u DOM-u.

Što je sljedeće?

Razumijevanje DOM-a vaš je sljedeći najbolji potez. Preuzimanje Angular platforme i okvira nesumnjivo je izazov. Međutim, moguće je, a s obzirom na to da Angular svoje komponente renderira u DOM-u, učenje o DOM-u - dok pokušavate svladati Angular - je još jedan sjajan potez.

Skriveni heroj web stranica: razumijevanje DOM-a

Učite web dizajn i trebate znati više o modelu objekta dokumenta? Evo što trebate znati o DOM-u.

Pročitajte dalje

O autoru