Materiale angolare 7 - Configurazione dell'ambiente

Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare il tuo lavoro con Angular Framework e Angular Material. In questo capitolo, discuteremo la configurazione dell'ambiente richiesta per Angular 6. Per installare Angular 6, abbiamo bisogno di quanto segue:

Nodejs
Npm
CLI angolare
IDE per scrivere il tuo codice

Nodejs deve essere maggiore di 8.11 e npm deve essere maggiore di 5.6.

Nodejs

Per verificare se nodejs è installato sul tuo sistema, digita node -vnel terminale. Questo ti aiuterà a vedere la versione di nodejs attualmente installata sul tuo sistema.

C:\>node -v
v8.11.3

Se non stampa nulla, installa nodejs sul tuo sistema. Per installare nodejs, vai alla homepagehttps://nodejs.org/en/download/ di nodejs e installa il pacchetto in base al tuo sistema operativo.

La homepage di nodejs sarà simile alla seguente:

In base al tuo sistema operativo, installa il pacchetto richiesto. Una volta installato nodejs, anche npm verrà installato insieme ad esso. Per verificare se npm è installato o meno, digita npm -v nel terminale. Dovrebbe visualizzare la versione di npm.

C:\>npm -v
5.6.0

Le installazioni di Angular 6 sono molto semplici con l'aiuto di angular CLI. Visita la home pagehttps://cli.angular.io/ di angolare per ottenere il riferimento del comando.

genere npm install -g @angular/cli, per installare la cli angolare sul tuo sistema.

Otterrai l'installazione di cui sopra nel tuo terminale, una volta installato Angular CLI. Puoi utilizzare qualsiasi IDE di tua scelta, ad esempio WebStorm, Atom, Visual Studio Code, ecc.

Installa materiale angolare

Eseguire il comando seguente per installare il modulo Angular Material e i relativi componenti nel progetto creato.

materialApp>npm install --save @angular/material @angular/cdk @angular/animations hammerjs

+ @angular/[email protected]
+ @angular/[email protected]
+ @angular/[email protected]
+ [email protected]
added 4 packages and updated 1 package in 39.699s

Aggiungi la seguente voce nel file app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

imports: [
    ...
   FormsModule,
   ReactiveFormsModule,
   BrowserAnimationsModule
],

Aggiungi la seguente voce nel file styles.css per ottenere un tema.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Aggiungi la seguente voce nel file index.htm per ottenere un supporto per le icone dei materiali.

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">