Winkelmaterial 7 - Umgebung einrichten

In diesem Tutorial erfahren Sie, wie Sie eine Entwicklungsumgebung vorbereiten, um Ihre Arbeit mit Angular Framework und Angular Material zu beginnen. In diesem Kapitel werden wir das für Angular 6 erforderliche Umgebungs-Setup erläutern. Um Angular 6 zu installieren, benötigen wir Folgendes:

• Nodejs
• Npm
• Angular CLI
• IDE zum Schreiben Ihres Codes

Nodejs muss größer als 8,11 und npm größer als 5,6 sein.

Nodejs

Geben Sie ein, um zu überprüfen, ob nodejs auf Ihrem System installiert ist node -vim Terminal. Auf diese Weise können Sie die aktuell auf Ihrem System installierte Version von nodejs anzeigen.

C:\>node -v
v8.11.3

Wenn nichts gedruckt wird, installieren Sie nodejs auf Ihrem System. Um nodejs zu installieren, gehen Sie zur Homepagehttps://nodejs.org/en/download/ von nodejs und installieren Sie das Paket basierend auf Ihrem Betriebssystem.

Die Homepage von nodejs sieht folgendermaßen aus:

Installieren Sie basierend auf Ihrem Betriebssystem das erforderliche Paket. Sobald nodejs installiert ist, wird auch npm installiert. Um zu überprüfen, ob npm installiert ist oder nicht, geben Sie npm -v in das Terminal ein. Es sollte die Version des npm anzeigen.

C:\>npm -v
5.6.0

Angular 6-Installationen sind mit Hilfe von Angular CLI sehr einfach. Besuchen Sie die Homepagehttps://cli.angular.io/ von eckig, um die Referenz des Befehls zu erhalten.

Art npm install -g @angular/cli, um eckige cli auf Ihrem System zu installieren.

Sie erhalten die obige Installation in Ihrem Terminal, sobald Angular CLI installiert ist. Sie können eine beliebige IDE Ihrer Wahl verwenden, z. B. WebStorm, Atom, Visual Studio-Code usw.

Installieren Sie Winkelmaterial

Führen Sie den folgenden Befehl aus, um das Angular Material-Modul und die zugehörigen Komponenten in dem erstellten Projekt zu installieren.

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

Fügen Sie den folgenden Eintrag in die Datei app.module.ts ein

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

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

Fügen Sie den folgenden Eintrag in die Datei styles.css ein, um ein Thema zu erhalten.

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

Fügen Sie den folgenden Eintrag in die Datei index.htm ein, um Unterstützung für Materialsymbole zu erhalten.

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