Angular 9: Inicio rápido con angular-cli y Angular Material

Angular es un framework de desarrollo para JavaScript creado por Google para crear single page application (SPA), o aplicaciones de una sola página. Es uno de los frameworks más populares para desarrollar aplicaciones modernas y escalables en el lado del cliente.

En este artículo veremos como crear rápidamente una aplicación Angular 9 utilizando Angular CLI (Command Line Interface) y Angular Material un módulo que nos permite trabajar con componentes de interfaz de usuario completos y modernos que funcionan en la web, el móvil y en escritorio basados en Material Design, un conjunto de especificaciones definidas por Google para mantener una estructura coherente y atractiva en la web y aplicaciones móviles.

Las ultimas versiones de Angular han mejorado el funcionamiento general del framework y nos permite utilizar TypeScript para definir nuestras clases, propiedades y métodos, generando un código mucho más limpio.

En este post crearemos una aplicación utilizando la ultima versión de Angular (desde cero ) para mostrar logros o historias, crearemos nuestro propio componente, mostraremos datos de variables , listaremos arreglos y utilizaremos angular material para mejorar la interfaz de usuario.

Requisitos

Para comenzar, asegúrese de tener instalado NodeJS (v12.x +) y NPM (v6.x +) en su máquina.

1. Preparando el ambiente

Primero instalemos Angular-Cli, ejecutamos:

npm install -g @angular/cli

Esto instalará globalmente la herramienta angular-cli.

Si todo salió bien, el comando “ng — version” nos mostrara las versiones instaladas:

ng --version

2. Crear el proyecto

Ahora podemos crear un proyecto angular utilizando el comando “ng new”, en este caso, nombraremos el proyecto “my-proyecto-angular”.

ng new my-proyecto-angular

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 my-proyecto-angular --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.

Ahora vamos al directorio en el que creamos el proyecto:

cd my-proyecto-angular

3. Instalamos las bibliotecas de Angular material

Estas son las bibliotecas adicionales que necesitaremos más adelante para ejecutar el componente de Angular material.

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”.

Y 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 .

4. EJecutar la aplicación

Para ver la aplicación en el navegador ejecutamos:

ng serve --o

Usando la opción — open (o simplemente -o) nos abrirá automáticamente la aplicación en el navegador en “http: // localhost: 4200 /”

Deberíamos ver algo como esto:

5. Nuestro primer componente

Ahora crearemos nuestro propio componente con la interfaz de linea de comando de angular:

ng g component Home

Una vez que el generador finaliza las modificaciones en el directorio src dentro de app vamos a tener una nueva carpeta que hace referencia nuestro nuevo componente.

6. Agregar un componente dentro de otro

En este paso lo que haremos es agregar el componente recién creado home.component.html al template app.component.html. Para esto simplemente borramos lo que hay en el archivo app.component.html y agregamos el selector app-home de la siguiente manera:

<h1>
 {{title}}
</h1>
<app-home></app-home>

Bajo el título de nuestra aplicación debería aparecer lo que esta dentro de nuestro componente.

7. Agregar datos en el componente

En nuestra aplicación mostraremos una lista de historias dentro de nuestro componente. Comenzaremos por editar nuestro home.component.ts:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
 logros : ILogro[];
 titulo  : string = 'Bienvenidos'; constructor() { } 
ngOnInit() {
  this.logros = this.getLogros();
} 
getLogros() : ILogro[]{
  return [{
   id:1,
   title:"Logré algo muy interesante",
   description:"Lorem ipsum dolor sit amet"
  }, {
   id:2,
   title:"Logré otra cosa muy interesante",
   description:"Lorem ipsum dolor sit amet"
  }, {
   id:3,
   title:"Logré algo aún mas interesante",
   description:"Lorem ipsum dolor sit amet"
  }
 ] }
}
interface ILogro{
  id : number;
  title : string;
  description ?: string;
}

Lo primero que haremos es definir una interface “ILogro” (Una interfaz solo define una estructura), con los campos id de tipo number, title de tipo string y descripcion de tipo string, donde el valor “?” indica que el campo puede ser opcional.

También definimos una variable titulo de tipo string que inizializamos en “Bienvenidos”.

Luego definimos un arreglo de elementos que cumplan la interfaz logros.

Delegamos la generación de los logros a un método que llamamos “getLogros” y que precisamente devuelve un arreglo con objetos del tipo “ILogro”.

Finalmente en el método ngOnInit() asignamos este arreglo a nuestra variable logros.

8. Mostrar datos en nuestro componente

Una vez tengamos los datos en el home.component.ts editaremos ahora nuestro home.component.html para mostrar lo siguiente:

{{titulo}}
<ul>
  <li *ngFor="let logro of logros">
    {{logro.title}}
  </li>
</ul>

Cada vez que queremos imprimir un dato que viene desde nuestro componente colocamos el nombre de la variable entre dos llaves {{title}} y lo que este dentro se evalúa como código de javascript y se imprime el valor de la variable. (Esta es la impresión básica de datos).

Para mostrar nuestro arreglo de logros utilizamos la directiva *ngFor, dentro de una lista que nos ayuda a repetir la etiqueta <li> por cada elemento del arreglo, donde va a ver disponible una variable disponible “logro” la cual será equivalente a cada uno de los elementos que hay dentro del arreglo.

9. Utilizando Angular Material

Una vez integrado angular material en nuestro proyecto, podemos comenzar a utilizar sus componentes. En este caso utilizamos un toolbar para mostrar el titulo principal de nuestra aplicación con el color “primary” y todo el contenido de nuestra app lo colocamos dentro de una tarjeta mat-card.

Modificaremos el archivo app.component.html:

<mat-toolbar color="primary">
  <span>{{title}}</span>
</mat-toolbar><mat-card>
  <app-home></app-home>
</mat-card>

Por cada componente que utilicemos debemos importar la dependencia y agregar a los imports en el app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
MatToolbarModule,
MatCardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Para que la tarjeta no ocupe todo el ancho de la pantalla modificaremos el archivo app.component.scss:

mat-card{
  max-width: 960px;
  margin: 0 auto;
}

El resultado final sera el siguiente:

Para descargar o clonar el código fuente de este proyecto:

CLICK SOBRE LA IMAGEN PARA VER EL CÓDIGO

Recuerda que luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y ejecutar:

npm install

para descargar todas las dependencias del proyecto. Y luego:

ng serve --open

Te ha gustado el Post? o crees que hay algo pueda mejorar? no dudes en dejarlo en los comentarios!. Puedes estar en contacto conmigo en mis cuentas de Twitter, facebook y LinkedIn.☺

¡Compártelo!

Siéntete libre de compartir 😄 Y recuerda que puedes aplaudir más de una vez!