Primeros pasos con Angular 7, usando Angular Material y Angular CLI

6 min readJan 3, 2019

source — https://www.pexels.com/photo/glass-ceiling-1487154/

Originalmente escrito en Ingles aquí: https://medium.com/@ismapro/first-steps-with-angular-7-with-angular-cli-and-angular-material-d69f55d8ac51

Han ocurrido varios cambios desde que salio la versión 2.0, ahora se cuentan con más librerías y herramientas que facilitan la creación de aplicaciones. En esta guía iré explicando el paso a paso de como construir una aplicación de Angular usando Angular CLI (herramienta de línea de comandos), y Angular Material.

Si te encuentras en una versión anterior de Angular, te recomiendo que visites: https://update.angular.io/ donde puedes ver los pasos para actualizarte a la última versión. (o entre versiones intermedias, como de la 2 a la 6).

Requerimientos

NodeJs (v8 o superior)

Preparando el ambiente

Para desarrollar en Angular se usa casi de manera exclusiva angular-cli, y todo comienza instalándola de manera global:

npm install @angular/cli -g

Una vez instalada puedes verificar que todo se encuentra funcionando correctamente con el comando:

ng --version

Y veras una imagen similar a esta:

Si no se muestran errores y el arte de ASCII se muestra, entonces todo se encuentra correctamente, ahora vamos a crear la aplicación, para ello ejecutamos el comando “ng new” y el nombre de la misma:

ng new angular-first-steps

Te preguntara si deseas agregar el “routing” (enrutamiento por URL), escribe “No” o simplemente la letra “n”, esto lo hacemos para mantener la aplicación un poco más simple. Luego te pregunta por el formato de las hojas de estilo “stylesheet”, puedes usar las teclas de dirección para moverte en el menú, selecciona “SCSS”, por que lo necesitaremos para los temas luego.

Puedes saltarte todo el proceso por medio del siguiente comando, en el que se especifican por medio de banderas la configuración de la aplicación.

ng new angular-first-steps --routing=false --style=scss

Si quieres conocer mas detalles sobre el como usar la línea de comandos de angular (Angular CLI) puedes ir a este enlace: https://github.com/angular/angular-cli/wiki/new

La línea de comandos de angular se hace cargo de la instalación y configuración de todas las dependencias que son necesarias.

Una vez termine el proceso puedes ingresar al directorio que fue creado.

cd angular-first-steps

Y puedes iniciar la aplicación con el siguiente comando:

ng serve

Entonces tu aplicación va a mostrar el proceso de compilación de los archivos, con sus nombres y tamaños, debe lucir de manera similar a la siguiente imagen:

Ahora puedes ir a tu navegador y dirigirte a la siguiente URL:

http://localhost:4200

Y la página debe lucir de manera similar a lo siguiente:

Agregando Angular Material

Excelente ahora que sabemos que la aplicación inicia correctamente puedes parar la ejecución presionando “Ctrl+c”, ahora podemos agregar Angular Material por medio de los “schematics”.

ng add @angular/material

Y asegurate de responder las preguntas de la siguiente manera:

La primera pregunta es si deseas usar alguno de los temas predeterminados, en nuestro caso es personalizado entonces seleccionamos “Custom”.

La segunda es si deseamos agregar HammerJS para reconocer gestos, usualmente de aplicaciones móviles, en nuestro caso así es, entonces colocamos “yes”.

Y finalmente si deseamos usar las animaciones incluidas en Angular Material, igualmente los necesitamos entonces “yes”.

Si quieres conocer mas sobre el proceso de instalación puedes dirigirte a: https://material.angular.io/guide/getting-started

Ahora puedes abrir tu editor de texto favorito en el directorio de la aplicación, particularmente recomiendo “Visual Studio Code” pues incluye un gran soporte para “TypeScript”, para abrirlo desde la línea de comandos puedes usar:

code .

Una vez abierto, abre el archivo “src/styles.scss”

Aquí puedes ver la configuración de cada una de las partes del tema, y vas a tener cada uno de los comentarios línea a línea que te permitiran entenderlo aún mejor.

Puedes ver el código del archivo aquí: https://github.com/ismaproco/angular-first-steps/blob/master/src/styles.scss

Si quieres profundizar en los temas y paletas de colores revisa el siguiente enlace.

The color system

The Material Design color system can be used to create a color theme that reflects your brand or style. Color usage and…

material.io

Agregando los componentes de Angular Material

En tu editor ahora abre el archivo “src/app/app.module.ts”, e importa los siguientes módulos:

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { FormsModule } from '@angular/forms';

Y luego agrégalos al arreglo de “imports”:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,    
    MatInputModule, 
    MatButtonModule,
    MatSelectModule,
    MatIconModule
  ],

Cada componente en angular material tiene su propio módulo de manera que puedes importar únicamente los que necesites, puedes revisar la documentación directamente para conocer los nombres de los módulos de cada uno de los componentes, y usualmente se encuentran en la parte superior la página de especificación .

El siguiente paso es el de agregar algunos componentes, para ello abre “src/app/app.component.html” y remplaza el contenido con lo siguiente.

Cada uno de los componentes tiene propiedades especificas, algunas de ellas son:

input (campo de entrada), necesita estar dentro del tag “mat-form-field”, el [(ngModel)] es para que funcione actualizando la variable “title” asociada de ida y vuelta (two way binding), que se encuentra presente en “h1”.
mat-icon (icono), este te permite asignar un icono por medio de una entrada de texto directamente en el tag, puedes encontrar la lista de los iconos disponibles en: https://material.io/icons/
raised button(botón sobrepuesto): Un botón convencional con un efecto de sombra.
mat-select(lista desplegable): carga una lista de elementos y crea las opciones para ellos, la lista se encuentra declarada en la clase.

Dirigite ahora a la clase asociada con el archivo html, usualmente tiene el mismo nombre solo que termina en “.ts” y asegurate de que las variables title, selectedValue, e items, se encuentran definidas como en el siguiente ejemplo:

Si quieres usar más componentes con sus respectivos ejemplos de código, puedes dirigirte a la siguiente página: https://material.angular.io/components

Ejecutando la aplicacion

Ahora que ya tienes angular y angular material, es momento de que veas los componentes funcionando, para ello solo ejecuta:

ng serve

o puedes usar la bandera para que se abra tu explorador por defecto:

ng serve --open

Felicitaciones!!! Has creado una aplicación de Angular con algunos componentes de Angular Material, y con un tema personalizado. Pero como te podrás imaginar la librería incluye muchos mas componentes que los mostrados aquí y cada uno cuenta con su propia configuración y propiedades, pero al mismo tiempo te ayudarán a crear aplicaciones de manera mucho más rapida.

ya solo queda recomendarlos siguientes enlaces para profundizar en cada uno de los temas.

En el siguiente repositorio puedes encontrar todo el código de la aplicación.
https://github.com/ismaproco/angular-first-steps

Web personal http://isma.xyz