AngularJS AJAX Llamada usando $resource, $http [Ejemplo]

AJAX es la forma corta de JavaScript asincrónico y XML. 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 era reducir el número de viajes de ida y vuelta que se realizaban entre el cliente y el servidor y el número de actualizaciones de página completas que se realizaban cuando un usuario requería cierta información.

AJAX permitió que las páginas web se actualizaran de forma asíncrona mediante el intercambio de pequeñas cantidades de datos con el servidor detrás de las escenas. Esto significaba que era posible actualizar partes de una página web, sin recargar toda la página.

Muchas aplicaciones web modernas en realidad siguen esta técnica para actualizar la página o obtener datos del servidor.

En este tutorial, usted aprenderá –

Interacciones de alto nivel con servidores que utilizan $resource

Angular proporciona dos API diferentes para manejar solicitudes Ajax. Ellos son

  • $recurso
  • $http

Vamos a ver la propiedad “$resource” en Angular, que se utiliza para interactuar con servidores a un nivel alto.

Cuando hablamos de interactuar a un nivel superior, significa que sólo nos preocuparemos de lo que el servidor tiene que ofrecer en cuanto a la funcionalidad y no de lo que el servidor hace exactamente en detalle con respecto a esta funcionalidad.

Por ejemplo, si el servidor alojaba una aplicación que mantiene la información del empleado de una determinada empresa, el servidor podría exponer la funcionalidad a clientes como GetEmployeeDetails, SetTemploYeeDetails, etc.

Por lo tanto, en un nivel alto, sabemos lo que estas dos funciones pueden hacer, y podemos invocarlas usando la propiedad $resource. Pero entonces no sabemos exactamente los detalles de las funciones “GetEmployeeDetails” y “SetTemploYeeDetails”, y cómo se implementa.

La explicación anterior explica lo que se conoce como una arquitectura basada en REST.

  • REST se conoce como Transferencia Representacional del Estado, que es una arquitectura seguida en muchos sistemas modernos basados en la web.
  • Esto significa que puede utilizar los verbos HTTP normales de GET, POST, PUT y DELETE para trabajar con una aplicación basada en web.

Así que supongamos que tenemos una aplicación web que mantiene una lista de Eventos.

Si quisiéramos llegar a la lista de todos los eventos,

  • La aplicación web puede exponer una URL como http://example/events y
  • Podemos usar el verbo “GET” para obtener la lista completa de eventos si la aplicación está siguiendo una arquitectura basada en REST.

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://example/events/1

¿Cuál 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 instrucción @resource

Una vez que tenga el ResourceObject a mano, puede usar las siguientes funciones para realizar las llamadas REST requeridas.

  1. get ([params], [success], [error]) — Esto se puede usar para realizar la llamada GET estándar.
  2. save ([params], PostData, [success], [error]) – Esto se puede usar para realizar la llamada POST estándar.
  3. query ([params], [success], [error]) – Esto se puede usar para realizar la llamada GET estándar, pero se devuelve una matriz como parte de la respuesta.
  4. remove ([params], PostData, [success], [error]) – Esto se puede utilizar para realizar la llamada DELETE estándar.

En todas las funciones indicadas a continuación se puede utilizar el parámetro ‘params’ para proporcionar los parámetros requeridos, que deben ser pasados en la URL.

Por ejemplo,

  • Supongamos que pasa un valor de Topic: ‘Angular’ como un ‘param’ en la función get como
  • get (‘http://example/events‘, ‘{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 colocarlo en la aplicación.

Paso 2) El módulo de aplicación debe declarar una dependencia en el módulo “ngResource” con el fin de utilizar el $resource.

En el siguiente ejemplo, estamos llamando al módulo “ngResource” desde nuestra aplicación ‘DemoApp’.

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 extremos REST.

En el siguiente ejemplo se llama a la dirección URL del extremo: http://example/events/1

En el ejemplo anterior se están haciendo las siguientes cosas

  1. Al definir la aplicación Angular, se crea un servicio mediante el uso de la declaración ‘DemoApp.services’ donde DemoApp es el nombre dado a nuestra aplicación Angular.
  2. El método .factory se utiliza para crear los detalles de este nuevo servicio.
  3. “Entrada” es el nombre que estamos dando a nuestro servicio que puede ser cualquier nombre que desee proporcionar.
  4. En este servicio, estamos creando una función que va a llamar a la API $resource
  5. $recurso (‘/Ejemplo/Event/: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 utilizando la URL (/example /Event/:1) como nuestro punto final REST. Nuestro punto final REST (/example /Event/:1) indica que hay una aplicación de eventos en nuestro sitio principal “ejemplo”. Esta aplicación de eventos se desarrolla mediante una arquitectura basada en REST.

  1. 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 fueron devueltos en el paso anterior (que son el get (), query (), save (), remove (), delete ()) en nuestro controlador.

En el siguiente fragmento de código, estamos utilizando la función get () como ejemplo

Veamos el código que puede hacer uso de la función get ().

En la medida anterio,

  • La función get () en el fragmento anterior emite una solicitud GET a/ejemplo /Event/:1.
  • El parámetro:1 de la URL se sustituye 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 obtener () es una devolución de llamada que se ejecuta cuando los datos llegan desde el servidor. La posible salida de todo el código sería un objeto JSON que devolvería la lista de eventos expuestos desde el sitio web “ejemplo”.

A continuación se muestra un ejemplo de lo que se puede devolver

Interacciones de servidor de bajo nivel con $http

El $http es otro servicio Angular JS que se utiliza para leer datos de servidores remotos. La forma más popular de datos que se leen desde 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

Veamos el código AngularJS usando $http, que se puede usar para obtener los datos anteriores del servidor

En el ejemplo anterior

  1. Estamos agregando el servicio $http a nuestra función Controller para que podamos usar la función “get” del servicio $http.
  2. Ahora estamos usando la función get del servicio HTTP para obtener los objetos JSON de la URL http://example /Angular/GetTopics.php
  3. Basado en el objeto ‘response’, estamos creando una función de devolución de llamada que devolverá los registros de datos y posteriormente los almacenamos en el objeto $scope.
  4. 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 utilizar 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 de servidor MS SQL, entonces debe asegurarse de que tanto la página PHP como la página ASP.Net procese los datos en formato JSON.

Supongamos que tenemos un sitio PHP (http://example /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 toma los datos de una base de datos MySQL y sirve 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 estamos utilizando la directiva ng-repeat para ir a través de cada uno de los pares clave-valor en los objetos JSON devueltos por el método “get” del servicio $http.

Para cada objeto JSON, estamos mostrando la clave que es “Nombre” y el valor es “Descripción”.

Resumen:

  • Hemos visto 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 utiliza con Angular para interactuar con las aplicaciones web RESTUL a un nivel alto, 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 vimos 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, esto se puede usar para obtener datos de un MySQL o MS SQL Server a través de una aplicación PHP. Los datos se pueden representar en una tabla usando la directiva ng-repeat.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *