Angular 2 con javascript
Angular 2 con javascript

En este tutorial vamos a ver cómo podemos migrar de Angular 1 a Angular 2 con una aplicación que utilizará rutas, directivas, filtros, controladores, módulos y la factoría $resource, por lo tanto veremos el proceso de forma completa.

Aunque Angular 2 ha tratado de hacer el proceso de migrar de Angular 1 a Angular 2 de la forma más sencilla posible creando varias herramientas la verdad que no es algo tan sencillo, primero debemos aprender a trabajar con Angular 2, y una vez sabemos, debemos conocer el proceso haciendo uso del UpgradeAdapter.

El proceso de migrar una aplicación con la versión 1 de Angular a Angular 2 lo vamos a segmentar en 3 secciones.

La primera parte consistirá en instalar algunas dependencias y pasar nuestro proyecto de javascript a typescript.

La segunda parte consistirá en crear una aplicación híbrida utilizando el UpgradeAdapter, es decir, una aplicación que utilice cosas de Angular 1 y Angular 2.

La tercera y última parte consistirá en eliminar toda dependencia de Angular 1 e implementar el proceso de enrutamiento de nuestra aplicación.

Migrar de Angular 1 a Angular 2 es aparte de necesario beneficioso, todo ello por varios motivos.

  • Velocidad y rendimiento, Angular 2 es mucho más rápido que Angular 1.
  • Simple y expresivo, Angular 2 utiliza una sintaxis fácil de entender generando un código limpio.
  • Angular 2 es multiplataforma, provee las herramientas necesarias para crear aplicaciones para escritorio, web, Android y iOS.
  • Posibilidad de migrar de Angular 1 a Angular 2 mezclando ambas versiones durante el proceso.
  • Desarrollo flexible, soporte para ES5, ES6, Typescript y Dart.
  • Completo sistema de enrutado haciendo fácil la migración.
  • Potente y sencillo sistema de DI(Inyección de dependencias).
  • Compatible con navegadores actuales y antiguos, (IE9 + y Android 4.1).
  • Internacionalización (i18n), aunque está en desarrollo, es una gran característica disponible en Angular 2.

Más información aquí.

Enlaces que te pueden interesar:

Migrar de Angular 1 a Angular 2, ¡el salto!

Dicho todo lo anterior, nosotros vamos a seguir los pasos del tutorial de actualización de Angular 2 para migrar una aplicación construida con Angular 1 a Angular 2, puedes descargar el código fuente desde mi repositorio para realizar los pasos si te interesa.

Descargar proyecto de partida.

Saltando a typescript y carga automática con System

Lo primero que debemos hacer es tener la posibilidad de importar y exportar nuestro código, por lo tanto vamos a instalar algunas dependencias para pasar de javascript a typescript.

Primero debemos crear dos archivos en la raíz, primero un package.json y después un tsconfig.json, el primero hará la instalación de las dependencias y el segundo se encargará de compilar el código typescript en javascript utilizando el módulo System.


En este momento debemos instalar las dependencias con el comando npm install.


Y ahora el tsconfig.json.


Angular 1 no viene con definiciones de tipo incorporadas. Esto significa que si queremos comprobar los tipos para las llamadas que hagamos a la api de Angular 1 debemos instalar las definiciones de tipo por separado. Para eso vamos a utilizar el gestor de definición typescript (tsd). Primero debemos comprobar que lo tenemos instalado de forma global.


Ahora vamos a añadir las dependencias, esto creará un directorio typings en el proyecto y añadirá los archivos que le solicitemos.


Cómo puedes ver, instalamos angular, angular-route y angular-resource, estos van a ser los recursos que vamos a necesitar en nuestro proyecto.

Abre el archivo app/index.html y modifica el código por el siguiente.


Las diferencias con la versión anterior son varias, eliminamos la directiva ng-app, más adelante veremos el motivo, eliminamos las dependencias de todos los archivos de nuestra aplicación, de eso se encargará el módulo System, el resto sigue siendo exactamente igual.

Generación automática de código javascript

En este punto necesitamos empezar a renombrar los archivos .js a .ts, pero System no va a buscar archivos .ts, sino .js, para ello, debemos dejar una terminal corriendo en la raíz del proyecto con el siguiente comando.


Ahora, cada vez que actualicemos código en un archivo .ts, el compilador se encargará de generar el .js y el módulo System será capaz de utilizarlo.

Ahora debemos renombrar el archivo app/js/app.module.js por app.module.ts, una vez hecho, ábrelo y añade las siguientes lineas al principio del mismo para añadir las referencias que vamos a necesitar.


Vamos a empezar por importar nuestro filtro ubicado en app/js/core/movie.filter.js, cambia la extensión a .ts y modifica el código por el siguiente para que lo podamos importar en el módulo movie.core.


Ahora debemos hacer lo mismo con nuestra factoría, alojada en app/js/core/movie.factory.js, recuerda cambiar la extensión a .ts.


Cómo puedes ver, utilizamos $inject para inyectar $resource, debemos hacerlo así ya que lo necesitamos durante el proceso de migración.

Modificar nuestra directiva no es más complejo, simplemente debemos hacer lo mismo, pero en esta ocasión con el archivo ubicado en app/js/core/movie.directive.js.


Finalmente, y antes de empezar con cada uno de los módulos de nuestra aplicación, debemos actualizar el archivo app/js/core/movie.core.js, cambiamos la extensión y modificamos el código por el siguiente.


En este punto nuestro módulo movie.core ya tiene disponible la factoría Movie, el filtro customSeparator y la directiva movieTemplate, otra cosa importante es ver cómo estamos exportando el módulo movie.core para que sea utilizado más adelante en el módulo principal de la aplicación, app/js/app.module.js en este momento.

Ahora debemos modificar los módulos que representan al listado de películas y a su detalle, vamos a comenzar modificando el controlador alojado en app/js/movie_detail/movie_detail.controller.js, cambiamos la extensión y modificamos el código por el siguiente.


Y hacemos lo mismo con el módulo encargado de manejar este controlador alojado en app/js/movie_detail/movie_detail.module.js.


Cómo puedes ver, simplemente importamos el controlador MovieDetailCtrl y lo añadimos al módulo movie.detail.

Ahora tenemos que hacer exactamente lo mismo con el módulo que maneja el listado de películas, así que abrimos el archivo app/js/movie_list/movie_list.controller.js, cambiamos la extensión por .ts y modificamos el código por el siguiente.


Y modificamos también el módulo correspondiente.


Si te has fijado, durante todo este proceso, al ejecutar el comando npm run tsc el compilador ha ido generando los archivos .js y .js.map por cada .ts que hemos creado, eso es lo que utiliza el módulo System para entender nuestro código.

Ahora ya sólo necesitamos modificar el archivo app/js/app.module.js, aquí es donde importamos nuestros módulos y el encargado de lanzar la aplicación, así que cambia la extensión y modifica el código por el siguiente.


Y con eso ya tenemos una aplicación construida en Angular 1 utilizando typescript completamente funcional, para comprobar esto, simplemente debes ejecutar el siguiente comando y visitar http://localhost:8888/app/index.html#/movies.


Descargar el proyecto migrado a typescript.


Curso de Angular 2 con Typescript

Llegados a este punto estamos en el punto intermedio en lo que respecta migrar de Angular 1 a Angular 2, ya tenemos nuestra aplicación actualizada y trabajando con typescript a medias, ahora es el momento de convertir nuestra aplicación en una aplicación híbrida, es decir, utilizar Angular 1 y Angular 2 en la misma aplicación, para ello tenemos a nuestra disposición el módulo UpgradeAdapter, el cuál nos permite realizar este proceso.

Lo primero que debemos modificar es nuestro archivo package.json para instalar las dependencias de Angular 2.


En este punto ejecuta el siguiente comando para poder hacer la instalación.


Ahora abre el archivo index.html y haz que tenga el siguiente aspecto, simplemente añadimos las nuevas dependencias necesarias para trabajar con Angular 2 y su proceso de migración.


Cómo puedes ver, la idea del proceso, aparte de migrar de Angular 1 a Angular 2 es manejar todas las dependencias con npm, no es mala idea.

Ahora debemos abrir el archivo tsconfig.json y añadir la siguiente línea a la propiedad compilerOptions.


Cómo dice la guía de migración de Angular 1 a Angular 2, llegados a este punto no es necesario instalar o hacer referencia a las definiciones de tipo en nuestro código, Angular 2 ya los trae incluidos. Por eso añadimos la anterior linea al archivo tsconfig, para que sepa que debe buscar estas definiciones de Angular 2 en el package que hemos instalado con el comando npm.

Añadir el adaptador de Angular 2 para aplicaciones híbridas

Llegados a este punto, necesitamos sí o sí añadir el módulo UpgradeAdapter, el cuál hará lo necesario para hacer que nuestra aplicación funcione con trozos de Angular 1 y Angular 2, para ello, crea un archivo en app/js/core/ llamado upgrade_adapter.ts y añade el siguiente código.


El código anterior por si sólo no hace nada, así que abre el archivo app/js/app.module.ts y añade al inicio las dos siguientes líneas.


Y al final del archivo modificamos.


Por


Añadimos el provider HTTP_PROVIDERS a nuestra aplicación y lanzamos la app haciendo uso del upgradeAdapter.

Crear el servicio Movies

En la aplicación con Angular 1 utilizabamos la factoría $resource, vamos a modificar eso, así que crea un archivo en app/js/core/ llamado Movies.ts y vamos a añadir el siguiente código, el cuál se encargará de obtener los datos del archivo .json.

Registrar nuestro servicio en Angular 2

Ya que tenemos nuestro servicio implementado, vamos a ver cómo utilizarlo con el adaptador UpgradeAdapter de Angular 2, para ello, modifica el código de app/js/core/core.module.ts por el siguiente.


Para poder utilizar nuestro servicio Movies en el controlador app/js/movie_detail/movie_detail.controller.ts vamos a modificar tanto su nombre cómo su contenido, así que renombra el archivo por MovieDetail.ts y modifica el código por el siguiente.


Varias cosas pasan en este archivo, importamos Component, Inject de angular2/core, importamos la clase Movies y la interfaz Movies y algo llamado SingleMovie, ésta es nuestra directiva, sí sí, la que teníamos en Angular 1, ahora debemos adaptarla para que trabaje en Angular 2.

Otra cosa muy interesante es ver que estamos inyectando en el constructor de la clase $routeParams y $location, creo que no necesitan ninguna explicación, pero sí que debemos hacer una modificación en el archivo app/js/app.module.ts, así que abre el archivo y vamos a añadir un par de lineas al final para que este componente funcione perfectamente.


Cómo ya hemos dicho, estamos en el proceso de crear una aplicación híbrida formada por Angular 1 y Angular 2, de esto se trata.

Ahora vamos a abrir el archivo app/js/movie_detail/movie_detail.html y vamos a modificar el código anterior por el que nos ofrece Angular 2, algo interesante y necesario en muchos casos será el uso del operador elvis (?), esto es asi porque en la primera carga del componente la película que hemos solicitado todavía no está disponible, de otra forma no funcionará.


Finalmente sólo nos queda modificar el módulo del componente MovieDetail, así que ábrelo y modifica el código por el siguiente.


Ya hemos convertido nuestro controlador en un componente de Angular 2 y somos capaces de utilizarlo, el problema es que faltan algunas dependencias que debemos resolver, la primera es el componente que hemos inyectado en MovieDetail con la linea.


Así que vamos a crear un nuevo directorio dentro de js/ llamado single_movie y crea un archivo llamado SingleMovie.ts con el siguiente contenido, recordemos que esto anteriormente era nuestra directiva, la que mostraba el detalle de cada película.


Y un archivo en js/single_movie/ llamado singlemovie.html con el siguiente contenido.


Perfecto, ya tenemos definido el componente SingleMovie, pero ahora ha aparecido el Pipe MovieFilterPipe, el cuál utilizamos con la siguiente línea de nuestro componente e importamos de ../movie_list/MovieListPipe.


Crear este Pipe es muy sencillo, simplemente crea un archivo en app/js/movie_list/ llamado MovieListPipe.js y añade el siguiente código.


Ahora debemos hacer el mismo proceso con el listado de las películas, así que renombra el archivo app/js/movie_detail/movie_list.controller.ts por MovieList.ts y reemplaza el código por el siguiente.


Abrimos el archivo js/movie_list/movie_list.html y modificamos el código por el siguiente.


Finalmente sólo nos resta hacer lo mismo con su módulo.


Llegados a este punto, sólo nos queda modificar nuestro archivo js/app.module.ts, con ésto habremos finalizado toda la migración excepto las rutas, pero eso te garantizo que una vez sepas cómo funciona Angular 2 no te será ningún problema.


Ahora debes tener una aplicación híbrida completamente funcional, lo único que falta es eliminar la dependencia de las rutas, convertir los módulos en componentes y realizar la carga de las dependencias de forma correcta.

Descargar el proyecto híbrido.

Migrar rutas de Angular 1 a Angular 2

Ya que tenemos una aplicación híbrida, debemos hacer el paso final para que nuestra aplicación trabaje al 100% con Angular 2, para ello, lo primero que debemos hacer es modificar el archivo index.html añadiendo la siguinete hoja de script antes del script que configurar System.


Ahora abre el archivo app.module.ts y modifica el código por el siguiente para que nuestra aplicación no tenga dependencia del módulo UpgradeAdapter.


Si te fijas, le hemos dicho a este componente que el selector será movie-app, así que abre de nuevo el archivo index.html y déjalo cómo el siguiente.


Cómo puedes ver, hemos eliminado todas las dependencias de Angular 1 y del módulo UpgradeAdapter, así que ya nos queda realmente poco.

Abre el archivo app/js/single_movie/SingleMovie.ts y modifica el código por el siguiente para utilizar el router de Angular 2.


Hacemos lo mismo con app/js/movie_list/MovieList.ts.


Y lo mismo con el archivo app/js/movie_detail/MovieDetail.ts.


Finalmente sólo nos queda eliminar todos los módulos de app/js/core/, app/js/movie_detail/ y app/js/movie_list/, de esta forma tenemos una aplicación 100% funcional con Angular 2 sin ninguna dependencia.


Descargar el proyecto finalizado


Curso de Angular 2 con Typescript