Hola mundo Angular 2


Aún en el horno, Angular 2.0 promete dar un paso diferente pero muy importante en la forma en que desarrollamos aplicaciones para la Web, su evolución marcha hacia los futuros estándares de desarrollo:

  • Web Components (desarrollo basado en componentes).
  • EcmaScript 6 (ES6) y EcmaScript 7 (ES7), las próximas versiones de JavaScript.

Actualmente los navegadores web no soportan estas características de forma nativa, pero existen proyectos como Traceur que “compatibilizan” las futuras mejoras de JavaScript que vendrán con ES6 con lo que tenemos hoy. Incluso YA puedes crear aplicaciones en Angular v1 utilizando ES6.

Pero hoy no hablaré sobre Angular v1, hoy le toca a Angular v2.

Crearé la típica app “Hello World” de una forma muy simple para que veas lo que viene.

Te aseguro que si ya conoces y has lidiado con todo el enredo de scopes,controllers, models, directives e isolate scopes, no te será muy difícil comprender “la nueva filosofía”, donde desaparece todo, bueno, como dice Buena Fe: “casi todo”.

Paso 1: Descarga el proyecto base

Este proyecto base es necesario tenerlo pues como te comenté anteriormente se necesitan varios ficheros JS adicionales para que el navegador “entienda” el código y la arquitectura de la aplicación en sí.

git clone https://github.com/angular2/quickstart.git

Obtendrás una carpeta con el nombre quickstart. Ni te preocupes por mirar dentro de ella, solo recuéstate y mira cómo creo el fichero index.html, en caso contrario, ve por un guarapo primero :)

Paso 2: mkdir index.html

Observa que el fichero no lo estoy creando dentro de la carpeta anterior, sino a su lado, como hermanos que serán.

A continuación, la app:

<!doctype html>

Fin.

Conclusiones

Como pudiste ver hemos creado una app bastante sencilla que muestra las……………


Whaat?

Calma pueblo, un poco de humor antes de empezar no es malo, y más si vienes, lees este post, y te pasa como a mí, que luego de tanto tiempo aprendiendo a hacer una directiva e integrarla a la aplicación con controladores, modelos y scopes, ¿viene Santa y me dice que ya eso no se utilizará en Angular 2? no fastidies.

¿Te digo algo?, el cambio radical, ¡no es para bien, es para superior!

AHORA SÍ, ¡Manos a la Obra!

El 99% del código que verás a continuación, como mismo lo leerás, como mismo lo olvidarás, pues en un futuro cercano no se utilizará ya que solo ofrece compatibilidad con TypeScript (el camino hacia ES6), así que solo lee, interpreta, y olvida :)

<!doctype html>
<meta charset="utf-8">
<title>Hello World en Angular 2.0</title>

<script src="quickstart/es6/dist/es6-shim.js"></script>

<body>

  <hello></hello>

<script>
  System.paths = {
    'angular2/*' : 'quickstart/angular2/*.js',
    'rtts_assert/*': 'quickstart/rtts_assert/*.js',
    'app'        : 'app.js'
  };

  System.import('app'); 
</script>
</body>

No pongo las etiquetas <html> y <head> pues HTML5 lo permite, y el navegador las inserta de forma automática.

El script que inserto al principio, le pone el Jetpack al navegador para que vuele con ES6.

La etiqueta <hello> NO es una directiva, es el componente ROOT de la App.

Finalmente, ¿ y esos System.* ?

System se usa para habilitar el soporte de carga de módulos similar a como se hará en ES6 en los navegadores actuales. En la primera línea estoy diciendo que angular2/* referencia a todos los ficheros JavaScript bajo la ruta quickstart/angular2/.

Lo mismo sucede con la 2da y 3ra línea. En esta última, estoy diciendo que el componente que se encuentra en app.js se referenciará con el nombre 'app', añadiendo así comodidad y legibilidad.

System.import('app') levanta el componente que está en ese fichero.

Primeros cambios:

  1. No tenemos la directiva ng-app.
  2. No tenemos un controlador global.

En Angular v1, la directiva ng-app hacía el proceso de inicialización de la app de forma automática. En cambio, se importa la app y por consiguiente se inicializa el componente principal, que en este caso es hello.

Esto se realiza desde el propio componente, el cual queda implementado de esta forma:

export { Template, Component, bootstrap } from 'angular2/angular2';

@Component({
  selector : 'hello'    
});

@Template({
  inline: `
    <h1>Bienvenido a Angular 2, {{ name }}</h1>
     AngularJS 2.0 viene con {{ what }} 
  `
})

class Hello(){
  constructor(){
    this.name = 'MyCyberAcademy';
    this.what = 'muchos cambios';  
  }  
}

bootstrap(Hello);

La mayoría de las cosas que ves aquí (como el export y las @) son propias de ES6, no de Angular. En la primera línea exporto los módulos que necesito de Es6 y los utilizo.

Lo más importante aquí es la última línea, donde inicializo el componente, que como puedes ver es una clase parecida a las tradicionales de los lenguajes como Java.

Por supuesto, el código HTML no tiene por qué estar ahí, perfectamente puede estar en un fichero aparte, y lo especificas de esta forma:

@Template({
  url : 'lista.html' 
});

Cuando se carga Angular 2 en el fichero index.html, ve el componente (no la directiva) hello y lo ejecuta. De ahí en lo adelante se inicializan de forma automática los demás componentes que hereden de él, o que estén incluidos en él.

Se pueden utilizar servicios, añadir otros componentes que se encarguen de gestionar la navegación, los widgets que necesites, en fin, se crea la aplicación basada en componentes.

Paso 3: Comprueba que funciona

Copia el revolucionario proyecto que hemos creado hacia un servidor web, puede ser el propio de python:

python -m SimpleHTTPServer

y abre tu navegador, debes poder ver las etiquetas h1 y p con los textos correspondientes y la consola más limpia que el agua.

Conclusiones

Considero que una pequeña mirada a lo que se aproxima nos viene bien, para al menos, prepararnos mentalmente.

Si estás desarrollando tu super increíble proyecto en Angular v1, no te preocupes, sigue con él. Angular va por la versión 1.4, y tiene y seguirá teniendo soporte por mucho tiempo.

Además, existen miles de recursos disponibles para crear todo tipo de aplicaciones web con Angular v1, desde directivas para acceder a Google Maps, hasta potentes servicios para consultar APIs Rest y recursos del backend como $resource y Restangular, así que no te desanimes, que hay Angular v1 para rato.

¿Qué crees de lo nuevo? ¿Muy al extremo? ¿Te gusta? Espero tus impresiones.

Latest posts by Elena Fuentes (see all)