Merida Design Blog

Publicado el | Tutoriales / ,

Guía de inicio con Angular 2

Al momento de crear este artículo, Angular 2 se encuentra aún en beta, sin embargo, ya no se realizarán cambios significativos al framework en su estado actual, al menos no a su sintaxis.

Aunque probablemente no sea del todo recomendable usarlo para aplicaciones en producción aún, es un buen momento para aprenderlo, ya que a pesar de que ha cambiado mucho y esto puede suponer un curva de aprendizaje mayor, la verdad es que todos los cambios han sido para bien y definitivamente era algo que se necesitaba.

Este artículo nos ayudará a preparar el entorno de trabajo necesario para crear aplicaciones con Angular 2 y a comprender los primeros conceptos.


Entorno de desarrollo

El primer paso es crear una carpeta para el proyecto, en la que colocaremos todos los archivos correspondientes.

mkdir angular2-quickstart
cd angular2-quickstart

Añadir librerías

Para trabajar con Angular vamos a necesitar el uso de varias librerías que nos ayudarán a trabajar usando las características mas recientes de JS.

Recomiendo usar Visual Studio Code como editor ya que cuenta con soporte para TypeScript sin necesidad de instalar ningún plugin adicional.

Abre el editor y crea el archivo package.json con el siguiente código:

{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "scripts": {
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "ISC",
    "dependencies": {
        "angular2": "2.0.0-beta.3",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.11"
    },
    "devDependencies": {
        "concurrently": "^1.0.0",
        "lite-server": "^2.0.1",
        "typescript": "^1.7.5"
    }
}

Del código anterior solo destacaría la parte de scripts. En esa sección se definen tareas que se pueden ejecutar desde la linea de comandos y que a su vez, ejecutan una función de las librerías que se están incluyendo, por ejemplo lite-server, que nos permitirá crear un servidor local para nuestro entorno de desarrollo.

Para ver mas detalles del archivo, consulta el siguiente enlace.

Instala los paquetes con npm.

npm install

Todas las librerías serán descargadas y colocadas en la carpeta node_modules dentro de la carpeta del proyecto.


Configurar TypeScript

Para que TypeScript funcione correctamente, debemos especificar algunas opciones de configuración.

Siempre en la carpeta angular2-quickstart crea el archivo tsconfig.json y coloca el siguiente código:

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

Para ver los detalles de este archivo consulta el siguiente enlace.

Con esto, las configuraciones están listas, ahora podemos comenzar a escribir algo de código :D.


Nuestro primer componente de Angular

Los Componentes son el concepto fundamental en Angular, éstos se encargan de encapsular una porción la aplicación y controlar la interacción de éste con el usuario de manera interna.

Técnicamente hablando, un Componente es una clase que controla una plantilla y las aplicaciones en Angular están compuestas en su mayoría por Componentes, así que veamos un ejemplo sencillo.

Sub-carpeta para la aplicación

Para tener una mejor organización del código, colocaremos los archivos correspondientes a Angular dentro de una sub-carpeta llamada app.

mkdir app
cd app

Archivo del componente

Ahora crea un archivo con el nombre app.component.ts y coloca el siguiente código:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Mi primera aplicación</h1>'
})
export class AppComponent {}

Vamos a revisar el código anterior comenzando por la parte final en donde definimos la clase.

La clase Component

Al final nos encontramos con la clase AppComponent que por el momento no hace hace nada, solamente sirve para definir el componente, a medida que las aplicaciones sean mas complejas se incluirán variables y funciones. Para fines de este breve tutorial introductorio no necesitamos colocar nada adicional.

Módulos

Las aplicaciones en Angular son modulares y están compuestas por muchos archivos dedicados a un propósito.

Para que los archivos puedan ser usados como módulos en otros archivos (modulos), se debe usar la instrucción export para hacer accesible el código, en éste caso, exportamos el componente de la clase AppComponent.

...
export class AppComponent {}

Al crear el módulo será posible importarlo a través del nombre del archivo sin la extensión, en nuestro archivo sería app.component.

import {AppComponent} from './app.component';
...

Angular mismo es modular, ya que es una colección de módulos de librería, en donde cada librería es un módulo creado con multiples módulos con características o funciones relacionadas.

Cuando necesitemos alguna función de Angular, solamente tenemos que importarla directamente del módulo de Angular correspondiente, como en el caso de nuestro ejemplo, justo ahora usamos un modulo que nos ayuda a definir los meta-datos del componente.

Componente de Metadatos

Para que la clase se convierta en un Componente de Angular, es necesario asignarle meta-datos, ya que éstos le indican a Angular como debe ser construida la vista y como el Componente va a interactuar con otras partes de la aplicación.

Para definir los meta-datos del Componente en Angular usamos la función Component a la que podemos acceder importando el módulo correspondiente de la librería angular2/core.

import {Component} from 'angular2/core';

En TypeScript, se aplica la función Component a la clase como un decorador aplicándole como prefijo el símbolo @ e invocándola justo antes de la clase.

...
@Component({
    selector: 'my-app',
    template: '<h1>Mi primera aplicación</h1>'
});

@Component le indica a Angular que la clase, es un componente de Angular. El objeto de configuración proporcionado como parámetro, cuenta con 2 campos; el selector y un template.

El campo selector especifica un selector de CSS para el elemento HTML que servirá como contexto para el componente. Angular genera de manera automática una nueva instancia para AppComponent en donde encuentre un elemento my-app.

Recuerda el selector my-app, ya que lo usaremos al crear el index.html.

La propiedad template contiene la plantilla HTML que controla la apariencia del componente. En este ejemplo usamos una cadena de texto para definir el HTML pero pueden asignarse archivos independientes usando templateUrl y la ruta del archivo.


Iniciar la Aplicación

Agrega un nuevo archivo a la carpeta app con el nombre main.ts y coloca el siguiente código:

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

Como puedes ver en el código, para arrancar la aplicación se requieren 2 cosas, la función bootstrap de Angular que importamos en la línea 1 y un componente inicial por el cual comenzará la aplicación, en este caso sería el componente AppComponent que acabamos de crear.

Posteriormente, en la linea 4 ejecutamos la función y le pasamos como parámetro nuestro componente.


El HTML

Finalmente creamos el archivo que contendrá la aplicación. El archivo no lo vamos a crear en la carpeta app, si no un nivel arriba en la carpeta del proyecto.

cd ..

Ahora crea el archivo index.html y coloca el siguiente código:

<html>
    <head>
        <title>Angular 2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!-- 1. Leer librerías -->
        <!-- IE requiere estos polyfills en este mismo orden -->
        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        
        <!-- 2. Configurar SystemJS -->
        <script>
        System.config({
            packages: {        
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
        </script>
    </head>
    
    <!-- 3. Mostrar la aplicación -->
    <body>
        <my-app>Cargando...</my-app>
    </body>
</html>

Existen 3 puntos principales en el código anterior:

  1. Cargamos todas las librerías necesarias que instalamos previamente usando npm install.
  2. Configuramos System y le indicamos que cargue el archivo main que recién creamos.
  3. Agregamos la etiqueta my-app al body. Esta etiqueta es donde reside nuestra aplicación.

SystemJS es una utilería que nos permite leer los módulos de la aplicación en el navegador, de esta forma podemos mantener nuestros módulos en archivos separados e importarlos solo cuando los necesitamos.

Cuando Angular ejecuta la función boostrap en el archivo main.ts, lee los meta-datos del componente AppComponent, encuentra el selector my-app, luego ubica la etiqueta my-app en el HTML y carga la aplicación entre esas etiquetas.


Compila y ejecuta

Abre tu terminal y ejecuta el siguiente comando:

npm start

El comando start, que definimos anteriormente en el archivo package.json, se encarga de ejecutar 2 procesos de node de manera paralela.

  1. El compilador de TypeScript en modo watch, que observa todos los cambios realizados en los archivos y re-compila al momento.
  2. Un servidor estático llamado lite-server que lee el archivo index.html en el navegador y refresca la pagina cada vez que hay un cambio en los archivos de la aplicación.

Una vez ejecutado el comando, la aplicación debe cargarse en tu navegador. Listo, ya has creado tu primera aplicación usando Angular 2 con TypeScript.

Realiza Cambios

Prueba realizando algunos cambios en la plantilla del componente, por ejemplo, coloca tu nombre en lugar del texto 'mi primera aplicación' y observa como los cambios se reflejan en el navegador de manera automática.

Para finalizar el compilador y el servidor solo cierra la ventana de tu terminal o presiona las teclas Ctrl + C.


La estructura final

La estructura final del proyecto debe verse de la siguiente forma:
folder-structure


Conclusión

Esta primera aplicación no hace mucho, sin embargo, es un buen comienzo para comprender los conceptos manejados en Angular 2.

En futuras publicaciones mostraré ejemplos mas complejos para abarcar mas conceptos. Si estas interesado(a) y no quieres perderte estas publicaciones, puedes suscribirte al boletín semanal en el formulario de abajo.


Fuente original.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: