Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Tutorial Angular: Consumiendo una Rest API con $http
Actualizado el 09 Marzo, 2016 y leído 4,493 veces
Calificación: 6.67 / 10

Tutorial Angular: Consumiendo una Rest API con $http

Anexsoft

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>

ver.html

Esté visualizara la publicación seleccionada.

<h2 class="page-header">{{ model.title }}</h2>

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

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

 

¡Adquiera ya!

  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.