Matériau angulaire 7 - Configuration de l'environnement

Ce didacticiel vous expliquera comment préparer un environnement de développement pour commencer votre travail avec Angular Framework et Angular Material. Dans ce chapitre, nous aborderons la configuration de l'environnement requise pour Angular 6. Pour installer Angular 6, nous avons besoin des éléments suivants:

  • Nodejs
  • Npm
  • CLI angulaire
  • IDE pour écrire votre code

Nodejs doit être supérieur à 8,11 et npm doit être supérieur à 5,6.

Nodejs

Pour vérifier si nodejs est installé sur votre système, tapez node -vdans le terminal. Cela vous aidera à voir la version de nodejs actuellement installée sur votre système.

C:\>node -v
v8.11.3

S'il n'imprime rien, installez nodejs sur votre système. Pour installer nodejs, allez sur la page d'accueilhttps://nodejs.org/en/download/ de nodejs et installez le package en fonction de votre système d'exploitation.

La page d'accueil de nodejs ressemblera à ce qui suit -

En fonction de votre système d'exploitation, installez le package requis. Une fois nodejs installé, npm sera également installé avec lui. Pour vérifier si npm est installé ou non, tapez npm -v dans le terminal. Il devrait afficher la version du npm.

C:\>npm -v
5.6.0

Les installations angulaires 6 sont très simples à l'aide de la CLI angulaire. Visitez la page d'accueilhttps://cli.angular.io/ d'angle pour obtenir la référence de la commande.

Type npm install -g @angular/cli, pour installer angular cli sur votre système.

Vous obtiendrez l'installation ci-dessus dans votre terminal, une fois Angular CLI installé. Vous pouvez utiliser n'importe quel IDE de votre choix, c'est-à-dire WebStorm, Atom, Visual Studio Code, etc.

Installer un matériau angulaire

Exécutez la commande suivante pour installer le module Matériau angulaire et ses composants associés dans le projet créé.

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

Ajoutez l'entrée suivante dans le fichier app.module.ts

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

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

Ajoutez l'entrée suivante dans le fichier styles.css pour obtenir un thème.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Ajoutez l'entrée suivante dans le fichier index.htm pour obtenir une prise en charge des icônes matérielles.

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