Angular 2 con javascript
Angular 2 con javascript

También es posible desarrollar aplicaciones utilizando el framework Angular 2 con javascript, no es necesario hacerlo con typescript, pero la verdad que sí es muy recomendable por todo lo que nos ofrece, tipado, orientación a objetos, clases, módulos, interfaces etcétera.

En este tutorial vamos a ver cómo podemos crear una aplicación utilizando Angular 2 con javascript, crearemos componentes, pipes, los antiguos filtros y directivas.

Enlaces que te pueden interesar:

Primer proyecto en Angular 2 con Javascript

Lo primero que vamos a hacer es crear la siguiente estructura con sus archivos excepto el directorio node_modules que lo crearemos desde la terminal.

angular 2 con javascript

Para instalar las dependencias primero debemos modificar el archivo package.json, así que ábrelo y añade el siguiente código.


Así instalamos todas las dependencias y un servidor para lanzar nuestra aplicación.

Ahora abre la terminal situado en tu proyecto y ejecuta el siguiente comando para crear el directorio node_modules con todas las dependencias del package.json.


Abre el archivo index.html y añade el siguiente código.


Simplemente cargamos las dependencias en la sección head del documento y añadimos un tag app, aquí será donde nuestra app se muestre.

Primer componente en Angular 2 con Javascript

Para definir nuestro componente simplemente abre el archivo app/app.js y añade el siguiente código.


Creamos una función autoejecutable y le pasamos window.app, si existe lo utilizamos y sino lo inicializamos como un objeto vacío.

Para crear un componente en Angular 2 con javascript simplemente debemos utilizar el objeto ng, en este caso ng.core.Component, ya que Component está en el objeto core.

La lógica asociada a este componente se define con .Class y le debemos pasar un objeto con propiedades y métodos, cómo puedes también podemos definir un constructor.

Ejecutar una aplicación en Angular 2

Para ejecutar nuestra aplicación y poder visualizarla en el navegador, abre el archivo app/boot.js y añade el siguiente código.


Como ya está disponible el objeto window.app aquí lo utilizamos y añadimos un evento en el DOMContentLoaded con el bootstrap de Angular 2, ¿qué quiere decir esto?, que cuando el documento haya cargado nuestra aplicación será ejecutada.

En este caso, en lugar de utilizar ng.core, utilizamos ng.platform.browser ya que el método bootstrap se encuentra en ese objeto.

Para mostrar nuestra aplicación en el navegador y que se actualice de forma automática con cada cambio simplemente ejecuta el siguiente comando en la terminal, el cuál está definido en el archivo package.json.


Si todo ha ido bien se habrá abierto en el navegador la url http://localhost:3000/ y podrás ver el contenido de nuestro componente.

Pipes en Angular 2 con Javascript

Ahora vamos a crear un Pipe en Angular 2, un Pipe no es más que un filtro que nos permite aplicar cierta lógica sobre algo, un objeto, una variable etcétera, en este caso vamos a separar a los usuarios por una coma y los vamos a devolver como un string, así que modifica el archivo app/app.js.


Al igual que con un componente, los pipes también están en ng.core, y así de sencillo es definir y utilizar uno.

Componentes que utilizan Componentes (Directivas)

Si has trabajado con Angular 1, sabrás que tenemos directivas y éstas pueden ser utilizadas para extender el dom, en Angular 2 tenemos los componentes para ese propósito, así que vamos a crear uno que muestre a los usuarios y podamos utilizarlo en el componente AppComponent, para ello vamos a modificar el archivo app/app.js de nuevo.


Simplemente hemos añadido el componente app.UserComponent, le hemos definido un input y lo hemos utilizado en el componente app.AppComponent, primero lo añadimos a la propiedad directives.


Y después lo utilizamos en la template.


Sólo nos queda definir el contenido del archivo users.html que estamos utilizando en el componente app.UserComponent con templateUrl.


Y eso es todo, así de sencillo es utilizar Angular 2 con javascript, si conoces Angular 2 con Typescript no te costará nada y tendrás todos los beneficios de un lenguaje orientado a objetos.

Curso de Angular 2 con typescript