Tutorial Angular: Consumiendo una Rest API con $http

Vamos a usar el módulo $http para hacer consultas AJAX a una REST Api.

Rodríguez Patiño, Eduardo
2020-09-27 | 12,672 lecturas

En esta nueva entrada vamos a consumir una Rest API llamada JsonPlaceHolder, la cual nos da una API para realizar pruebas.

¿Que vamos hacer?

Vamos a listar, registrar y eliminar. Pero, el registra y eliminar es un FAKE, es decir no lo va hacer realmente solo han habilitado el recurso para realizar la petición pero realmente no registra ni elimina, si leen la documentación se darán cuenta de esto.

Note: the resource will not be really created on the server but it will be faked as if.

 En este el siguiente enlace va a encontrar la documentación de como usar la API.

https://github.com/typicode/jsonplaceholder#how-to

Comenzamos

El ejemplo que vamos a realizar es muy parecido al realizado en Tutorial de Angular: Routing + CRUD, la diferencia que ahora vamos a trabajar con una Rest API y vamos hacer uso del módulo $http para realizar peticiones XHR (Ajax). No voy a copiar todo el código, solo los aspectos más importantes, en nuestro caso el controlador y la vista porque al final ustedes van a poder descargar el ejemplo para que lo pongan en práctica.

Controlador

var demoControllers = angular.module('demoControllers', []);

demoControllers.controller('DemoListadoCtrl', ['$scope', '$http', function ($scope, $http) {
    function cargarData() {
        $http.get('http://jsonplaceholder.typicode.com/posts').then(function (r) {
            $scope.model = r.data;
        })
    }

    cargarData();

    $scope.registrar = function () {
        var data = {
            title: $scope.title,
            body: $scope.body,
            userId: 1
        };

        $http.post('http://jsonplaceholder.typicode.com/posts', data).then(function (r) {
            //cargarData();

            $scope.title = null;
            $scope.body = null;
        })
    }

    $scope.retirar = function (id) {
        if (confirm('¿Estas seguro de eliminar esta publicación?')) {
            $http.delete('http://jsonplaceholder.typicode.com/posts/' + id).then(function (r) {
                //cargarData();
            })
        }
    }
}]);

demoControllers.controller('DemoVerCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    $http.get('http://jsonplaceholder.typicode.com/posts/' + $routeParams.id).then(function (r) {
        $scope.model = r.data;
    })
}]);

Es bastante simple esto, debemos inyectar el módulo $http para realizar las peticiones XHR a la Api de Json Place Holder. Segun la API, para la petición que me permite listar todas las publicaciones debemos hacer uso del método GET, por lo tanto usamos elatajo de $http para usar peticiones GET.

 $http.get()

Si quisieramos usar otro tipo de método, pues podemos usar el $http.post(), $http.put(), recomiendo leer la documentación en el siguiente enlace.

listado.html

Este mostrará las útlmas publicaciones

<h2 class="page-header">Publicaciones</h2>

<a href="#/crud" class="btn btn-default btn-block">
    Registrar nueva publicación
</a>

<hr />

<div class="list-group">
    <div class="list-group-item">
        <form  ng-submit="registrar()">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Titulo" ng-model="title" ng-required="true">
            </div>
            <div class="form-group">
                <textarea class="form-control" placeholder="Mensaje" ng-model="body" ng-required="true" rows="2"></textarea>
            </div>
            <button type="submit" class="btn btn-default">Agregar</button>
        </form>
    </div>
    <div class="list-group-item" ng-repeat="m in model">
        <h4 class="list-group-item-heading">
            <button class="btn btn-danger btn-xs pull-right" ng-click="retirar(m.id)" type="button">Retirar</button>
            <a href="#/ver/{{ m.id }}">
                {{ m.title }}
            </a>
        </h4>
        <p class="list-group-item-text">{{ m.body }}</p>
    </div>
</div></pre>

<h4>ver.html</h4>

<p>Esté visualizara la publicación seleccionada.</p>

<pre class="html " data-pbcklang="html" data-pbcktabsize="4">
<h2 class="page-header">{{ model.title }}</h2>

<p>{{ model.body }}</p>

<a href="#/" class="btn btn-default btn-block">Regresar</a>