Angular è una piattaforma e un framework di sviluppo TypeScript utilizzati per creare applicazioni a pagina singola.

Angular ha una storia complessa. Gli sviluppatori hanno utilizzato JavaScript per creare la prima versione di questo framework (AngularJS). Gli sviluppatori di Angular hanno successivamente utilizzato TypeScript per creare tutte le versioni successive di Angular (a causa del numero di bug nella prima versione).

A partire dal 2021, l'ultima versione di Angular è la 12.0. In questo articolo imparerai tutto ciò che devi sapere su Angularframework.

Che cos'è angolare?

Molte persone descrivono Angular come un framework e, sebbene questa definizione non sia errata, Angular non è solo un framework. Angular è anche una piattaforma di sviluppo. Ciò significa che ha un sistema hardware e software che esegue applicazioni Angular.

Sebbene sia basato su TypeScript, puoi scrivere la maggior parte del codice della piattaforma in JavaScript. Come la maggior parte dei framework, Angular è basato su componenti. Ciò significa che ogni sezione di un'interfaccia utente Angular viene trattata come un'entità indipendente, il che porta alla creazione di codice riutilizzabile e applicazioni scalabili.

Per utilizzare Angular, devi avere familiarità con HTML, CSS e JavaScript (sapere che TypeScript è una risorsa, ma non un requisito). Angular è spesso paragonato a VueJS e ReactJS, e una delle principali lamentele è che Angular ha una curva di apprendimento più ripida.

Imparentato: Che cos'è ReactJS e per cosa può essere utilizzato?

Questa non è una sorpresa, poiché Angular (essendo una piattaforma di sviluppo), ha un numero maggiore di strutture principali con cui familiarizzare. Queste strutture includono:

• Moduli
• Componenti
• Modelli

E comprendere queste funzionalità di base ti assicurerà di essere sulla buona strada per diventare uno sviluppatore Angular.

Esplorazione dei file angolari

L'applicazione Angular genera molti file all'interno della tua nuova cartella di progetto (come puoi vedere nell'immagine qui sotto). Controlla il sito Web ufficiale di Angular per istruzioni su come installare Angular sul tuo computer.

Uno dei file più importanti all'interno della cartella principale del progetto è il pacchetto.json file. Questo file ti dice il nome del tuo progetto, come iniziare il tuo progetto (ng servire), come costruire il tuo progetto (ng build), e come testare il progetto (ng test) tra l'altro.

La cartella del progetto principale contiene anche due cartelle:node_modules e src. Il src la cartella è dove farai tutto il tuo sviluppo; contiene diversi file e cartelle.

La cartella src

Il stili.css file è dove metterai tutte le tue preferenze di stile globali e il index.html file è la singola pagina che viene visualizzata nel tuo browser.

Esplorazione del file index.html

L'unica cosa che vorresti cambiare nel index.html file sopra è il titolo della domanda. Il tag nel corpo del file HTML sopra i collegamenti al app.component.ts file, che si trova all'interno della cartella dell'app (come puoi vedere nell'immagine qui sotto).

Esplorazione del file app.component.ts

import {Component } from '@angular/core';
@Componente({
selettore: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
classe di esportazione AppComponent {
title = 'mia-app';
}

Il app.component.ts il file usa il root dell'app selettore, che si trova nel index.html file sopra. Usa il app.component.html file come modello e il app.component.css file per lo stile.

Il app.component.css il file è vuoto quando viene generato perché tutte le preferenze di stile, insieme al layout HTML, sono all'interno del app.component.html file.

Esecuzione dell'applicazione Angular con il ng serve --open comando visualizzerà quanto segue nel tuo browser:

Per cambiare ciò che viene visualizzato nel tuo browser, dovrai modificare il app.component.html file.

Sostituendo il contenuto di questo file con il seguente codice:

Ciao mondo

Produrrà il seguente output nel tuo browser:

Comprensione dei moduli angolari

Ogni Angolare l'applicazione è costruita su un sistema di moduli di base, noto come NgModuli. Ogni applicazione ne contiene almeno uno NgModulo. Angolare genera due moduli dal ng nuovo comando (app-routing.module.ts e app.module.ts).

Il app.module.ts Il file contiene il modulo radice, che deve essere presente per l'esecuzione dell'applicazione.

Esplorazione del file app.module.ts

import { NgModule } da '@angular/core';
import { BrowserModule } da '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
dichiarazioni: [
Componente dell'app
],
importazioni: [
Modulo Browser,
AppRoutingModulo
],
fornitori: [],
bootstrap: [AppComponent]
})
esporta la classe AppModule { }

Il file sopra usa JavaScript importare dichiarazione per importare il NgModulo, il Modulo Browser, il Componente dell'app, e il AppRoutingModulo (che è il secondo NgModule nel progetto).

Il @NgModule decoratore viene dopo le importazioni. Indica che il app.module.ts il file è davvero un NgModulo. Il @NgModule decorator quindi configura diversi array: the dichiarazioni, il importazioni, il fornitori, e il bootstrap.

Il dichiarazioni array memorizza i componenti, le direttive e le pipe che appartengono a uno specifico NgModulo. Tuttavia, nel caso di un modulo root solo il Componente dell'app è memorizzato nel dichiarazione array (come puoi vedere nel codice sopra).

Il importazioni array importa l'altro NgModuli che stai utilizzando nell'applicazione. Il importazioni array nel codice sopra importa il Modulo Browser (che gli consente di utilizzare servizi specifici del browser, come il rendering DOM), e il AppRoutingModulo (che consente all'applicazione di utilizzare il Angolare router).

Imparentato: L'eroe nascosto dei siti web: Capire il DOM

Il fornitori l'array dovrebbe contenere servizi che componenti in altri NgModuli poter usare.

Il bootstrap array è molto importante perché contiene il componente di ingresso che Angular crea e inserisce nel index.html file nella cartella principale del progetto. Ogni applicazione Angular si avvia dal bootstrap array nella radice NgModulo di bootstrap il NgModulo (che prevede un processo che inserisce ogni componente nel bootstrap array nel DOM del browser).

Comprensione dei componenti angolari

Ogni componente Angular viene generato con quattro file specifici. Se dai un'occhiata all'immagine della cartella dell'app sopra, vedrai i seguenti file:

• app.component.css (un file CSS)
• app.component.html (un file modello)
• app.component.spec.ts (un file di specifiche di test)
• app.component.ts (un file componente)

Tutti i file sopra sono associati allo stesso componente. Se usi il ng generare comando per generare un nuovo componente, verranno generati quattro file simili a quelli sopra. Il app.component.ts il file contiene il componente radice, che collega i diversi aspetti del componente (come il modello e lo stile).

Esplorazione del file app.component.ts

import { Component } from '@angular/core';
@Componente({
selettore: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
classe di esportazione AppComponent {
title = 'mia-app';
}

Il app.component.ts file utilizza l'istruzione di importazione JavaScript per importare "Componente" dal core di Angular. Poi il @Componente decorator identifica la classe come componente. Il @Componente decoratore contiene un oggetto composto da a selettore, un templateUrl, e a stileUrls Vettore.

Il selettore racconta Angolare per inserire un'istanza del componente app in qualsiasi modello HTML che ha un tag corrispondente al selettore (così il etichetta). E se dai un'occhiata al codice nel index.html file sopra troverai il etichetta.

Il file del componente principale dell'app si collega anche al file del modello, utilizzando il pulsante templateUrl proprietà. Questo è il app.component.html file, che delinea come dovrebbe essere reso un componente specifico in un'applicazione Angular.

La proprietà finale nell'oggetto è il stileUrls. Questa proprietà fa riferimento a un array di fogli di stile, il che significa che puoi applicare più fogli di stile a un singolo componente (così puoi aggiungere il foglio di stile globale nella cartella src all'array styleUrls come bene).

Comprensione dei modelli angolari

Il app.component.html file è un esempio di un modello angolare. Questo file è un file HTML e un file componente (il componente dell'app). Pertanto, ogni componente deve avere un modello HTML, semplicemente perché delinea il modo in cui un componente viene visualizzato nel DOM.

Qual è il prossimo?

Comprendere il DOM è la tua prossima mossa migliore. Affrontare la piattaforma e il framework Angular è senza dubbio una sfida. Tuttavia, è possibile, e dato che Angular esegue il rendering dei suoi componenti nel DOM, conoscere il DOM, mentre provi a padroneggiareAngular, è un'altra grande mossa.

L'eroe nascosto dei siti web: Capire il DOM

Stai imparando il web design e hai bisogno di saperne di più sul Document Object Model? Ecco cosa devi sapere sul DOM.

Leggi Avanti

Circa l'autore