Angular e le variabili environments

Lavori ad un progetto Angular e vorresti usare ambienti diversi senza dover cambiare sempre tutto?

In questo articolo vedremo a cosa servono e come usare le variabili di ambiente.

Quando crei un progetto Angular, vengono generati almeno due file nella folder src/environments:

  1. environment.ts
  2. environment.prod.ts.

export const environment = {
production: false
}

Questi due file sono generati perché si ipotizza di lavorare sempre “almeno” su due ambienti: sviluppo e produzione.

Alle volte, invece, dovrai lavorare su più ambienti quindi ti basterà creare nuovi files nella stessa folder come environment.xxx.ts dove xxx sarà il nuovo ambiente.

Questi file essenzialmente espongono un oggetto json dove potrai mappare tutto ciò che vuoi abbia valori diversi per ambienti diversi, come ad esempio degli url per chiamate a servizi o altro.

Ma come usiamo queste variabili nei nostri components Angular?

Ipotizziao di aver mappato un url da bindare un anchor tag.

Utilizzando app.component.ts prima di tutto importeremo l’oggetto environment dal file src/environments/environment.ts

import { environment } from ‘../environments/environment’;

Ora environment sarà visibile nel nostro app.component e potremo usarne il contenuto come segue

export class AppComponent {
public envVar= environment.production;
countructor (){
}
}

Il file senza l’ambiente nel nome è naturalmente quello di default. Questo verrà usato dalla nostra applicazione quando la eseguiremo con il comando npm start o con ng serve –open.

Quando invece andremo a buildare il nostro progetto con il comando ng build, potremo specificare quale ambiente stiamo compilando.

ng build –prod

Automaticamente il file giusto sarà preso in considerazione, minificato e, incluso nel progetto pronto per il deploy.

Angular Component

Sei agli inizi con Angular e non è ancora chiaro cosa sia un Component?

Perfetto, sei sull’articolo giusto per capire cosa è un Component, come crearlo e a cosa serve in una applicazione Angular!

Prima di iniziare a scrivere codice, capiamo cosa è un Component Angular:

Un Component Angular è sostanzialmente costituito da 3 parti:

  • Template che corrisponde alla view in HTML5
  • Class scritta in typescript con i suoi dati e metodi
  • Metadata informazioni che fanno capire ad Angular che si parla di un component e non una banale classe, per fare ciò si usa il Decorator
    @Component
    sopra la classe.

Partiamo dal progetto base, per crearlo puoi seguire questo articolo.

Andiamo a vedere come è formato il Component principale cioè app.component.ts:

Possiamo subito vedere la class AppComponent composta da una unica proprietà che è title con valore iniziale my-app.

A questa classe abbiamo alcuni Metadata all’interno del Decorator @Component questo fa capire ad Angular che non parliamo di una normale class ma bensì di un Component.

All’interno del Decorator abbiamo alcuni metadata:

  • selector: selettore dove il template sarà renderizzato (nell’index.html file troveremo <app-root></app-root>)
  • templateUrl: path del file html dove recuperare il template
  • styleUrls: array di path dove recuperare i fogli di stile

Ma vediamo come creare un nuovo component con la Angular CLI, semplicemente aprendo il terminale e spostandoci nella cartella dove vogliamo generarlo possiamo utilizzare il comando:

ng g c test

dove g sta per generate, c per component e test è semplicemente il nome che vogliamo dare al nostro nuovo Component.

La cartella test verrà creata dalla Angular CLI, con al suo interno quattro files:

  • test.component.html: il template (di default <p>test works!</p>)
  • test.component.scss: il foglio di stile
  • test.component.ts: il typescript con al suo interno la classe
  • test.component.spec.ts: lo spec che al momento non ci interessa e possiamo anche cancellarlo

Automaticamente anche il file app.module.ts è stato aggiornato includendo questo nuovo component nell’array Declaration.

Andremo quindi a modificare il template di app.component e cioè: app.component.html in modo da aggiungere il selettore del nostro test.component che sarà app-test

A questo punto spostandoci dal terminale nella root e lanciando l’applicazione con il comando:

ng serve –open

potremo verificare che il nuovo component è funzionante e correttamente visualizzato all’interno dell’applicazione!

Il primo progetto Angular

Vuoi iniziare a sviluppare in Angular e non sai da dove iniziare?

Sei nel posto giusto !

In questo articolo ti spiegherò come impostare il tuo primo progetto Angular!

Angular 2+ o semplicemente Angular è un Framework Javascript open source, sviluppato da Google, attualmente alla versione 7.

I requisiti per sviluppare in Angular sono installare node.js  versione 8.x o 10.x. e avere npm package manager.

Il primo passo per iniziare è installare globalmente la Angular CLI sul nostro pc, semplicemente eseguendo questo comando su terminale:

npm install -g @angular/cli

A questo punto siamo pronti per generare il nostro primo progetto, sempre da terminale spostiamoci sulla folder dove vogliamo creare il nostro workspace e poi eseguiamo il comando di creazione:

C:\>cd workspace
C:\workspace> ng new my-app

Verrà creato il progetto dentro workspace\my-app, la cui struttura è quella base. Durante la creazione due informazioni saranno richieste:

1. Se vogliamo usare il routing

2. Che tipo di CSS vogliamo usare (io solitamente uso Sass)

A questo punto possiamo spostarci nella folder my-app ed eseguire il comando serve per avviare il server fornito da Angular CLI per eseguire in locale la nostra applicazione:

C:\workspace> cd my-app
C:\workspace\my-app> ng serve –open

Ci si presenta quindi la nostra prima applicazione Angular!

A questo punto siamo pronti a personalizzare la nostra applicazione e nei prossimi articoli vi spiegherò come fare!