Spanish (Español) translation by Ruben Solis (you can also view the original English article)
Angular se ha vuelto muy popular en los últimos años. Puedes usar este framework JavaScript de código abierto para crear aplicaciones web y móviles. Si has estado pensando en aprender Angular pero no sabes por dónde empezar, seguir esta serie podría ser una buena idea.
El objetivo de esta serie es cubrir los conceptos básicos de Angular mientras se crea una aplicación muy simple que muestra información sobre diferentes países. Angular está escrito en TypeScript, por lo que tiene sentido que también escribas tu código en TypeScript.
No hay necesidad de preocuparse si nunca antes has usado TypeScript. En pocas palabras, TypeScript es solo JavaScript escrito con características adicionales. También he escrito una serie titulada TypeScript para principiantes en Envato Tuts+, donde primero puedes aprender los conceptos básicos de TypeScript.
Empezando
Si ya estás familiarizado con TypeScript, puedes continuar y comenzar a crear tu primera aplicación Angular.
El primer paso sería instalar Node.js. Puedes dirigirte al sitio web oficial y descargar la versión adecuada. El administrador de paquetes de node se instalará como parte de Node.js.
El siguiente paso es instalar TypeScript ejecutando el siguiente comando. Te recomiendo que instales una versión de TypeScript mayor a la 2.1.
1 |
npm install -g typescript |
Finalmente, debes instalar el Angular CLI ejecutando el siguiente comando. Instalar Angular CLI facilitará el proceso de creación de tu aplicación Angular.
1 |
npm install -g @angular/cli |
Ahora, ya puedes crear una nueva aplicación Angular ejecutando el siguiente comando dentro del terminal. Antes de ejecutar el comando, asegúrate de haberte movido al directorio donde deseas crear la aplicación.
1 |
ng new country-app |
La instalación de todas las dependencias para el proyecto lleva algo de tiempo, así que ten paciencia mientras Angular CLI configura tu aplicación. Una vez completada la instalación, verás una carpeta llamada country-app en el directorio actual. Puedes ejecutar tu aplicación ahora mismo cambiando el directorio a country-app y luego ejecutando ng serve en la consola.
1 |
cd country-app |
2 |
ng serve --open |
Agregar --open abrirá automáticamente tu aplicación en el navegador en http://localhost:4200/.
Información general de la aplicación de países
La aplicación de países que estamos creando tendrá tres componentes. El HomeComponent mostrará los tres países principales en varias categorías, como población, GDP (Gross Domestic Product o PIB, Producto Interno Bruto, en español) y área. Podrás hacer clic en el nombre de cada país para leer más al respecto. La información adicional sobre el país es mostrada utilizando otro componente, al que llamaremos CountryDetailComponent. Habrá un componente más en nuestra aplicación, que se utilizará para mostrar una lista de todos los países que hemos almacenado en nuestra aplicación.
Dado que esta es tu primera aplicación Angular, nuestro objetivo principal será mantener las cosas simples sin agregar ninguna funcionalidad complicada. Una vez que comprendas los conceptos básicos, crear aplicaciones más complejas no parecerá una tarea abrumadora.
La siguiente imagen es de la página de inicio o HomeComponent en nuestra aplicación de países. Como puedes ver, hay tres países en cada categoría, y se han colocado en orden descendente. Al crear el HomeComponent, aprenderás a ordenar los diferentes países antes de mostrarlos dentro de la plantilla.
La siguiente imagen muestra la "página de todos los países" o el AllCountriesComponent de nuestra aplicación. El diseño de este componente es muy similar al HomeComponent. La única diferencia es que esta vez estamos listando todos los países junto con sus capitales.
Si haces clic en el cuadro de cualquier país representado dentro de HomeComponent o AllCountriesComponent, te dirigirás a la página de detalle del país o CountryDetailComponent. La información proporcionada sobre un país no es editable.
Hay un botón de retroceso después de los detalles de cada país. Este botón de retroceso te lleva de regreso al componente o página anterior. Si llegaste al CountryDetailComponent desde el HomeComponent, volverás al HomeComponent. Si llegaste al CountryDetailComponent desde AllCountriesComponent, serás llevado de vuelta a AllCountriesComponent.
Hacer referencia a los diferentes componentes que estamos creando como páginas no es técnicamente correcto. Sin embargo, estoy usando términos como página de inicio o HomeComponent indistintamente porque ver muchos términos desconocidos como enrutamiento, componentes y decoradores puede ser intimidante para los lectores que nunca antes han creado una aplicación Angular. El uso de estos términos para esta serie puede ayudarte a aprender rápidamente en lugar de confundirte con la jerga.
Conceptos básicos de Angular
Antes de comenzar a crear nuestra aplicación, debes sentirse cómodo con los conceptos básicos de Angular. Esta sección cubrirá muy brevemente temas importantes como componentes y plantillas.
Los componentes son los elementos básicos de una aplicación Angular. Te permiten controlar la interfaz de usuario de tu aplicación. Un componente básico consta de dos partes: un decorador y una definición de clase. Puedes especificar la lógica de la aplicación para un componente dentro de la clase.
El decorador de componentes se usa para especificar información como un selector personalizado para identificar el componente, la ruta a la plantilla HTML y las reglas de estilo que se aplicarán al componente.
Aquí tenemos un decorador de componentes básico que establece los tres valores para CountryDetailComponent:
1 |
@Component({ |
2 |
selector: 'app-country-detail', |
3 |
templateUrl: './country-detail.component.html', |
4 |
styleUrls: ['./country-detail.component.css'] |
5 |
})
|
Todos los componentes que creamos tendrán un selector personalizado que especifica la etiqueta que representa el componente dentro del navegador. Estas etiquetas personalizadas pueden tener cualquier nombre que desees. Por ejemplo, crearemos un countryDetailComponent en el tercer tutorial de la serie, y utilizaremos nuestra propia etiqueta personalizada llamada app-country-detail para representar este componente en el navegador.
Cualquier componente que crees consistirá en una plantilla que controla lo que se renderiza en la página de la aplicación. Por ejemplo, countryDetailComponent tiene dos etiquetas div que actúan como una envoltura alrededor del contenido principal del componente. Cada información sobre un país se coloca dentro de su propia etiqueta p, y el nombre del país se coloca dentro de una etiqueta h2. Todas estas etiquetas pueden almacenarse juntas como una plantilla para countryDetailComponent y luego renderizarse como un todo. Esta plantilla del componente puede guardarse como un archivo HTML o especificarse directamente dentro del decorador utilizando el atributo template.
Los diferentes componentes de nuestra aplicación necesitarán recuperar los datos para mostrarlos en la pantalla. Crearemos una clase de servicio que contendrá funciones para ayudarnos a recuperar estos datos y ordenarlos o modificarlos de una forma u otra. Luego, utilizaremos la funcionalidad de diferentes clases de componentes para mostrar estos datos al usuario.
Puedes considerar que un Service (Servicio, en español) es simplemente cualquier valor, función o característica que tu aplicación necesita. Obtener todos los países almacenados dentro de nuestra aplicación es un servicio, al igual que ordenarlos y mostrarlos. Los tres componentes de nuestra clase utilizarán funciones de nuestro servicio para recuperar datos.
Al crear componentes para tu aplicación, tendrás que importar dependencias de diferentes módulos. Por ejemplo, importaremos Component desde @angular/core cada vez que creamos un componente propio. También puedes usar la misma sintaxis para importar dependencias creadas por ti. La parte dentro de las llaves se usa para especificar la dependencia que deseas importar, y la parte después de from se usa para especificar dónde Angular puede encontrar la dependencia.
Aquí hay un fragmento de código de country-app que crearemos. Como puedes ver, estamos importando Component y OnInit desde @angular/core. Del mismo modo, estamos importando Country y CountryService de archivos que creamos nosotros.
1 |
import { Component, OnInit } from '@angular/core'; |
2 |
|
3 |
import { Country } from '../country'; |
4 |
import { CountryService } from '../country.service'; |
El esqueleto de la aplicación
Después de ejecutar el comando ng new country-app, la CLI de Angular creó un montón de archivos y carpetas por ti. Ver tantos archivos puede ser intimidante como principiante, pero no necesitas trabajar con todos esos archivos. Al crear nuestra aplicación de países, solo modificaremos los archivos que ya existen dentro de la carpeta src/app, así como crearemos nuevos archivos en el mismo directorio. En este momento, debes tener cinco archivos diferentes en la carpeta src/app. Estos archivos crean un esqueleto de la aplicación que se utilizará para armar el resto de nuestra aplicación.
El archivo app.component.ts contiene la lógica de nuestro componente escrita en TypeScript. Puedes abrir este archivo y actualizar la propiedad title de la clase AppComponent a 'Fun Facts About Countries' (Datos curiosos sobre los países, en español). Ahora, el archivo app.component.ts debería tener el siguiente código.
1 |
import { Component } from '@angular/core'; |
2 |
|
3 |
@Component({ |
4 |
selector: 'app-root', |
5 |
templateUrl: './app.component.html', |
6 |
styleUrls: ['./app.component.css'] |
7 |
})
|
8 |
export class AppComponent { |
9 |
title = 'Fun Facts About Countries'; |
10 |
}
|
El archivo app.component.html contiene la plantilla para nuestra clase AppComponent. Abre el archivo app.component.html y reemplaza el código HTML estándar con la siguiente línea:
1 |
<h1>{{title}}</h1> |
Al ajustar el title dentro de las llaves, le estamos diciendo a Angular que ponga el valor de la propiedad title de la clase AppComponent dentro de la etiqueta h1.
Actualizaremos este archivo en el último tutorial de la serie para renderizar los nuevos componentes que crearemos. Por ahora, solo necesitamos mostrar el título de nuestra aplicación.
Los cambios realizados en este archivo se reflejarán automáticamente en el navegador en http://localhost:4200/. Solo asegúrate de que la consola aún esté abierta y que ya has ingresado el comando ng serve desde el comienzo del tutorial.
Las diferentes funciones y características de la aplicación serán controladas por múltiples componentes más simples que crearemos más adelante. Puedes pensar en este esqueleto de aplicación como un automóvil y diferentes componentes que crearemos como partes de ese automóvil, como el motor y las ruedas. Cada componente realizará su función específica, y puedes juntarlos todos para crear todo el automóvil.
Reflexiones finales
El objetivo de este tutorial fue ayudarte a instalar todas las herramientas necesarias que necesitas para crear una aplicación Angular y repasar rápidamente algunos conceptos fundamentales de Angular.
Para resumir, debes conocer los conceptos básicos de TypeScript antes de poder crear una aplicación Angular. En el siguiente paso, debes instalar Node.js, TypeScript y el Angular CLI. Después de eso, puedes ejecutar un montón de comandos desde la sección Empezando de este tutorial, y tu primera aplicación Angular estará en funcionamiento.
Nuestra aplicación de países hará mucho más que solo mostrar el título. En el próximo tutorial, crearás algunas clases y servicios que se utilizarán para almacenar y recuperar datos sobre diferentes países. Estas clases y servicios serán útiles en el tercer y cuarto tutorial, donde crearemos diferentes componentes de nuestra aplicación.
Mientras trabajamos a través de esta serie de tutoriales, no olvides visitar Envato Market para ver qué hay disponible para poder usar y estudiar para ambos Angular y JavaScript, en general.
