AJAX es la forma abreviada de JavaScript y XML asíncronos. AJAX fue diseñado principalmente para actualizar partes de una página web, sin recargar toda la página.
La razón para diseñar esta tecnología fue reducir la cantidad de viajes de ida y vuelta que se realizaban entre el cliente y el servidor y la cantidad de actualizaciones de página completa que solían tener lugar cada vez que un usuario requería cierta información.
AJAX permitió que las páginas web se actualizaran de forma asincrónica mediante el intercambio de pequeñas cantidades de datos con el servidor detrás de escena. Esto significó que era posible actualizar partes de una página web, sin recargar toda la página.
Muchas aplicaciones web modernas siguen esta técnica para actualizar la página u obtener datos del servidor.
En este tutorial, aprenderá:
- Interacciones de alto nivel con servidores que utilizan $ resource
- Interacciones de servidor de bajo nivel con $ http
- Obtener datos de un servidor que ejecuta SQL y MySQL
Interacciones de alto nivel con servidores que utilizan $ resource
Angular proporciona dos API diferentes para manejar solicitudes Ajax. Son
- $ recurso
- $ http
Veremos la propiedad "$ resource" en Angular, que se usa para interactuar con servidores a un alto nivel.
Cuando hablamos de interactuar a un nivel superior, significa que solo nos preocuparemos por lo que el servidor tiene para ofrecer en cuanto a funcionalidad y no por lo que hace exactamente el servidor en detalle con respecto a esta funcionalidad.
Por ejemplo, si el servidor alojaba una aplicación que mantiene la información de los empleados de una determinada empresa, el servidor podría exponer la funcionalidad a clientes como GetEmployeeDetails, SetEmployeeDetails, etc.
Entonces, a un alto nivel, sabemos lo que pueden hacer estas dos funciones y podemos invocarlas usando la propiedad $ resource. Pero entonces no sabemos exactamente los detalles de las "funciones GetEmployeeDetails" y las "funciones SetEmployeeDetails", y cómo se implementa.
La explicación anterior explica lo que se conoce como arquitectura basada en REST.
- REST se conoce como Transferencia de estado representacional, que es una arquitectura que se sigue en muchos sistemas modernos basados en la web.
- Significa que puede usar los verbos HTTP normales de GET, POST, PUT y DELETE para trabajar con una aplicación basada en web.
Supongamos que tenemos una aplicación web que mantiene una lista de eventos.
Si quisiéramos acceder a la lista de todos los eventos,
- La aplicación web puede exponer una URL como http: // ejemplo / eventos y
- Podemos usar el verbo "GET" para obtener la lista completa de eventos si la aplicación sigue una arquitectura basada en REST.
Entonces, por ejemplo, si hubo un evento con un ID de 1, entonces podemos obtener los detalles de este evento a través de la URL. http: // ejemplo / eventos / 1
¿Qué es el objeto $ resource
El objeto $ resource en Angular ayuda a trabajar con servidores que sirven aplicaciones en una arquitectura basada en REST.
La sintaxis básica de la declaración @resource junto con las diversas funciones se dan a continuación
Sintaxis de la declaración @resource
var resource Object = $resource(url);
Una vez que tenga el resourceObject a mano, puede usar las siguientes funciones para realizar las llamadas REST requeridas.
1. get ([params], [success], [error]): se puede utilizar para realizar la llamada GET estándar.
2. save ([params], postData, [success], [error]): se puede utilizar para realizar la llamada POST estándar.
3. consulta ([params], [éxito], [error]): se puede utilizar para realizar la llamada GET estándar, pero se devuelve una matriz como parte de la respuesta.
4. remove ([params], postData, [success], [error]) - Esto puede usarse para realizar la llamada estándar DELETE.
En todas las funciones que se indican a continuación, el parámetro 'params' se puede utilizar para proporcionar los parámetros necesarios, que deben pasarse en la URL.
Por ejemplo,
- Supongamos que pasa un valor de Topic: 'Angular' como un 'param' en la función get como
- get (' http: // ejemplo / eventos ', '{Tema:' Angular '}')
- La URL http: // example / events? Topic = Angular se invoca como parte de la función get.
Cómo usar la propiedad $ resource
Para utilizar la propiedad $ resource, se deben seguir los siguientes pasos:
Paso 1) El archivo "angular-resource.js" debe descargarse del sitio Angular.JS y debe colocarse en la aplicación.
Paso 2) El módulo de la aplicación debe declarar una dependencia del módulo "ngResource" para poder utilizar el recurso $.
En el siguiente ejemplo, estamos llamando al módulo "ngResource" desde nuestra aplicación 'DemoApp'.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Paso 3) Llamar a la función $ resource () con su punto final REST, como se muestra en el siguiente ejemplo.
Si hace esto, entonces el objeto $ resource tendrá la capacidad de invocar la funcionalidad necesaria expuesta por los puntos finales REST.
El siguiente ejemplo llama a la URL del punto final: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
En el ejemplo anterior se están haciendo las siguientes cosas
-
Al definir la aplicación Angular, se está creando un servicio usando la declaración 'DemoApp.services' donde DemoApp es el nombre que se le da a nuestra aplicación Angular.
-
El método .factory se utiliza para crear los detalles de este nuevo servicio.
-
'Entrada' es el nombre que le damos a nuestro servicio, que puede ser cualquier nombre que desee proporcionar.
-
En este servicio, estamos creando una función que llamará a la API $ resource
-
$ recurso ('/ ejemplo / Evento /: 1).
La función $ resource es un servicio que se utiliza para llamar a un punto final REST. El punto final REST es normalmente una URL. En la función anterior, estamos usando la URL (/ ejemplo / Evento /: 1) como nuestro punto final REST. Nuestro punto final REST (/ ejemplo / Evento /: 1) denota que hay una aplicación Evento en nuestro "ejemplo" del sitio principal. Esta aplicación de eventos se desarrolla utilizando una arquitectura basada en REST.
-
El resultado de la llamada a la función es un objeto de clase de recurso. El objeto de recurso ahora tendrá las funciones (get (), query (), save (), remove (), delete ()) que se pueden invocar.
Paso 4) Ahora podemos usar los métodos que se devolvieron en el paso anterior (que son get (), query (), save (), remove (), delete ()) en nuestro controlador.
En el siguiente fragmento de código, usamos la función get () como ejemplo
Veamos el código que puede hacer uso de la función get ().
angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});
En el paso anterior,
- La función get () en el fragmento anterior emite una solicitud GET a / example / Event /: 1.
- El parámetro: 1 en la URL se reemplaza por $ scope.id.
- La función get () devolverá un objeto vacío que se rellena automáticamente cuando los datos reales provienen del servidor.
- El segundo argumento para get () es una devolución de llamada que se ejecuta cuando llegan los datos del servidor. La salida posible de todo el código sería un objeto JSON que devolvería la lista de eventos expuestos del sitio web de "ejemplo".
A continuación se muestra un ejemplo de lo que se puede devolver.
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Interacciones de servidor de bajo nivel con $ http
El $ http es otro servicio de Angular JS que se utiliza para leer datos de servidores remotos. La forma más popular de datos que se leen de los servidores son los datos en formato JSON.
Supongamos que tenemos una página PHP ( http: //example/angular/getTopics.PHP ) que devuelve los siguientes datos JSON
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Veamos el código AngularJS usando $ http, que se puede usar para obtener los datos anteriores del servidor
En el ejemplo anterior
- Estamos agregando el servicio $ http a nuestra función Controller para que podamos usar la función "get" del servicio $ http.
- Ahora estamos usando la función get del servicio HTTP para obtener los objetos JSON de la URL http: // example /angular/getTopics.PHP
- Basado en el objeto 'respuesta', estamos creando una función de devolución de llamada que devolverá los registros de datos y, posteriormente, los almacenaremos en el objeto $ scope.
- Luego podemos usar la variable $ scope.names del controlador y usarla en nuestra vista para mostrar los objetos JSON en consecuencia.
Obtener datos de un servidor que ejecuta SQL y MySQL
Angular también se puede usar para obtener datos de un servidor que ejecuta MySQL o SQL.
La idea es que si tiene una página PHP que se conecta a una base de datos MySQL o una página Asp.Net que se conecta a una base de datos del servidor MS SQL, entonces debe asegurarse de que tanto la página PHP como la página ASP.Net muestren los datos en formato JSON.
Supongamos que tenemos un sitio PHP ( http: // ejemplo /angular/getTopics.PHP ) que sirve datos de una base de datos MySQL o SQL.
Paso 1) El primer paso es asegurarse de que la página PHP tome los datos de una base de datos MySQL y sirva los datos en formato JSON.
Paso 2) Escriba el código similar que se muestra arriba para usar el servicio $ http para obtener los datos JSON.
Veamos el código AngularJS usando $ http que se puede usar para obtener los datos anteriores del servidor
Paso 3) Renderice los datos en su vista usando la directiva ng-repeat.
A continuación, usamos la directiva ng-repeat para revisar cada uno de los pares clave-valor en los objetos JSON devueltos por el método "get" del servicio $ http.
Para cada objeto JSON, mostramos la clave que es "Nombre" y el valor es "Descripción".
{{x.Name}} {{x.Description}}
Resumen:
- Hemos echado un vistazo a lo que es una arquitectura RESTFUL, que no es más que una funcionalidad expuesta por aplicaciones web basadas en los verbos HTTP normales de GET, POST, PUT y DELETE.
- El objeto $ resource se usa con Angular para interactuar con las aplicaciones web RESTFUL a un alto nivel, lo que significa que solo invocamos la funcionalidad expuesta por la aplicación web, pero no nos molestamos en cómo se implementa la funcionalidad.
- También analizamos el servicio $ http que se puede utilizar para obtener datos de una aplicación web. Esto es posible porque el servicio $ http puede funcionar con aplicaciones web a un nivel más detallado.
- Debido a la potencia del servicio $ http, se puede utilizar para obtener datos de MySQL o MS SQL Server a través de una aplicación PHP. Luego, los datos se pueden representar en una tabla usando la directiva ng-repeat.
