Introducción

En este ejemplo vamos a mostrar como consumir una api rest en angularjs aprovechando que el Inegi tiene una en línea. https://www.inegi.org.mx/servicios/catalogoUnico.html
La aplicación la vamos a llamar MexicoEstadistico2016 .La url que vamos a consumir es la siguiente: https://gaia.inegi.org.mx/wscatgeo/mgee/ que nos muestra los resultados en formato JSON pero esto es transparente para el desarrollador pero para el usuario final no significa nada ya que el no sabe que significan esos datos.
angular inegi
Como vemos en un método de tipo get que nos muestra todas las entidades estatales.

Comenzemos por el archivo index.html en el cual escribimos lo siguiente:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>México Estadistico 2016</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/app.css" rel="stylesheet"></link>
</head>
<body ng-app='myApp' ng-controller="mexicoEstadistico2016Controller">

<div class="generic-container">


<h1>México Estadístico 2016</h1>

<h3>Geoestadística estatal</h3>

<div class="panel panel-default">

         <div class="panel-heading"><span class="lead">Goestadística estatal</span></div>

<br>
<br>
<div class="form">

<input type="submit"  value="Obtener Datos estatales" class="btn btn-primary btn-sm" ng-click="obtenerDatos()" />


</div>

</div>

<div ng-if="datos.exist==1">
		
		<div class="panel panel-default">
                <!-- Default panel contents -->
              <div class="panel-heading"><span class="lead">Lista de Estados </span></div>
              <div class="tablecontainer">
                  <table class="table table-hover">
                      <thead>
                          <tr>
                              <th>Clave</th>
                              <th>Nombre</th>
                              <th>Nombre Abreviado</th>
                              <th>Población total</th>
                              <th>Población masculina</th>
                              <th>Población Femenina</th>
                              <th>Viviendas habitadas</th>
                          </tr>
                      </thead>
                      <tbody>
                      
                      
        
                      
                      
                      
                          <tr ng-repeat="p in datos.datos">
                              <td>{{p.cve_agee}}</td>
                              <td>{{p.nom_agee}}</td>
                              <td>{{p.nom_abrev}}</td>
                              <td>{{p.pob}}</td>
                              <td>{{p.pob_fem}}</td>
                              <td>{{p.pob_mas}}</td>
                              <td>{{p.viv}}</td>
                              
                              
                         </tr>
                      </tbody>
                  </table>
              </div>
          </div>
		
		
		
	</div>


</div>






<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="js/service/mexicoEstadistico2016Service.js"></script>
<script type="text/javascript" src="js/controller/mexicoEstadistico2016Controller.js"></script>


</body>
</html>



Creamos el directorio css y en en este directorio creamos el archivo app.css
@CHARSET "ISO-8859-1";
body, #mainWrapper {
	height: 70%;
	background-color:rgb(245, 245, 245);
}

body, .form-control{
	font-size:12px!important;
}

.floatRight{
	float:right;
	margin-right: 18px;
}

.has-error{
	color:red;
}

.formcontainer{
	background-color: #DAE8E8;
	padding: 20px;
}

.tablecontainer{
	padding-left: 20px;
}

.generic-container {
  width:80%;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #EAE7E7;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 30px black;
}

.custom-width {
    width: 80px !important;
}



Ahora creamos el directorio js y sobre este el directorio controller y el escrbimos el siguiente archivo mexicoEstadistico2016Controller.js
  
angular.module('myApp', ['mexicoEstadistico2016Service']);
 
angular.module('myApp').controller('mexicoEstadistico2016Controller', ['$scope','datoRequest',mexicoEstadistico2016Controller]);
function mexicoEstadistico2016Controller($scope, datoRequest) {
	$scope.datos={};
	$scope.obtenerDatos = function(){
		datoRequest.datos().success(function (data){
			$scope.datos=data; // Asignaremos los datos de todos los movimientos
			$scope.datos.exist=1;
			//$scope.saldo.exist=0;
			
		});
	}
	
}
  
  
  

En el directorio js creamos el directrio service y ahí escribimos el siguiente script mexicoEstadistico2016Service.js
 
  
angular.module('mexicoEstadistico2016Service', [])//Declaramos el modulo
	.factory('datoRequest', function($http) { //declaramos la factory
		var path = "https://gaia.inegi.org.mx/wscatgeo/mgee/";//API path
		
		return {
			//Login
			datos : function(){ //Retornara la lista de posts
				global = $http.get(path);
				return global;
			}
			
		}
	});
  
  
  
  
  
  
  

Corremos nuestro ejemplo esto lo que nos arroja:
angular inegi
Seleccionamos el botón que dice Obtener Datos Estatales angular inegi
ver ejemplo Descargar Código