Introducción

Se pretende consumir el webservice del Inegi:
https://www.inegi.org.mx/servicios/catalogoUnico.html
Se requiere mostrar la información por estado de la república y mostrar un pequeño gráfico que muestre el porcentaje de hombres y mujeres que habitan en dicho estado y muestre el reporte con fpdf y phplot.

Requisitos

Lo primero que tenemos es sacar la url del webservice que deseamos consumir el cual es el siguiente:
https://gaia.inegi.org.mx/wscatgeo/mgee/
al consultar la api se ve de la siguiente manera
android inegi

index.html

           <!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>México Estadistico report</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="mexicoEstadisticoController">

<div class="generic-container">


<h1>México Estadístico Report</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>
                              <th>>Generar reporte pdf</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>
                               <td><a href="pdf.php?pobFem={{p.pob_fem}}&pobMas={{p.pob_mas}}&estado={{p.nom_agee}}&poblacion={{p.pob}}&vivienda={{p.viv}}"
                               class="btn btn-primary btn-sm" target="_blank" >Generar PDF</a></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/mexicoEstadisticoService.js"></script>
<script type="text/javascript" src="js/controller/mexicoEstadisticoController.js"></script>


</body>
</html>

Crear la carpeta js

Vamos crear un carpeta js donde ahí agregaremos a su vez una carpeta llamada service ahora creamos el archivo javascript mexicoEstadisticoService.js
    
        angular.module('mexicoEstadisticoService', [])//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;
			}
			
		}
	});

Siguiente