Últimamente muchos desarrolladores web han migrado hacia el uso de Angular. Esto se debe a que el desarrollo de aplicaciones web, sobre todo las que se tratan de una sola página, han requerido una forma eficaz para desarrollarse y probarse de forma más fácil. Este es uno de los objetivos de Angular.
Angular: proyecto activo para aplicaciones web
Angular surge de la necesidad de establecer patrones de diseño estándares para facilitar el desarrollo web. Esto significa que con Angular se pueden realizar proyectos que contienen una arquitectura separada tanto para la lógica como para la vista.
Lo anterior significa que puede utilizar un Modelo Vista Controlador (MVC) otro patrón de diseño, haciendo que la aplicación seas fácil de probar.
El proyecto Angular nació en el 2016 a través de un desarrollo open source de Google. Su última versión es la 10.0.8, utilizando el lenguaje de programación TypeScript, un super conjunto de Javascript, para desarrollar cualquier tipo de aplicación dentro de una sola página. Es multiplataforma y tiene licencia MIT.
Características de Angular
Angular es un framework para desarrollo de aplicaciones mejoradas. Su objetivo es generar aplicaciones multiplataforma, en donde se puedan utilizar tanto para dispositivos móviles como para web. Algunas de sus características principales son las siguientes:
- Velocidad y rendimiento: un desarrollo con Angular se realiza a través de plantillas HTML, permitiendo una aceleración del proceso de desarrollo, al mismo tiempo de realizar una aplicación escalable. Además todo el código se carga desde la apertura del aplicación, reduciendo significativamente el tiempo de carga de aplicación.
- Estructura de directorios estándar: Angular proporciona una plataforma que contiene una estructura directorios Y dependencias fácilmente organizadas. Esto facilita la ejecución de una interfaz de línea de comandos CLI para ejecutar pruebas y probar la aplicación.
- Comunidad de desarrolladores en aumento: El proyecto Angular ha tenido gran aceptación en la comunidad de programadores a nivel mundial, permitiendo que en la actualidad existan varias comunidades de desarrolladores Angular, en donde es fácil documentarse y compartir contenidos útiles para los desarrolladores.
Guía Rápida de Angular
Para entender cómo funciona Angular, es muy importante indicar al usuario que al ser un framework, contiene muchas funcionalidades por defecto para poder realizar funcionalidades propias de nuestra aplicación.
Para desarrollar una aplicación en Angular requerimos una plantilla HTML, sus componentes, los servicios que contienen la lógica para nuestra aplicación y los módulos que contienen tales servicios.
Instalación de Angular CLI
La interfaz de comandos para Angular (CLI) permite ejecutar comandos de Angular en forma interactiva. Los pasos para instalar el CLI es my fácil hacerlo desde node.js.
Los comandos para la instalación son los siguientes:
npm istall -g @angular/cli ng new mi-app cd mi-app ng serve
Con el úlimo comando, podemos probar en forma sencilla nuestra aplicación que estamos desarrollado.
Importación de módulos y componentes en TypeScript
Para importar módulos y componentes en Typescript, utilizamos la palabra reservada import para indicar el nombre del componente, y from, el nombre de la libería en Angular, por ejemplo:
import { NgModule } from '@angular/core';
En donde estamos indicando la importación del componente “NgModule” desde la librería “@angular/core“.
Módulos en Angular
Los módulos en Angular contienen todos los servicios y componentes necesarios para la aplicación. Para definirlos utilizamos una clase en el lenguaje TypeScript. En donde el fichero original para crear un módulo se llama app.module.ts, ubicado en src/app/app.module.ts
A continuación se muestra la definición del módulo NgModule en Angular:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
providers: [ Logger ],
exports: [ AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule {}
Analizando la metadata del archivo, las partes de la definición del módulo en Angular significan lo siguiente:
- declarations: Arreglo de componentes y directivas del módulo NgModule.
- imports: Arreglo de módulos, cuyas clases exportadas son requeridas por la plantilla de componentes del módulo NgModule.
- exports: Declaraciones que deben estar visibles en la plantilla de componentes de otros NgModules.
- providers: Creadores de servicios en donde el NgModule contibuye, accesibles desde cualquier lado en la aplicación.
- bootstrap: Vista principal o componente raíz, que aloja todas las demás vistas.
Creación de nuevo módulo
Para crear un nuevo módulo en Angular, utilizamos el siguiente comando en el CLI:
ng generate module mimod
Con ello se genera el nuevo módulo mimod. El módulo generado estará localizado en mimod/mimod.module.ts, dentro del cuál podrás colocar componentes tal y como te mostraremos en la siguientes dos secciones.
Componentes en Angular
Para utilizar un componente se realiza una inyección de dependencias del servicio, el cual se une como propiedad hacia la plantilla, la cual a su vez invoca el componente a través de un evento, la plantilla acepta directivas para manejar los componentes HTML.
Para ejemplificar cómo funciona este proceso mostramos el siguiente código en TypeScript como un ejemplo básico de uso de Angular, en donde ts es la extensión para archivos Typescript:
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'ab-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
title = 'Mi primera App en Angular';
constructor() {
console.log('Hola constructor');
}
ngOnInit() {
console.log('Iniciando componente...');
}
ngOnDestroy() {
console.log('Componente completado');
}
}
En el código anterior se muestra como definir un componente, con algunos métodos importados del core de Angular. El significado de las partes del componente es el siguiente:
- selector: ‘ab-root’ – Es una etiqueta que define una propiedad que se puede utilizar como un componente HTML, es decir <ab-root></ab-root>.
- templateUrl: ‘./app.component.html’ – Es la ubicación del componente HTML que queremos utilizar, en particular se encuentra localizado en la raíz.
- styleUrls: [‘./app.component.css’] – Es el arreglo de estilos que vamos a utilizar para nuestro componente en Angular.
La clase AppComponent implementa los métodos OnInit y OnDestroy del core de Angular. Recordemos que en la programación orientada a objetos es posible implementar varios métodos para la clase.
Una vez definido tu componente, lo puedes utilizar directamente en la plantilla (tu vista). Su importación en el archivo index.html podría tener lo siguiente:
<body> <ab-root></ab-root> </body>
Y por supuesto, el resto de contenido que requieras en tu HTML.
Creación de un componente
En la sección anterior te mostramos como utilizar un componente. Ahora, para generarlo es muy sencillo. Desde el CLI de Angular puedes hacerlo utilizando la siguiente sintaxis:
ng generate component mimod/header --export
Al ejecutar el comando anterior, se genera el archivo header.component.ts, en donde se permite la exportación del componente. El contenido del componente para éste ejemplo es el siguiente:
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'ab-header',
templateUrl: './header.component.html',
styles: []
})
export class HeaderComponent implements OnInit, OnDestroy {
constructor() {}
ngOnInit() {}
ngOnDestroy() {}
}
Formularios en Angular
Para agregar un formulario en fomra sencilla, podemos hacerlo de alguna de las siguientes plantillas:
- Formularios Reactivos: Son formularios con acceso explícito en el objeto modelo, son explícitos y robustos, es decir: reutilizables, escalables y testeables.
- Formularios Dirigidos a Plantilla: Crean y modifican el objeto modelo. Son más sencillos de implementar, pero no se escalan muy bien. Se utilizan en mejor forma en casos simples como formularios de registro o de login.
Formularios reactivos
A continuación mostramos un ejemplo de formulario reactivo, en donde podemos ver el selector y la plantilla (con formControl).
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms'; @Component({
selector: 'app-reactive-pais-residencia',
template: ` País de Residencia: <input type="text" [formControl]="paisResidenciaControl"> `
})
export class PaisResidenciaComponent {
paisResidenciaControl = new FormControl('');
}
Formularios dirigidos a plantilla
Éstos formularios tienen acceso directo a la plantilla, por lo tanto son muy fáciles de implementar, sin embargo, eso dificulta el acoplamiento y las pruebas.
import { Component } from '@angular/core';
@Component({
selector: 'app-template-pais-residencia',
template: `
Favorite Color: <input type="text" [(ngModel)]="paisResidencia">
})
export class PaisResidenciaComponent {
paisResidencia = '';
}
Documentación Oficial de Angular
Angular tiene muchas características, que es imposible en un solo artículo mostrar una guía completa de todas las opciones que nos ofrece, así como su lenguaje de programación TypeScript.
Para dominar el Framework y su lenguaje, es necesario realizar muchos ejemplos y ejercicios, así como consultar su documentación oficial para consultar todas las características del marco de trabajo.