Angular Material 7 – 环境设置

Angular Material 7 – 环境设置

本教程将指导您如何准备开发环境,以开始使用Angular Framework和Angular Material进行工作。在本章中,我们将讨论Angular 6所需的环境设置。要安装Angular 6,我们需要以下内容-

  • Nodejs
  • Npm
  • Angular CLI
  • IDE书写代码

Nodejs必须大于8.11,npm必须大于5.6。

Nodejs

要检查nodejs是否在您的系统上安装,请在终端中输入 node -v 。这将帮助您查看当前安装在系统上的nodejs版本。

C:\>node -v
v8.11.3

如果不打印任何内容,请在您的系统上安装nodejs。要安装nodejs,请访问nodejs的主页: https://nodejs.org/en/download/ 并根据您的操作系统安装包。

nodejs的主页将如下所示:

Angular Material 7 - 环境设置

根据您的操作系统安装所需的软件包。一旦安装了nodejs,npm也会随之安装。要检查是否安装了npm,可以在终端中输入npm -v。它应该显示npm的版本。

C:\>npm -v
5.6.0

使用angular CLI安装Angular 6非常简单。请访问angular的主页以获取命令参考: https://cli.angular.io/

Angular Material 7 - 环境设置

输入 npm install -g @angular/cli 即可在系统上安装angular cli。

Angular Material 7 - 环境设置

一旦安装了Angular CLI,您就可以使用自己喜欢的IDE,例如WebStorm、Atom、Visual Studio Code等。

安装Angular Material

运行以下命令在创建的项目中安装Angular Material模块及其相关组件。

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

+ @angular/animations@6.1.10
+ @angular/cdk@7.0.3
+ @angular/material@7.0.3
+ hammerjs@2.0.8
39.699s内添加了4个包并更新了1个包

在app.module.ts文件中添加以下条目

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

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

在styles.css文件中添加以下条目以获得主题。

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

在index.htm文件中添加以下条目以获得材料图标支持。

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程