Angular Material 7 - Configuração do Ambiente

Este tutorial irá guiá-lo sobre como preparar um ambiente de desenvolvimento para iniciar seu trabalho com Angular Framework e Angular Material. Neste capítulo, discutiremos a configuração do ambiente necessária para o Angular 6. Para instalar o Angular 6, precisamos do seguinte -

Nodejs
Npm
CLI Angular
IDE para escrever seu código

Nodejs deve ser maior que 8,11 e npm deve ser maior que 5,6.

Nodejs

Para verificar se nodejs está instalado em seu sistema, digite node -vno terminal. Isso o ajudará a ver a versão do nodejs atualmente instalado em seu sistema.

C:\>node -v
v8.11.3

Se não imprimir nada, instale nodejs em seu sistema. Para instalar o nodejs, vá a página inicialhttps://nodejs.org/en/download/ de nodejs e instale o pacote com base em seu sistema operacional.

A página inicial do nodejs será semelhante à seguinte -

Com base no seu sistema operacional, instale o pacote necessário. Assim que o nodejs for instalado, o npm também será instalado junto com ele. Para verificar se o npm está instalado ou não, digite npm -v no terminal. Ele deve exibir a versão do npm.

C:\>npm -v
5.6.0

As instalações do Angular 6 são muito simples com a ajuda do angular CLI. Visite a homepagehttps://cli.angular.io/ de angular para obter a referência do comando.

Tipo npm install -g @angular/cli, para instalar o angular cli em seu sistema.

Você obterá a instalação acima em seu terminal, assim que o Angular CLI for instalado. Você pode usar qualquer IDE de sua escolha, ou seja, WebStorm, Atom, Visual Studio Code, etc.

Instale o material angular

Execute o seguinte comando para instalar o módulo Angular Material e seus componentes relacionados no projeto criado.

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

Adicione a seguinte entrada no arquivo app.module.ts

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

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

Adicione a seguinte entrada no arquivo styles.css para obter um tema.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Adicione a seguinte entrada no arquivo index.htm para obter um suporte para ícones de materiais.

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

↰ Previous page Next page ↱