Az Angular egy TypeScript fejlesztői platform és keretrendszer, amelyet egyoldalas alkalmazások létrehozására használnak.

Az Angularnak összetett története van. A fejlesztők JavaScriptet használtak a keretrendszer első verziójának (AngularJS) elkészítéséhez. Az Angularfejlesztők később a TypeScriptet használták az Angular összes egymást követő verziójának elkészítéséhez (az első verzióban található hibák száma miatt).

2021-től az Angular legújabb verziója a 12.0. Ebből a cikkből mindent megtudhat, amit az Angularframeworkről tudnia kell.

Mi az Angular?

Sokan az Angularas-t keretrendszernek írják le, és bár ez a meghatározás nem helytelen, az Angular nem csak egy keret. Az Angular egy fejlesztői platform is. Ez azt jelenti, hogy rendelkezik egy hardver- és szoftverrendszerrel, amely Angular alkalmazásokat futtat.

Bár TypeScriptre épül, a platform kódjának nagy részét JavaScriptben írhatja. A legtöbb keretrendszerhez hasonlóan az Angular is komponens alapú. Ez azt jelenti, hogy az Angular felhasználói felület minden egyes szakaszát független entitásként kezeljük, ami újrafelhasználható kód és méretezhető alkalmazások létrehozásához vezet.

Az Angular használatához ismernie kell a HTML-t, a CSS-t és a JavaScriptet (a TypeScript előnye, de nem feltétele). Az Angularis gyakran a VueJS-hez és a ReactJS-hez hasonlítja, és az egyik fő kifogás az, hogy az Angular tanulási görbéje meredekebb.

Összefüggő: Mi az a ReactJS, és mire használható?

Ez nem meglepő, mivel az Angular (lévén fejlesztői platform) több alapvető struktúrával rendelkezik, amelyekkel megismerkedhet. Ezek a szerkezetek a következőket tartalmazzák:

• Modulok
• Alkatrészek
• Sablonok

Ezen alapvető funkciók megértése biztosítja, hogy jó úton haladjon afelé, hogy Angular fejlesztővé váljon.

Angular Files felfedezése

Az Angular alkalmazás sok fájlt generál az új projektmappán belül (ahogy az alábbi képen is látható). Tekintse meg az Angular hivatalos webhelyét az Angular számítógépre történő telepítéséhez.

Az egyik legfontosabb fájl a fő projekt mappában a package.json fájlt. Ez a fájl közli a projekt nevét, a projekt indításának módját (ng szolgálni), hogyan építsd fel a projektedet (ng build), és hogyan tesztelheti projektjét (ng teszt) többek között.

A fő projektmappája két mappát is tartalmaz –node_modules és src. Az src mappa az a hely, ahol az összes fejlesztést elvégezheti; több fájlt és mappát tartalmaz.

Az src mappa

Az stílusok.css fájlba helyezheti el az összes globális stílusbeállítást és a index.html fájl az egyetlen oldal, amely megjelenik a böngészőben.

Az index.html fájl felfedezése

Az egyetlen dolog, amin változtatni szeretne a index.html fenti fájl a pályázat címe. Az címkét a HTML-fájl törzsében a fenti hivatkozások között app.component.ts fájlt, amely az alkalmazás mappájában található (ahogy az alábbi képen is látható).

Az app.component.ts fájl felfedezése

import {Component } from "@angular/core";
@Összetevő({
választó: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'saját alkalmazás';
}

Az app.component.ts fájl használja a app-root választó, amely a index.html fenti fájl. Használja a app.component.html fájlt sablonként és a app.component.css fájl stílushoz.

Az app.component.css a fájl üres a generáláskor, mert az összes stílusbeállítás a HTML-elrendezéssel együtt a app.component.html fájlt.

Az Angular alkalmazás futtatása a ng szolgálni -- nyitva parancs a következőt jeleníti meg a böngészőjében:

Ha módosítani szeretné, hogy mi jelenjen meg a böngészőben, szerkesztenie kell a app.component.html fájlt.

A fájl tartalmának cseréje a következő kóddal:

Helló Világ

A következő kimenetet hozza létre a böngészőben:

A szögmodulok megértése

Minden Szögletes Az alkalmazás egy alapmodulrendszerre épül, az úgynevezett NgModules. Minden alkalmazás tartalmaz legalább egyet NgModule. Szögletes két modult generál a új parancs (app-routing.module.ts és app.module.ts).

Az app.module.ts fájl tartalmazza a gyökérmodult, amelynek jelen kell lennie az alkalmazás futtatásához.

Az app.module.ts fájl felfedezése

import { NgModule } innen: '@angular/core';
import { BrowserModule } innen: '@angular/platform-browser';
import { AppRoutingModule } innen: './app-routing.module';
import { AppComponent } innen: './app.component';
@NgModule({
nyilatkozatok: [
AppComponent
],
import: [
Böngészőmodul,
AppRoutingModule
],
szolgáltatók: [],
bootstrap: [AppComponent]
})
Export osztály AppModule { }

A fenti fájl a JavaScriptet használja import nyilatkozat importálásához NgModule, az BrowserModule, az AppComponent, és a AppRoutingModule (ami a második NgModule a projektben).

Az @NgModule lakberendező jön az import után. Azt jelzi, hogy a app.module.ts fájl valóban a NgModule. Az @NgModule dekorátor ezután több tömböt konfigurál: a nyilatkozatok, az behozatal, az szolgáltatók, és a bootstrap.

Az nyilatkozatok tömb tárolja az adott komponenshez tartozó összetevőket, direktívákat és csöveket NgModule. Gyökér modul esetén azonban csak a AppComponent tárolja a nyilatkozat tömb (amint a fenti kódban is látható).

Az behozatal array importálja a másikat NgModules amelyet az alkalmazásban használ. Az behozatal tömb a fenti kódban importálja a BrowserModule (amely lehetővé teszi böngésző-specifikus szolgáltatások, például DOM-megjelenítés használatát), és a AppRoutingModule (amely lehetővé teszi az alkalmazás számára a Szögletes router).

Összefüggő: A webhelyek rejtett hőse: A DOM megértése

Az szolgáltatók A tömbnek olyan szolgáltatásokat kell tartalmaznia, amelyek más elemekben is részt vesznek NgModules lehet használni.

Az bootstrap tömb nagyon fontos, mert tartalmazza az Angular által létrehozott belépési komponenst és beilleszti a index.html fájlt a fő projekt mappában. Minden Angular alkalmazás elindul a bootstrap tömb a gyökérben NgModule által bootstrapping az NgModule (amely egy olyan folyamatot foglal magában, amely minden komponenst beilleszt a bootstrap tömb a böngésző DOM-jában).

A szögösszetevők megértése

Minden Angular komponens négy konkrét fájllal jön létre. Ha megnézi az alkalmazásmappa fenti képét, a következő fájlokat fogja látni:

• app.component.css (CSS fájl)
• app.component.html (sablonfájl)
• app.component.spec.ts (egy tesztelési specifikációs fájl)
• app.component.ts (összetevő fájl)

Az összes fenti fájl ugyanahhoz az összetevőhöz van társítva. Ha használja a ng generálni paranccsal egy új komponens létrehozásához, négy, a fentiekhez hasonló fájl jön létre. Az app.component.ts fájl tartalmazza a gyökérkomponens, amely összekapcsolja az összetevő különböző aspektusait (például a sablont és a stílust).

Az app.component.ts fájl felfedezése

import { Component } from '@angular/core';
@Összetevő({
választó: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'saját alkalmazás';
}

Az app.component.ts fájl a JavaScript import utasítást használja a „Component” importálásához az Angular magjából. Aztán a @Összetevő dekorátor az osztályt alkotóelemként azonosítja. Az @Összetevő dekorátor tartalmaz egy tárgyat, amely a választó, a sablonUrlés a styleUrls sor.

Az választó elmondja Szögletes az alkalmazáskomponens egy példányának beszúrásához bármely HTML-sablonba, amely a következőnek megfelelő címkével rendelkezik választó (így a címke). És ha visszanéz a kódra a index.html A fenti fájlban megtalálja a címke.

A fő alkalmazás-összetevő fájl is hivatkozik a sablonfájlra, a sablonUrl ingatlan. Ez a app.component.html fájl, amely felvázolja, hogyan kell egy adott összetevőt leképezni egy Angular alkalmazásban.

Az objektum végső tulajdonsága a styleUrls. Ez a tulajdonság stíluslapokra hivatkozik, ami azt jelenti, hogy több stíluslapot is alkalmazhat egyetlen komponens (így hozzáadhatja az src mappában lévő globális stíluslapot a styleUrls tömbhöz jól).

A szögletes sablonok megértése

Az app.component.html fájl egy példa egy Angular sablonra. Ez a fájl egy HTML-fájl, valamint egy összetevőfájl (az alkalmazáskomponens). Ezért minden összetevőnek rendelkeznie kell egy HTML-sablonnal, egyszerűen azért, mert ez felvázolja, hogyan jelenik meg egy komponens a DOM-ban.

Mi a következő lépés?

A DOM megértése a következő legjobb lépés. Az Angular platform és keretrendszer átvétele kétségtelenül kihívást jelent. Ez azonban lehetséges, és mivel az Angular a DOM-ban jeleníti meg összetevőit, a DOM megismerése – miközben megpróbálja elsajátítani az Angulart – egy másik nagyszerű lépés.

A webhelyek rejtett hőse: A DOM megértése

Webtervezést tanul, és többet szeretne tudni a dokumentumobjektum-modellről? Íme, amit a DOM-ról tudnia kell.

Olvassa el a következőt

A szerzőről