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

Angular ima složenu istoriju. Programeri su koristili JavaScript da bi napravili prvu verziju ovog okvira (AngularJS). Angulardeveloperi su kasnije koristili TypeScript za pravljenje svih uzastopnih verzija Angulara (zbog broja grešaka u prvoj verziji).

Od 2021. najnovija verzija Angular-a je 12.0. U ovom članku ćete naučiti sve što treba da znate o Angularframework-u.

Šta je ugaoni?

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

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

Da biste koristili Angular, morate biti upoznati sa HTML-om, CSS-om i JavaScript-om (znanje da je TypeScript prednost, ali ne i uslov). Angularis se često upoređuje sa VueJS-om i ReactJS-om, a jedna od glavnih zamerki je što Angular ima strmiju krivu učenja.

Повезан: Šta je ReactJS i za šta se može koristiti?

Ovo nije iznenađenje, pošto Angular (kao razvojna platforma) ima veći broj osnovnih struktura sa kojima se možete upoznati. Ove strukture uključuju:

• Moduli
• Komponente
• Šabloni

A razumevanje ovih osnovnih funkcija će osigurati da ste na dobrom putu da postanete Angular programer.

Istraživanje ugaonih datoteka

Angular aplikacija generiše mnogo datoteka unutar vašeg novog direktorijuma projekta (kao što možete videti na slici ispod). Proverite Angularovu zvaničnu veb lokaciju za uputstva o tome kako da instalirate Angular na svoj računar.

Jedna od važnijih datoteka u glavnoj fascikli projekta je package.json fajl. Ova datoteka vam govori ime vašeg projekta, kako da pokrenete projekat (ng služe), kako da napravite svoj projekat (ng build), i kako da testirate svoj projekat (ng test) између осталог.

Vaša glavna fascikla projekta takođe sadrži dve fascikle—node_modules и src. The src fascikla je mesto gde ćete raditi sav svoj razvoj; sadrži nekoliko datoteka i fascikli.

Mapa src

The styles.css datoteka je mesto gde ćete staviti sve svoje globalne postavke stila i index.html datoteka je jedna stranica koja se prikazuje u vašem pretraživaču.

Istraživanje datoteke index.html

Jedina stvar koju biste želeli da promenite u index.html gornja datoteka je naslov aplikacije. The tag u telu HTML datoteke iznad veza do app.component.ts datoteku, koja se nalazi u fascikli aplikacije (kao što možete videti na slici ispod).

Istraživanje datoteke app.component.ts

import {Component } iz '@angular/core';
@Саставни део({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
izvoz klase AppComponent {
title = 'moja aplikacija';
}

The app.component.ts datoteka koristi app-root selektor, koji se nalazi u index.html fajl iznad. Koristi se app.component.html datoteku kao šablon i app.component.css fajl za stil.

The app.component.css datoteka je prazna kada se generiše jer su sva podešavanja stila, zajedno sa HTML izgledom, unutar app.component.html fajl.

Pokretanje aplikacije Angular sa ng služi --otvoreno komanda će prikazati sledeće u vašem pretraživaču:

Da biste promenili šta se prikazuje u vašem pretraživaču, moraćete da uredite app.component.html fajl.

Zamena sadržaja ove datoteke sledećim kodom:

Здраво Свете

Daće sledeći izlaz u vašem pretraživaču:

Razumevanje ugaonih modula

Svaki Ugaoni aplikacija je izgrađena na osnovnom modulskom sistemu, poznatom kao NgModules. Svaka aplikacija sadrži najmanje jednu NgModule. Ugaoni generiše dva modula iz ng new komanda (app-routing.module.ts и app.module.ts).

The app.module.ts datoteka sadrži osnovni 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({
deklaracije: [
AppComponent
],
uvozi: [
BrowserModule,
AppRoutingModule
],
provajderi: [],
bootstrap: [AppComponent]
})
izvoz klase AppModule { }

Datoteka iznad koristi JavaScript увоз izjavu za uvoz NgModule, the BrowserModule, the AppComponent, and the AppRoutingModule (što je drugi NgModule u projektu).

The @NgModule dekorater dolazi posle uvoza. To ukazuje da je app.module.ts datoteka je zaista a NgModule. The @NgModule dekorator zatim konfiguriše nekoliko nizova: the deklaracije, the uvozi, the provajderi, and the bootstrap.

The deklaracije niz čuva komponente, direktive i cevi koje pripadaju određenom NgModule. Međutim, u slučaju root modula samo AppComponent se čuva u deklaracija niz (kao što možete videti u kodu iznad).

The uvozi niz uvozi drugi NgModules koje koristite u aplikaciji. The uvozi niz u kodu iznad uvozi BrowserModule (što mu omogućava da koristi usluge specifične za pregledač, kao što je DOM renderovanje), i AppRoutingModule (što omogućava aplikaciji da koristi Ugaoni ruter).

Повезан: Skriveni heroj veb lokacija: razumevanje DOM-a

The provajderi niz treba da sadrži usluge koje komponente u drugom NgModules Можете користити.

The bootstrap niz je veoma važan jer sadrži ulaznu komponentu koju Angular kreira i ubacuje u index.html datoteku u glavnoj fascikli projekta. Svaka Angular aplikacija se pokreće iz bootstrap niz u korenu NgModule од стране bootstrapping the NgModule (što uključuje proces koji umeće svaku komponentu u bootstrap niz u DOM pretraživača).

Razumevanje ugaonih komponenti

Svaka Angular komponenta se generiše sa četiri specifične datoteke. Ako pogledate gornju sliku fascikle aplikacije, videćete sledeće datoteke:

• app.component.css (CSS datoteka)
• app.component.html (datoteka šablona)
• app.component.spec.ts (datoteka sa specifikacijom testiranja)
• app.component.ts (fajl komponente)

Sve gore navedene datoteke su povezane sa istom komponentom. Ako koristite ng generate komandu za generisanje nove komponente, biće generisane četiri datoteke slične onima iznad. The app.component.ts datoteka sadrži koren komponenta, koji povezuje različite aspekte komponente (kao što su šablon i stil).

Istraživanje datoteke app.component.ts

import { Component } iz '@angular/core';
@Саставни део({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
izvoz klase AppComponent {
title = 'moja aplikacija';
}

The app.component.ts koristi JavaScript naredbu za uvoz za uvoz „Komponente“ iz Angularovog jezgra. Затим @Саставни део dekorater identifikuje klasu kao komponentu. The @Саставни део dekorater sadrži objekat koji se sastoji od a selektor, a templateUrl, i a styleUrls niz.

The selektor kazuje Ugaoni da biste umetnuli instancu komponente aplikacije u bilo koji HTML šablon koji ima oznaku koja odgovara selektor (dakle, oznaka). A ako pogledate nazad na kod u index.html datoteku iznad naći ćete tag.

Glavna datoteka komponente aplikacije takođe se povezuje sa datotekom šablona, ​​koristeći templateUrl својство. Ово је app.component.html datoteku, koja opisuje kako određena komponenta treba da se prikaže u Angular aplikaciji.

Konačna osobina u objektu je styleUrls. Ovo svojstvo upućuje na niz stilova, što znači da možete primeniti više stilova na jednu komponentu (tako da možete da dodate globalnu listu stilova u fasciklu src u niz styleUrls kao добро).

Razumevanje ugaonih šablona

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

Шта је следеће?

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

Skriveni heroj veb lokacija: razumevanje DOM-a

Učite veb dizajn i želite da znate više o modelu objekata dokumenta? Evo šta treba da znate o DOM-u.

Read Next

О аутору