angular-js

Tutorial: AngularJs, crear rutas y llamar a una api desde un controlador

En este tutorial, crearemos un proyecto que funcionará con ng-routes para acceder a diferentes vistas al estilo Ajax y además consumirá una API (api.mercadopublico.cl) para desplegar información desde un controlador utilizando el método $http.

Para descargar el proyecto pueden acceder a repositorio Git

Paso 1: Crear nuestro layout en index.html principal e insertar ng-app

  • Línea 3: ng-app=“myApp” para utilizar angularjs como aplicación principal
  • Línea 7 y 8: librerías css tales como bootstrap y font-awesome
  • Línea 10 y 11: librerías js, angularjs y ng-routes
  • Línea 12: agregamos script.js (librería creada posteriormente que contendrá el código desarrollado en angularjs

Paso 2: Agregar  ng-view en nuestro body para utilizar rutas

Además agregaremos una barra superior (nav) que tendrá las rutas de nuestras diferentes rutas

Paso 3: Crear script.js y programar en angularjs para llamar a las vistas y sus respectivos controladores

  • Línea 1: Creamos nuestra app en angular (siendo asignada en index.html en línea 3) y agregamos la librería ng-route, para utilizar rutas en nuestra aplicación
  • Línea 4 – 22: Creamos la función que nos permitirá configurar nuestras rutas. Cada ruta tiene asociada una vista y un controlador
  • Línea 25 – 51: Declaramos nuestros controladores para cada vista

El controlador “licitacionesController” hace uso del servicio $http, este nos permite obtener información desde distintos host, webservices y Apis. en este caso hacemos un llamado a una api de mercado público de chile y nos retornará un json de información :

El json lo guardamos en un $scope, para poder visualizarlo en la vista del controlador

Paso 4: Crear las vistas

En este ejemplo solo crearemos la vista de licitaciones.html ya que es la más compleja y está asociada a nuestro controlador que llamó a la Api.

Creamos una carpeta en raiz del proyecto llamada “vistas” y crearemos un archivo llamado licitaciones.html (es el archivo que se llama en nuestra función de rutas).

De esta forma se da por finalizado el tutorial de rutas en angularjs