Angular Material 7 - 环境设置

Angular Material 7环境设置 - 从简单和简单的步骤学习Angular Material 7，从基本到高级概念，包括概述，环境设置，自动完成，复选框，日期选择器，表单域，输入，单选按钮，选择，滑块，菜单，侧导航，工具栏，卡，分隔线，扩展面板，网格列表，列表，步进，选项卡，树，按钮，切换按钮，徽章，芯片，图标，进度微调，进度栏，涟漪，SnackBar，工具提示， Paginator，SortHeader，表

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

Nodejs
Npm
Angular CLI
用于编写代码的IDE

Nodejs必须大于8.11且npm必须大于5.6.

Nodejs

To检查系统上是否安装了nodejs，在终端中键入 node -v .这将帮助您查看系统上当前安装的nodejs的版本.

 C:\> node -v  v8 .11.3

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

nodejs的主页将如下所示;

NodeJS主页

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

 C:\> npm -v  5.6.0

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

Angular CLI

输入 npm install -g @ angular/cli ，在你的系统上安装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.8added 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文件中添加以下条目以获得材质图标支持.