Desarrollo de Aplicaciones Web con AngularJS – HTTP

Desarrollo de Aplicaciones Web con AngularJS HTTP

Ejemplo en Vivo: http://angularjshttp.herokuapp.com/#/http

angularJS Http

Introduccion

El uso de ajax en nuestras aplicaciones cliente web es muy importante puesto que con el uso de las tecnologias relacionadas a ajax se puede acelerar los procesos y ejecucion de scripts de javascript basados en datos provenientes de las fuentes directas de datos de servidores remotos de datos como pueden ser aplicaciones web basadas en php, python, csharp u otro lenguaje de backend.

AngularJS Ajax – HTTP

$http es un servicio de angular para lectura de datos de un servidor remoto.

AngularJS $http

Para AngularJS, $http es un servicio del nucleo de angularjs para lectura de datos de servidores web.
Se hace uso de la funcion $http.get(url) para la lectura de datos del servidor web.

var app = angular.module(‘myApp’, []);
app.controller(
    ‘datosCtrl’,
    function($scope, $http) {
        $http.get(“/nombres/data”)
            .then(
                function(response) {
                    $scope.names = response.data.records;
                }
            );
        return;
    }
);

Explicacion de Ajax con $http

  • La aplicacion de AngularJS esta definida por la propiedad ng-app.
  • La aplicacion ejecuta dentro de un controlador.
  • La directiva ng-controller nombra a un objeto controlador.
  • La funcion datosCtrl es un objeto constructor de Javascript.
  • AngularJS invocara el controlador con un objeto $scope y un objeto $http.
  • $scope es el objeto de la aplicacion (propietario de las variables y funciones de la aplicacion).
  • $http es un objeto XMLHttpRequest object para los pedidos de datos remotos.
  • $http.get() lee datos en formato JSON de la direccion web proveida.
  • On success, el controlador crea una propiedad  (nombres) en el scope, con datos JSON del servidor.

Escrito por Christian Portilla Pauca

Video explicativo

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s