Angular Material 7 环境设置

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

• Nodejs
• Npm
• 角 CLI
• 用于编写代码的 IDE

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

Nodejs

要检查你的系统上是否安装了 nodejs，请键入 node -v 在终端。这将帮助你查看系统上当前安装的 nodejs 版本。

C:\>node -v
v8.11.3

如果它不打印任何内容，请在你的系统上安装 nodejs。要安装 nodejs，请转到主页 https://nodejs.org/en/download/ nodejs 并根据你的操作系统安装软件包。

nodejs的首页会是这样的：

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

C:\>npm -v
5.6.0

在 Angular CLI 的帮助下，Angular 6 的安装非常简单。访问主页 https://cli.angular.io/ 角度来获取命令的参考。

Type npm install -g @angular/cli , 在你的系统上安装 angular cli。

安装 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
added 4 packages and updated 1 package in 39.699s

在 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">