Angular je vývojová platforma a framework TypeScript, který se používá k vytváření jednostránkových aplikací.

Angular má složitou historii. Vývojáři použili JavaScript k vytvoření první verze tohoto rámce (AngularJS). Angulardevelopers později použili TypeScript k vytvoření všech následných verzí Angular (kvůli počtu chyb v první verzi).

Od roku 2021 je nejnovější verze Angular 12.0. V tomto článku se dozvíte vše, co potřebujete vědět o Angularframework.

Co je Angular?

Mnoho lidí popisuje Angular jako framework, a přestože tato definice není nesprávná, Angular není jen framework. Angular je také vývojová platforma. To znamená, že má hardwarový a softwarový systém, na kterém běží aplikace Angular.

Přestože je postaven na TypeScript, většinu kódu platformy můžete psát v JavaScriptu. Jako většina frameworků je Angular založen na komponentách. To znamená, že s každou částí uživatelského rozhraní Angular se zachází jako s nezávislou entitou, což vede k vytvoření opakovaně použitelného kódu a škálovatelných aplikací.

Chcete-li používat Angular, musíte znát HTML, CSS a JavaScript (znalost TypeScript je výhodou, ale není podmínkou). Angularis je často srovnáván s VueJS a ReactJS a jednou z hlavních stížností je, že Angular má strmější křivku učení.

Příbuzný: Co je ReactJS a k čemu se dá použít?

Není to žádné překvapení, protože Angular (jako vývojová platforma) má větší počet základních struktur, se kterými se můžete seznámit. Mezi tyto struktury patří:

• Moduly
• Komponenty
• Šablony

A pochopení těchto základních funkcí zajistí, že jste na dobré cestě stát se vývojářem Angular.

Prozkoumávání Angular Files

Aplikace Angular generuje mnoho souborů ve vaší nové složce projektu (jak můžete vidět na obrázku níže). Pokyny, jak nainstalovat Angular do počítače, naleznete na oficiálních stránkách Angular.

Jedním z nejdůležitějších souborů v hlavní složce projektu je soubor package.json soubor. Tento soubor vám sdělí název vašeho projektu, jak projekt spustit (ng sloužit), jak postavit svůj projekt (ng stavět), a jak otestovat svůj projekt (ng test) mimo jiné.

Vaše hlavní složka projektu obsahuje také dvě složky –node_modules a src. The src složka je místo, kde budete provádět veškerý svůj vývoj; obsahuje několik souborů a složek.

Složka src

The styly.css soubor je místo, kam uložíte všechny své globální předvolby stylů a index.html soubor je jediná stránka, která se vykreslí ve vašem prohlížeči.

Prozkoumání souboru index.html

Jediná věc, kterou byste chtěli změnit v index.html soubor výše je název aplikace. The značka v těle souboru HTML nad odkazy na app.component.ts soubor, který se nachází ve složce aplikace (jak můžete vidět na obrázku níže).

Prozkoumání souboru app.component.ts

import {Component } z '@angular/core';
@Komponent({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exportní třída AppComponent {
title = 'moje aplikace';
}

The app.component.ts soubor používá kořen aplikace volič, který se nachází v index.html soubor výše. Používá se app.component.html soubor jako šablonu a app.component.css soubor pro styl.

The app.component.css soubor je při vygenerování prázdný, protože všechny předvolby stylů spolu s rozložením HTML jsou v rámci app.component.html soubor.

Spuštění aplikace Angular s ng sloužit --otevřít příkaz zobrazí ve vašem prohlížeči následující:

Chcete-li změnit, co se zobrazuje ve vašem prohlížeči, budete muset upravit app.component.html soubor.

Nahrazení obsahu tohoto souboru následujícím kódem:

Ahoj světe

Ve vašem prohlížeči vytvoří následující výstup:

Pochopení úhlových modulů

Každý Hranatý aplikace je postavena na základním modulovém systému, známém jako NgModules. Každá aplikace obsahuje alespoň jednu NgModule. Hranatý generuje dva moduly z ng nové příkaz (app-routing.module.ts a app.module.ts).

The app.module.ts obsahuje kořenový modul, který musí být přítomen pro spuštění aplikace.

Prozkoumání souboru 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({
prohlášení: [
AppComponent
],
dovoz: [
modul prohlížeče,
AppRoutingModule
],
poskytovatelé: [],
bootstrap: [AppComponent]
})
exportní třída AppModule { }

Výše uvedený soubor používá JavaScript import příkaz k importu NgModule, Modul prohlížeče, AppComponenta AppRoutingModule (což je druhý NgModule v projektu).

The @NgModule dekoratér přichází po dovozu. Znamená to, že app.module.ts soubor je skutečně a NgModule. The @NgModule decorator pak nakonfiguruje několik polí: the prohlášení, dovozy, poskytovateléa bootstrap.

The prohlášení pole ukládá komponenty, direktivy a kanály, které patří konkrétnímu NgModule. V případě kořenového modulu však pouze AppComponent je uložen v prohlášení pole (jak můžete vidět v kódu výše).

The dovozy pole importuje druhé NgModules které v aplikaci používáte. The dovozy pole ve výše uvedeném kódu importuje Modul prohlížeče (což mu umožňuje používat služby specifické pro prohlížeč, jako je vykreslování DOM) a AppRoutingModule (což umožňuje aplikaci používat Hranatý router).

Příbuzný: Skrytý hrdina webových stránek: Porozumění DOM

The poskytovatelé pole by mělo obsahovat služby, které jsou součástí jiných NgModules může použít.

The bootstrap pole je velmi důležité, protože obsahuje vstupní komponentu, kterou Angular vytváří a vkládá do index.html soubor v hlavní složce projektu. Každá aplikace Angular se spouští z bootstrap pole v kořeni NgModule podle bootstrapping a NgModule (což zahrnuje proces, který vkládá každou komponentu do bootstrap pole v prohlížeči DOM).

Pochopení úhlových komponent

Každá Angular komponenta je generována se čtyřmi specifickými soubory. Pokud se podíváte na obrázek složky aplikace výše, uvidíte následující soubory:

• app.component.css (soubor CSS)
• app.component.html (soubor šablony)
• app.component.spec.ts (soubor testovací specifikace)
• app.component.ts (komponentní soubor)

Všechny výše uvedené soubory jsou spojeny se stejnou komponentou. Pokud použijete ng generovat příkaz pro vygenerování nové součásti, vygenerují se čtyři soubory podobné těm výše. The app.component.ts soubor obsahuje kořenová složka, který propojuje různé aspekty komponenty (jako je šablona a styl).

Prozkoumání souboru app.component.ts

import { Component } from '@angular/core';
@Komponent({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exportní třída AppComponent {
title = 'moje aplikace';
}

The app.component.ts soubor používá příkaz import JavaScript k importu „Component“ z jádra Angular. Potom @Komponent dekorátor identifikuje třídu jako komponentu. The @Komponent dekorátor obsahuje předmět složený z a volič, a templateUrla a styl URL pole.

The volič vypráví Hranatý chcete-li vložit instanci komponenty aplikace do jakékoli šablony HTML, která má značku odpovídající volič (takže štítek). A pokud se podíváte zpět na kód v index.html soubor výše najdete štítek.

Hlavní soubor součásti aplikace také odkazuje na soubor šablony pomocí templateUrl vlastnictví. To je app.component.html soubor, který popisuje, jak by měla být konkrétní komponenta vykreslena v aplikaci Angular.

Konečná vlastnost v objektu je styl URL. Tato vlastnost odkazuje na pole šablon stylů, což znamená, že můžete použít více šablon stylů jedna komponenta (takže můžete přidat globální šablonu stylů ve složce src do pole styleUrls jako studna).

Pochopení úhlových šablon

The app.component.html soubor je příkladem šablony Angular. Tento soubor je soubor HTML a také dílčí soubor (součást aplikace). Proto musí mít každá komponenta HTML šablonu, jednoduše proto, že nastiňuje, jak se komponenta vykresluje v DOM.

Co bude dál?

Pochopení DOM je váš další nejlepší krok. Převzít platformu a framework Angular je nepochybně náročné. Nicméně je to možné a vzhledem k tomu, že Angular vykresluje své komponenty v DOM, učení se o DOM – když se snažíte zvládnout Angular – je dalším skvělým krokem.

Skrytý hrdina webových stránek: Porozumění DOM

Učíte se webdesign a potřebujete vědět více o Document Object Model? Zde je to, co potřebujete vědět o DOM.

Přečtěte si další

O autorovi