Material angular 7 – Configuración del entorno

Material angular 7 – Configuración del entorno

Este tutorial le guiará sobre cómo preparar un entorno de desarrollo para comenzar su trabajo con el Marco Angular y el Material Angular. En este capítulo, discutiremos la configuración del entorno requerida para Angular 6. Para instalar Angular 6, necesitamos lo siguiente –

  • Nodejs
  • Npm
  • CLI angular
  • IDE para escribir su código

Nodejs tiene que ser mayor de 8.11 y npm tiene que ser mayor de 5.6.

Nodejs

Para comprobar si nodejs está instalado en su sistema, escriba nodo -v en el terminal. Esto le ayudará a ver la versión de nodejs actualmente instalada en su sistema.

C:>node -v
v8.11.3

Si no imprime nada, instale nodejs en su sistema. Para instalar nodejs, vaya a la página principal https://nodejs.org/en/download/ de nodejs e instale el paquete basado en su sistema operativo.

La página de inicio de nodejs tendrá el siguiente aspecto –

Basado en su sistema operativo, instale el paquete requerido. Una vez instalado nodejs, npm también se instalará junto con él. Para comprobar si npm está instalado o no, escriba npm -v en el terminal. Debería mostrar la versión del npm.

C:>npm -v
5.6.0

Las instalaciones de Angular 6 son muy sencillas con la ayuda de CLI angular. Visite la página de inicio https://cli.angular.io/ de angular para obtener la referencia del comando.

Escriba npm install -g @angular/cli , para instalar angular cli en su sistema.

Obtendrá la instalación anterior en su terminal, una vez que se haya instalado Angular CLI. Puede utilizar cualquier IDE de su elección, es decir, WebStorm, Atom, Visual Studio Code, etc.

Instalar material angular

Ejecute el siguiente comando para instalar el módulo de Material Angular y sus componentes relacionados en el proyecto creado.

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

Añada la siguiente entrada en el archivo app.module.ts

import{BrowserAnimationsModule}from$0027@angular/platform-browser/animations$0027; import{FormsModule,ReactiveFormsModule}from$0027@angular/forms$0027;
importaciones:[...FormsModule,ReactiveFormsModule,BrowserAnimationsModule],

Añada la siguiente entrada en el archivo styles.css para obtener un tema.

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

Añada la siguiente entrada en el archivo index.htm para obtener soporte para iconos de material.

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