Angular este o platformă și un cadru de dezvoltare TypeScript care este folosit pentru a crea aplicații cu o singură pagină.

Angular are o istorie complexă. Dezvoltatorii au folosit JavaScript pentru a construi prima versiune a acestui cadru (AngularJS). Dezvoltatorii Angular au folosit mai târziu TypeScript pentru a construi toate versiunile succesive de Angular (datorită numărului de erori din prima versiune).

Începând cu 2021, cea mai recentă versiune de Angular este 12.0. În acest articol, veți afla tot ce trebuie să știți despre Angularframework.

Ce este Angular?

Mulți oameni descriu Angular ca un cadru și, deși această definiție nu este incorectă, Angular nu este doar un cadru. Angular este, de asemenea, o platformă de dezvoltare. Aceasta înseamnă că are un sistem hardware și software, care rulează aplicații Angular.

Deși este construit pe TypeScript, puteți scrie majoritatea codului platformei în JavaScript. La fel ca majoritatea cadrelor, Angular este bazat pe componente. Aceasta înseamnă că fiecare secțiune a unei interfețe de utilizator Angular este tratată ca o entitate independentă, ceea ce duce la crearea de cod reutilizabil și aplicații scalabile.

Pentru a utiliza Angular, va trebui să fiți familiarizat cu HTML, CSS și JavaScript (cunoașterea TypeScript este un avantaj, dar nu o cerință). Angular se compară frecvent cu VueJS și ReactJS, iar una dintre principalele plângeri este că Angular are o curbă de învățare mai abruptă.

Legate de: Ce este ReactJS și pentru ce poate fi folosit?

Nu este o surpriză, deoarece Angular (fiind o platformă de dezvoltare) are un număr mai mare de structuri de bază cu care să vă familiarizați. Aceste structuri includ:

• Module
• Componente
• Șabloane

Și înțelegerea acestor caracteristici de bază vă va asigura că sunteți pe cale să deveniți un dezvoltator Angular.

Explorarea fișierelor unghiulare

Aplicația Angular generează multe fișiere în noul folder de proiect (după cum puteți vedea în imaginea de mai jos). Consultați site-ul oficial Angular pentru instrucțiuni despre cum să instalați Angular pe computer.

Unul dintre cele mai importante fișiere din folderul principal al proiectului este pachet.json fişier. Acest fișier vă spune numele proiectului, cum să începeți proiectul (ng servi), cum să vă construiți proiectul (ng construi), și cum să vă testați proiectul (ng test) printre alte lucruri.

Dosarul principal al proiectului conține, de asemenea, două foldere—module_noduri și src. The src folderul este locul în care vă veți face toată dezvoltarea; conține mai multe fișiere și foldere.

Dosarul src

The stiluri.css fișierul este locul în care veți pune toate preferințele globale de stil și index.html fișierul este singura pagină care se redă în browser.

Explorarea fișierului index.html

Singurul lucru pe care ai vrea să-l schimbi în index.html dosarul de mai sus este titlul cererii. The eticheta din corpul fișierului HTML de mai sus trimite către app.component.ts fișier, care se află în folderul aplicației (după cum puteți vedea în imaginea de mai jos).

Explorarea fișierului app.component.ts

import {Component } din '@angular/core';
@component({
selector: „app-root”,
templateUrl: „./app.component.html”,
styleUrls: ['./app.component.css']
})
clasa de export AppComponent {
titlu = „aplicația mea”;
}

The app.component.ts fișierul folosește app-root selector, care se află în index.html dosarul de mai sus. Acesta folosește app.component.html fișier ca șablon și app.component.css fișier pentru stil.

The app.component.css fișierul este gol când este generat, deoarece toate preferințele de stil, împreună cu aspectul HTML, se află în app.component.html fişier.

Rularea aplicației Angular cu ng serve --deschis comanda va afișa următoarele în browser:

Pentru a schimba ce afișează în browser, va trebui să editați app.component.html fişier.

Înlocuirea conținutului acestui fișier cu următorul cod:

Salut Lume

Va produce următoarea ieșire în browserul dvs.:

Înțelegerea modulelor unghiulare

Fiecare unghiular aplicația este construită pe un sistem de module de bază, cunoscut ca NgModules. Fiecare aplicație conține cel puțin una NgModule. unghiular generează două module din ng nou comanda (app-routing.module.ts și aplicație.modul.ts).

The aplicație.modul.ts fișierul conține modulul rădăcină, care trebuie să fie prezent pentru ca aplicația să poată rula.

Explorarea fișierului app.module.ts

import { NgModule } din '@angular/core';
import { BrowserModule } din '@angular/platform-browser';
import { AppRoutingModule } din './app-routing.module';
import { AppComponent } din './app.component';
@NgModule({
declarații: [
AppComponent
],
importuri: [
BrowserModule,
AppRoutingModule
],
furnizori: [],
bootstrap: [AppComponent]
})
export clasa AppModule { }

Fișierul de mai sus folosește JavaScript import declarație pentru a importa NgModule, cel BrowserModule, cel AppComponent, si AppRoutingModule (care este al doilea NgModule din proiect).

The @NgModule decorator vine după importuri. Indică faptul că aplicație.modul.ts fișierul este într-adevăr un NgModule. The @NgModule decorator configurează apoi mai multe matrice: the declarații, cel importurilor, cel furnizorii, si bootstrap.

The declarații array stochează componentele, directivele și conductele care aparțin unui anumit NgModule. Cu toate acestea, în cazul unui modul rădăcină, numai AppComponent este stocat în declaraţie matrice (după cum puteți vedea în codul de mai sus).

The importurilor array îl importă pe celălalt NgModules pe care îl utilizați în aplicație. The importurilor matricea din codul de mai sus importă BrowserModule (care îi permite să utilizeze servicii specifice browserului, cum ar fi redarea DOM) și AppRoutingModule (care permite aplicației să utilizeze unghiular router).

Legate de: Eroul ascuns al site-urilor web: înțelegerea DOM

The furnizorii matricea ar trebui să conțină servicii pe care componentele din altele NgModules poate utiliza.

The bootstrap matricea este foarte importantă deoarece conține componenta de intrare pe care Angular o creează și o inserează în index.html fișier în folderul principal al proiectului. Fiecare aplicație Angular se lansează din bootstrap matrice în rădăcină NgModule de bootstrapping cel NgModule (care implică un proces care inserează fiecare componentă în bootstrap matrice din browser DOM).

Înțelegerea componentelor unghiulare

Fiecare componentă Angular este generată cu patru fișiere specifice. Dacă aruncați o privire la imaginea folderului aplicației de mai sus, veți vedea următoarele fișiere:

• app.component.css (un fișier CSS)
• app.component.html (un fișier șablon)
• specificații.componente.aplicației (un fișier cu specificații de testare)
• app.component.ts (un fișier component)

Toate fișierele de mai sus sunt asociate cu aceeași componentă. Dacă utilizați ng genera pentru a genera o nouă componentă, vor fi generate patru fișiere similare cu cele de mai sus. The app.component.ts fișierul conține componentă rădăcină, care conectează diferitele aspecte ale componentei (cum ar fi șablonul și stilul).

Explorarea fișierului app.component.ts

import { Component } din '@angular/core';
@component({
selector: „app-root”,
templateUrl: „./app.component.html”,
styleUrls: ['./app.component.css']
})
clasa de export AppComponent {
titlu = „aplicația mea”;
}

The app.component.ts fișierul folosește instrucțiunea de import JavaScript pentru a importa „Componenta” din nucleul lui Angular. Apoi @Component decoratorul identifică clasa ca o componentă. The @Component decorator conține un obiect compus dintr-un selector, A templateUrl, și a styleUrls matrice.

The selector spune unghiular pentru a insera o instanță a componentei aplicației în orice șablon HTML care are o etichetă corespunzătoare selector (asa ca etichetă). Și dacă aruncați o privire înapoi la codul din index.html fișierul de mai sus veți găsi etichetă.

Fișierul principal al componentei aplicației se leagă și la fișierul șablon, folosind templateUrl proprietate. Acesta este app.component.html fișier, care subliniază modul în care o anumită componentă ar trebui să fie redată într-o aplicație Angular.

Proprietatea finală a obiectului este styleUrls. Această proprietate face referire la o serie de foi de stil, ceea ce înseamnă că le puteți aplica mai multe foi de stil o singură componentă (deci puteți adăuga foaia de stil globală din folderul src la matricea styleUrls ca bine).

Înțelegerea șabloanelor unghiulare

The app.component.html fișierul este un exemplu de șablon Angular. Acest fișier este un fișier HTML, precum și un fișier component (componenta aplicației). Prin urmare, fiecare componentă trebuie să aibă un șablon HTML, pur și simplu pentru că prezintă modul în care o componentă este redată în DOM.

Ce urmeaza?

Înțelegerea DOM-ului este următoarea ta cea mai bună mișcare. Asumarea platformei și cadrului Angular este, fără îndoială, o provocare. Cu toate acestea, este posibil și, având în vedere că Angular își redă componentele în DOM, învățarea despre DOM - pe măsură ce încercați să stăpâniți Angular - este o altă mișcare grozavă.

Eroul ascuns al site-urilor web: înțelegerea DOM

Învățați design web și aveți nevoie să aflați mai multe despre Modelul obiect document? Iată ce trebuie să știți despre DOM.

Citiți în continuare

Despre autor