Angular 4: ¿Que es y por donde comenzar? – Parte 1

¿Que es Angular?

Es un framework basado en JavaScript que nos permite crear SPA (Single Page Applications), esto significa que el navegador no te va a redirigir a otra página, sino que todo se mostrara en la misma.

Para este y los siguientes artículos usaremos la versión 4, he intentare crear otros artículos con las novedades que ofrezcan las versiones mas actuales.

A continuación un pequeño listado de las versiones (hasta la 4):

  • Angular 1: Conocido como AngularJS, y es la versión inicial del Framework.
  • Angular 2: Es una revisión completa del Framework, ya que se desecho AngularJS y se reescribió de nuevo. Esto es debido a que AngularJS tenía errores y era más sencillo crear un nuevo Framework que corregir el que ya se tenía.
  • Angular 4: La primera gran actualización de Angular 2.

Pero te preguntaras, ¿¿¿ y Angular 3 ???. Bien, no se uso la versión 3 porque Igor Minar, líder del equipo de Angular en Google, explicó que paso de la versión 2 a la 4 ya que el módulo de Angular Router (el que permite las SPA’S) tenía versión 3.3.0 y los demás módulos de Angular el 2.3.0 y esto podría o generaba errores, por lo cual decidieron alinearlo todo con la versión 4.

Un pequeño adelanto

Como había indicado al principio del artículo, este curso lo voy a realizar usando la versión 4, pero como actualmente estamos en la versión 6 intentare añadir algo de información extra para entender la evolución.

Con la actualización de la versión 4 a la versión 5, puede que existieran algo de dudas debido a todo el descontrol que hubo en las primeras versiones de Angular.

Recordemos que en la actualización de la versión 1.x (Angular JS) a la versión 2, Angular JS fue prácticamente desechado y re-escrito.

Desde la versión 2 a la versión 4, se uso para alinear versiones y ciertas actualizaciones.

Actualización de la versión 4 a la versión 5, su propósito principal fue mejorar la coordinación entre el equipo de Angular, los colaboradores de Angular, los equipos de aplicaciones de Angular y la comunidad de proyectos de Angular.

La versión 5 es retro-compatible con Angular, esto quiere decir que los cambios para la versión 5 en el core del framework y tooling no romperán el ecosistema existente de componentes y aplicaciones.

La versión 5 tiene las siguiente mejoras:

  • AOT será el default
  • Chequeo de tipos en templates
  • Metadata más flexible
  • Se removerán los archivos .ngfactory.ts
  • Mejores mensajes de error
  • Mejoramiento de performance
  • ……

De la versión 5 a la versión 6, se puede resumir en una frase que no es mía y que fue publicada cuando se libero y presento la versión 6: 

The first release of Angular that unifies the Framework, Material and CLI.

¿Qué es Typescript?

Es un Superset de Javascript, esto significa que esta escrito en Javascript por lo tanto no lo remplaza.

Pero, ¿qué es un superset?. Se puede decir que es un lenguaje escrito sobre otro, aprovecha y se basa en el original pero nos ofrece algunas mejoras en este caso los interfaces, las clases y los tipos entre otras cosas.

Habrá algunas tareas que TypeScript no pueda realizar así que usaremos JavaScript para realizarlas.

¿Y porque esta breve explicación?, pues muy simple, Typescript es el lenguaje que usaremos en Angular.

Creación de la estructura en Angular 4

Para crear nuestra aplicación usaremos el CLI que trae Angular.

A continuación usaremos los siguientes comandos para generar una estructura (es necesario tener instalado NodeJS y NPM):

  1. npm i -g @angular/cli: Instalación del CLI de Angular.
  2. ng new my-app: Crea toda la estructura necesaria.
  3. cd my-app: Accedemos a la carpeta del proyecto
  4. ng serve: Inicia nuestra aplicación montando un servidor local.

Si todo funciono correctamente deberíamos tener levantado un servidor local en la url http://localhost:4200 con nuestra aplicación.