开发学院

您的位置：首页>教程>正文

教程正文

Angular Material 7 安装

  本教程将指导您如何准备一个开发环境来开始使用Angular框架和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的主页将如下所示：

nodejs_homepage.jpg

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

C:\>npm -v
5.6.0

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

angular_cli.jpg

  输入npm install -g @angular/cli安装Augular.

install_angular_cli.jpg

  一旦安装了Angular CLI，您将在您的终端中获得上述安装。您可以使用自己选择的任何集成开发环境，如 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
Add the following entry in app.module.ts file

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文件中添加以下条目以获得 material 图标支持。

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


捐赠

友情链接