Subir archivos con Angular2
Subir archivos con Angular2

Si has trabajado con AngularJS en las versiones 1.x seguro que conoces la forma en la que podemos utilizar la inyección de dependencias.

La inyección de dependencia (DI) es un patrón de diseño que nos permite suministrar funcionalidades, services, providers, factories en el caso de AngularJS, a un componente en lugar de ser el propio componente el encargado de crearlas.

La inyección de dependencias en Angular 2 se puede llevar a cabo de forma bastante sencilla, pero debemos seguir algunos pasos más que en AngularJS 1.x si nuestra clase necesita de otras dependencias.

Para este propósito, Angular 2 pone a nuestra disposición @Injectable(), un decorador que se encarga de resolver las dependencias que necesitemos inyectar a otros componentes.

Inyección de dependencias en Angular 1.x

La inyección de dependencias en AngularJS se puede llevar a cabo de varias formas, el siguiente ejemplo crea un servicio y lo inyecta en un controlador el cuál debe resolver la dependencia $http.


De esta forma tan sencilla podemos utilizar la inyección de dependencias en AngularJS, en cambio, en Angular 2 debemos hacer alguna cosa más, veamos un ejemplo donde inyectamos una clase sin dependencias en Angular 2.

Inyección de dependencias en Angular 2


Cómo podemos ver, creamos la clase UserFactory y la inyectamos al constructor de la clase AppComponent, también debemos definir la propiedad providers del componente AppComponent y añadir al array la clase UserFactory.

Al no tener la clase UserFactory ninguna dependencia que resolver, es decir, el constructor no tiene dependencias, no debemos preocuparnos de nada más, todo debe funcionar perfectamente, ahora vamos a ver cómo resolver dependencias en Angular 2.


Primero debemos importar Http e Injectable, cómo puedes ver, antes de definir la clase Api debemos utilizar el decorador @Injectable(), esto es así ya que de otra forma nuestra clase no podrá ser inyectada al no ser capaz de resolver la dependencia Http.

Otra cosa interesante aunque no es el propósito de este tutorial es el uso del objeto Promise, una nueva funcionalidad de Ecmascript 6 la cuál nos ayuda a resolver funcionalidades asíncronas, aquí mucha más información.


Cómo puedes ver, para utilizar la clase Api debemos importar Api, hacer la inyección en la clase AppComponent y pasar a la propiedad providers tanto Api como HTTP_PROVIDERS, este último necesario para resolver la inyección de Http.

Pues así de sencillo es llevar a cabo la inyección de dependencias en Angular 2, cómo puedes ver, todo ha cambiado mucho, pero es prácticamente lo mismo que antes pero de forma más ordenada.