Angular je vývojová platforma a rámec TypeScript, ktorý sa používa na vytváranie jednostránkových aplikácií.

Angular má zložitú históriu. Vývojári použili JavaScript na vytvorenie prvej verzie tohto rámca (AngularJS). Angulardevelopers neskôr použili TypeScript na zostavenie všetkých po sebe nasledujúcich verzií Angular (kvôli množstvu chýb v prvej verzii).

Od roku 2021 je najnovšia verzia Angular 12.0. V tomto článku sa dozviete všetko, čo potrebujete vedieť o Angularframework.

Čo je Angular?

Mnoho ľudí opisuje Angular ako rámec, a hoci táto definícia nie je nesprávna, Angular nie je len rámec. Angular je tiež vývojová platforma. To znamená, že má hardvérový a softvérový systém, ktorý spúšťa aplikácie Angular.

Hoci je postavená na TypeScript, väčšinu kódu platformy môžete napísať v JavaScripte. Ako väčšina rámcov, aj Angular je založený na komponentoch. To znamená, že s každou sekciou používateľského rozhrania Angular sa zaobchádza ako s nezávislou entitou, čo vedie k vytvoreniu opätovne použiteľného kódu a škálovateľných aplikácií.

Ak chcete používať Angular, musíte poznať HTML, CSS a JavaScript (znať TypeScript je aktívum, ale nie požiadavka). Angularis sa často porovnáva s VueJS a ReactJS a jednou z hlavných sťažností je, že Angular má strmšiu krivku učenia.

Súvisiace: Čo je ReactJS a na čo sa dá použiť?

Nie je to žiadne prekvapenie, pretože Angular (ako vývojová platforma) má väčší počet základných štruktúr, s ktorými sa môžete zoznámiť. Tieto štruktúry zahŕňajú:

• Moduly
• Komponenty
• Šablóny

A pochopenie týchto základných funkcií zabezpečí, že ste na dobrej ceste stať sa vývojárom Angular.

Skúmanie Angular Files

Aplikácia Angular generuje veľa súborov vo vašom novom priečinku projektu (ako môžete vidieť na obrázku nižšie). Pozrite si oficiálnu webovú stránku Angular, kde nájdete pokyny, ako nainštalovať Angular do počítača.

Jedným z najdôležitejších súborov v hlavnom priečinku projektu je package.json súbor. Tento súbor vám povie názov vášho projektu, ako spustiť projekt (ng slúžiť), ako zostaviť svoj projekt (stavať) a ako otestovať svoj projekt (ng test) okrem iného.

Váš hlavný priečinok projektu obsahuje aj dva priečinky –node_modules a src. The src priečinok je miesto, kde budete robiť celý svoj vývoj; obsahuje niekoľko súborov a priečinkov.

Priečinok src

The styles.css súbor je miesto, kam umiestnite všetky svoje globálne preferencie štýlu a index.html súbor je jediná stránka, ktorá sa vykreslí vo vašom prehliadači.

Preskúmanie súboru index.html

Jediná vec, ktorú by ste chceli zmeniť v index.html súbor vyššie je názov prihlášky. The značka v tele súboru HTML nad odkazmi na app.component.ts súbor, ktorý sa nachádza v priečinku aplikácie (ako vidíte na obrázku nižšie).

Preskúmanie súboru app.component.ts

import {Component } z '@angular/core';
@Component({
selektor: 'koreň aplikácie',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'moja aplikácia';
}

The app.component.ts súbor používa koreň aplikácie volič, ktorý sa nachádza v index.html súbor vyššie. Používa sa app.component.html súbor ako šablónu a app.component.css súbor pre štýl.

The app.component.css súbor je pri vygenerovaní prázdny, pretože všetky predvoľby štýlu spolu s rozložením HTML sú v rámci app.component.html súbor.

Spustenie aplikácie Angular s ng slúžiť --open príkaz zobrazí vo vašom prehliadači nasledovné:

Ak chcete zmeniť, čo sa zobrazuje vo vašom prehliadači, musíte upraviť súbor app.component.html súbor.

Nahradenie obsahu tohto súboru nasledujúcim kódom:

Ahoj svet

Vo vašom prehliadači vytvorí nasledujúci výstup:

Pochopenie uhlových modulov

Každý Hranatá aplikácia je postavená na základnom modulovom systéme, známom ako NgModules. Každá aplikácia obsahuje aspoň jednu NgModule. Hranatá generuje dva moduly z ng nové príkaz (app-routing.module.ts a app.module.ts).

The app.module.ts obsahuje koreňový modul, ktorý musí byť prítomný na spustenie aplikácie.

Preskúmanie súboru app.module.ts

import { NgModule } z '@angular/core';
import { BrowserModule } z '@angular/platform-browser';
import { AppRoutingModule } z './app-routing.module';
import { AppComponent } z './app.component';
@NgModule({
vyhlásenia: [
AppComponent
],
dovoz: [
Modul prehliadača,
AppRoutingModule
],
poskytovatelia: [],
bootstrap: [AppComponent]
})
exportná trieda AppModule { }

Vyššie uvedený súbor používa JavaScript importovať príkaz importovať NgModule, Modul prehliadača, AppComponent, a AppRoutingModule (čo je druhý NgModul v projekte).

The @NgModule dekoratér prichádza po dovoze. To naznačuje, že app.module.ts súbor je skutočne a NgModule. The @NgModule dekoratér potom nakonfiguruje niekoľko polí: the vyhlásenia, dovoz, poskytovateľov, a bootstrap.

The vyhlásenia pole ukladá komponenty, direktívy a kanály, ktoré patria konkrétnemu NgModule. Avšak v prípade koreňového modulu iba AppComponent je uložený v vyhlásenie pole (ako môžete vidieť v kóde vyššie).

The dovoz pole importuje druhé NgModules ktoré v aplikácii používate. The dovoz pole v kóde vyššie importuje Modul prehliadača (čo mu umožňuje používať služby špecifické pre prehliadač, ako je vykresľovanie DOM) a AppRoutingModule (čo umožňuje aplikácii používať Hranatá router).

Súvisiace: Skrytý hrdina webových stránok: Pochopenie DOM

The poskytovateľov pole by malo obsahovať služby, ktoré sú súčasťou iných NgModules môcť použiť.

The bootstrap pole je veľmi dôležité, pretože obsahuje vstupný komponent, ktorý Angular vytvára a vkladá do index.html súbor v hlavnom priečinku projektu. Každá aplikácia Angular sa spúšťa z bootstrap pole v koreni NgModule podľa bootstrapping a NgModule (čo zahŕňa proces, ktorý vkladá každý komponent do bootstrap pole v DOM prehliadača).

Pochopenie uhlových komponentov

Každý komponent Angular sa generuje so štyrmi špecifickými súbormi. Ak sa pozriete na obrázok priečinka aplikácie vyššie, uvidíte nasledujúce súbory:

• app.component.css (súbor CSS)
• app.component.html (súbor šablóny)
• app.component.spec.ts (súbor špecifikácie testovania)
• app.component.ts (komponentný súbor)

Všetky vyššie uvedené súbory sú spojené s rovnakým komponentom. Ak použijete ng generovať príkaz na vygenerovanie nového komponentu, vygenerujú sa štyri súbory podobné tým vyššie. The app.component.ts súbor obsahuje koreňový komponent, ktorá spája rôzne aspekty komponentu (ako je šablóna a štýl).

Preskúmanie súboru app.component.ts

import { Component } z '@angular/core';
@Component({
selektor: 'koreň aplikácie',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'moja aplikácia';
}

The app.component.ts súbor používa príkaz JavaScript import na importovanie „Component“ z jadra Angular. Potom @Component dekoratér identifikuje triedu ako komponent. The @Component dekoratér obsahuje predmet pozostávajúci z a selektor, a templateUrla a styleUrls pole.

The selektor hovorí Hranatá na vloženie inštancie komponentu aplikácie do akejkoľvek šablóny HTML, ktorá má značku zodpovedajúcu selektor (takže tag). A ak sa pozriete späť na kód v index.html súbor vyššie nájdete tag.

Súbor hlavného komponentu aplikácie tiež odkazuje na súbor šablóny pomocou templateUrl nehnuteľnosť. To je app.component.html súbor, ktorý načrtáva, ako by mal byť konkrétny komponent vykreslený v aplikácii Angular.

Konečná vlastnosť v objekte je styleUrls. Táto vlastnosť odkazuje na pole hárkov štýlov, čo znamená, že môžete použiť viacero hárkov štýlov jeden komponent (takže môžete pridať globálny hárok štýlov v priečinku src do poľa styleUrls ako dobre).

Pochopenie uhlových šablón

The app.component.html súbor je príkladom Angular šablóny. Tento súbor je súbor HTML, ako aj komponentný súbor (komponent aplikácie). Preto musí mať každý komponent HTML šablónu, jednoducho preto, že načrtáva, ako sa komponent vykresľuje v DOM.

Čo bude ďalej?

Pochopenie DOM je váš ďalší najlepší krok. Prevziať platformu a rámec Angular je nepochybne náročné. Je to však možné a vzhľadom na to, že Angular vykresľuje svoje komponenty v DOM, učenie sa o DOM – keď sa pokúšate zvládnuť Angular – je ďalším skvelým krokom.

Skrytý hrdina webových stránok: Pochopenie DOM

Učíte sa webový dizajn a potrebujete vedieť viac o objektovom modeli dokumentu? Tu je to, čo potrebujete vedieť o DOM.

Prečítajte si ďalej

O autorovi