Desarrollo / Tecnología / Tutoriales

Angular. Entornos (environments)

By ercobo | Published 25 mayo, 2017 | No hay comentarios

angularjs · desarrollo · Programación · Tecnología · Tutorial · Web

Antes de continuar con el desarrollo de angular, hemos de colocar un par de cosas.

Hasta este momento hemos estado desarrollando la parte de angular de forma local, es decir, todo funcionaba dentro de la propia app e incluso al compilarla para tenerla en el servidor de producción las rutas y demas factores hacían referencia a rutas «locales».

Pero para poder empezar a consumir los datos de la api que estamos desarrollando en paralelo en las entradas referidas a Laravel, hemos de comenzar a separar los entornos de «desarrollo» y de «producción».

En angular, al crear un proyecto, se habrá creado una carpeta y unos archivos llamados «environment», que serán los que usaremos para poder definir las variables de entorno que vayamos necesitando para el proyecto.

Lo normal es encontrarnos con dos archivos, uno para el entorno de desarrollo, «environment.ts», y otro para producción, «environment.prod.ts».

En este momento la unica variable que nos va a hacer falta es la url de nuestra api, por lo que modificaremos los archivos para incluir lo siguiente:

Cambiando «urltoapi» a los valores adecuados para nuestros servidores.

Así que, una vez hechos estos cambios, hasta ahora utilizabamos

Para construir la aplicación, sin embargo a partir de ahora le indicaremos que use el entorno de producción. Sin parámetros usará el archivo «environment.ts» que es el de desarrollo. De esta forma el comando resultante es:

Y si ademas queremos minimizar los archivos para que queden compilados de manera que ocupen lo mínimo posible usaremos:

En estos archivos podremos colocar las variables que necesitemos, a la hora de usarlas será necesario incluir en nuestros archivos de servicios, controladores, etc… el siguiente codigo:

Así podremos utilizar las variables definidas en estos archivos de la forma usual.