Introducción a Angular 2 y primera aplicación

La primera parte de esta guía de aprendizaje de Angular 2 va a consistir en una introducción para comprender su funcionamiento.

Para desarrollar aplicaciones con Angular 2 se podrá usar el lenguaje TypeScript, este lenguaje ha sido desarrollado por Microsoft y trabaja sobre el lenguaje de programación JavaScript añadiendo tipado estático y objetos basados en clases.

Por lo tanto mediante un compilador de TypeScript se traducirá a código JavaScript original.

TypeScript tiene ventajas como la posibilidad de trabajar con otras librerías javaScript muy conocidas como jQuery y Node.js.

Para comenzar a entender el proceso a seguir para desarrollar aplicaciones con Angular 2 vamos a realizar un ejemplo sencillo que mostrará un “Hola mundo”.

El resultado final del ejemplo se puede visualizar en el siguiente enlace:

Enlace : Ir al ejemplo

Antes de empezar nuestro caso práctico vamos a repasar algunos conceptos básicos.

Para descargar archivos:
Descargar aquí

Conceptos básicos de Angular 2

  • Componente

Los componentes son fundamentales a la hora de desarrollar con Angular.

Un componente se encarga de gestionar una vista, en otras palabras una sección de nuestra página Web donde el usuario interactuará sobre esta.

Por lo tanto podemos decir que un componente controla una zona de la vista (zona de nuestra página Web), también podemos deducir que por cada componente que creemos crearemos una plantilla para interactuar sobre la vista.

  • Módulo

Las aplicaciones realizadas con Angular son modulares, se componen de muchos archivos y cada uno de ellos tiene una funcionalidad específica, ósea un propósito.

Después de crear un componente se debe exportar para poder usarse, cuando se exporte el componente se tendrá que hacer referencia al archivo que lo usará (una parte de la plantilla).

El proceso de exportación convierte dicho archivo que contiene una parte de la plantilla en un módulo.

El nombre que se escoge para el archivo obviando su extensión suele ser el nombre del módulo.

En las aplicación grandes es fácil que contenga muchos componentes y por consecuencia muchos módulos.

Para que un archivo se utilice como módulo se usará la instrucción export.

Un ejemplo sería:

export class AppComponent { }

En nuestro ejemplo práctico se visualizará de la siguiente manera:

export class ClaseMundo { tuNombre: string = ' '; }
  • Component Metadata

Una clase se convierte en un componente cuando nosotros le damos metadatos.
Angular necesita los metadatos para componer la vista y para saber cómo el componente va a interactuar con las otras partes de la aplicación.

Para definir componentes de metadatos se usa la función component de Angular.
Para tener acceso a dicha función debemos importarla desde la principal librería de Angular llamada angular2/core.

  • Estructura componente

Un componente está compuesto principalmente por:

  • Parte importación

Importamos la biblioteca principal de Angular para acceder a sus funcionalidades.

import {Component} from 'angular2/core';
  • Parte metadatos

-Selector: hace referencia a nuestro elemento CSS que se encuentra lógicamente integrado en nuestro código HTML. En nuestro ejemplo sería:
selector: ‘etiqueta-index’
Por lo tanto nuestro selector siempre deberá existir en nuestro archivo HTML principal, en nuestro caso llamado index.html

-Template: Hace referencia a nuestra plantilla HTML, si escogemos incluir la ruta se usará el atributo templateUrl como se muestra a continuación:

templateUrl: 'src/hola_mundo.html'

Si queremos integrar el código HTML directamente sin archivos de por medio se usará el atributo template de la siguiente manera:

template: '<h1>Mi primera aplicación</h1>'

Una plantilla se compone de código HTML y CSS y dice como se debe representar una vista.

Por lo tanto diremos que el atributo template carga una plantilla, en nuestro ejemplo cargaria 

Mi primera aplicación

Primer ejemplo con Angular 2

Nuestro ejemplo va a tener tres archivos.

Los ficheros que debemos crear para el desarrollo de nuestro ejemplo son:

/
/index.html
/src/hola_mundo.html
/src/hola_mundo.ts

El index.html al ser la página principal deberá estar situada en la raiz de nuestra aplicación.

El archivo index.html contiene la estructura principal de nuestro ejemplo, en este archivo se cargan las librerías necesarias para poder trabajar en Angular 2 y los componentes sobre los que trabajaremos.

Además también va a ser nuestra plantilla HTML principal, a partir de esta plantilla se realizarán los cambios HTML necesarios para modificar el aspecto de nuestra aplicación.

En nuestro caso realizaremos nuestros cambios sobre el siguiente código HTML, usaremos la etiqueta etiqueta-index para ello.

<body>
    <etiqueta-index>Conectando...</etiqueta-index>
</body>

Primer archivo: index.html

<!DOCTYPE html>
<html>
  <head>
   Angular 2, Hola mundo!
   <!-- 1. Cargamos librerias -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
 
<!-- 2. Configuración SystemJS -->
<script>// <![CDATA[
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
// ]]></script>
 
<!-- 3. Bootstrap -->
<script>// <![CDATA[
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/hola_mundo').then(function(src) {
          ng.bootstrap(src.ClaseMundo);
        });
      }); 
// ]]></script>
 
<!-- 4. Visualizar la aplicación --> 
<body>
    <etiqueta-index>Conectando...</etiqueta-index>
</body>
</html>

Segundo archivo: hola_mundo.ts

import {Component} from 'angular2/core';
//creamos nuestro componente
@Component({
/* Obtenemos la etiqueta "etiqueta-index" de nuestro archivo index.html, nuestro componente efectuará los cambios sobre esta etiqueta */
selector: 'etiqueta-index',
// Ubicación de nuestra plantilla HTML
templateUrl: 'src/hola_mundo.html'
})
export class ClaseMundo {
/* Declaramos e inicializamos la variable que usaremos para transportar nuestro nombre teclado en el input para que posteriormente se pueda mostrar en otra sección de nuestra plantilla HTML */	
tuNombre: string = '';	
}

Tercer archivo: hola_mundo.html

<label>Nombre:</label>
<!-- Entrada del nombre, en este input introduciremos nuestro nombre -->
<input type="text" [(ngModel)]="tuNombre" placeholder="Introduce tu nombre">
<hr>
<!-- Condición para mostrar el nombre, se comprueba si la variable tuNombre está vacia con el símbolo "!", si es diferente a vacia se visualizará su valor -->
<h1 [hidden]="!tuNombre">Hola {{tuNombre}}!</h1>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

9 comentarios sobre “Introducción a Angular 2 y primera aplicación

  • el Mar 9, 2016 a las 6:52 pm
    Permalink

    Ivan, muy buen tutorial, muy buen explicado y de facil entendimiento.

    Respuesta
    • el Mar 10, 2016 a las 9:49 pm
      Permalink

      Muchas gracias por tu comentario, saludos!

      Respuesta
  • el May 21, 2016 a las 12:06 pm
    Permalink

    Muchas gracias por el tutorial, para los que empezamos nos viene de perlas para digerir el funcionamiento de Angular2.

    Un saludo!!

    Respuesta
  • el Jun 18, 2016 a las 11:00 am
    Permalink

    Excelente explicación… soy nuevo en esto y me tenía como loco tratar de entender cada concepto que has aclarado aquí. Felicitaciones y gracias, espero que continues con cursos de Angular 2

    Respuesta
    • el Jun 18, 2016 a las 11:01 am
      Permalink

      Ivan…y si podés….ojalá crees un curso del nuevo Firebase. Gracias

      Respuesta
      • el Jun 21, 2016 a las 5:57 pm
        Permalink

        Hola, muchas gracias por tu comentario.

        Voy a seguir poco a poco publicando nuevos artículos sobre Angular 2.0.

        Saludos!

        Respuesta
  • el Jul 22, 2016 a las 12:55 am
    Permalink

    Muy buen tutorial.. pero como lo corro?

    Respuesta
    • el Jul 22, 2016 a las 10:14 pm
      Permalink

      Hola, tu pregunta es muy general pero cargando las librerías necesarias en el archivo index.html y lógicamente teniendo el resto del código correctamente debería de funcionar.

      Si quieres comprobar su funcionamiento puedes descargarte algún ejemplo desde la página oficial de Angular 2.

      Respuesta
  • el Sep 26, 2016 a las 8:51 pm
    Permalink

    Hola Iván, en base al tutorial en la página de angular 2, que está basado en quickstart, hice un pequeño sitio; sólo usa npm (no gulp, ni otro).
    Localmente me funciona bárbaro, pero como hago el deploy para poder subirlo al servidor de hosting?

    Gracias

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.