AngularJS AJAX – Effectuer un appel AJAX en utilisant $http

AngularJS AJAX

AJAX est la forme abrégée de JavaScript et XML asynchrones. AJAX a été principalement conçu pour mettre à jour des parties d'une page Web, sans recharger la page entière.

La raison de la conception de cette technologie était de réduire le nombre d'allers-retours effectués entre le client et le serveur ainsi que le nombre d'actualisations de pages entières qui avaient lieu chaque fois qu'un utilisateur avait besoin de certaines informations.

AJAX permettait aux pages Web d'être mises à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en coulisse. Cela signifiait qu’il était possible de mettre à jour des parties d’une page Web sans recharger la page entière.

De nombreuses applications Web modernes suivent cette technique pour actualiser la page ou obtenir des données du serveur.

Interactions de haut niveau avec les serveurs utilisant $resource

Angular fournit deux API différentes pour gérer les requêtes Ajax. Ils sont

  • $ressource
  • $ http

Nous examinerons la propriété « $resource » dans Angular, qui est utilisée pour interagir avec les serveurs à un niveau élevé.

Lorsque nous parlons d'interagir à un niveau supérieur, cela signifie que nous nous soucierons uniquement de ce que le serveur a à offrir en termes de fonctionnalités et non de ce que fait exactement le serveur en détail en ce qui concerne cette fonctionnalité.

Par exemple, si le serveur hébergeait une application qui conserve les informations sur les employés d'une certaine entreprise, le serveur pourrait exposer des fonctionnalités à des clients tels que GetEmployeeDe.tails, SetEmployeeDetails, etc.

Ainsi, à un niveau élevé, nous savons ce que ces deux fonctions peuvent faire et nous pouvons les invoquer à l'aide de la propriété $resource. Mais alors nous ne connaissons pas exactement le details du programme « GetEmployeeDetails" et le " SetEmployeeDetails fonctions » et comment il est mis en œuvre.

L'explication ci-dessus explique ce que l'on appelle une architecture basée sur REST.

  • REST est connu sous le nom de Representational State Transfer, qui est une architecture suivie dans de nombreux systèmes Web modernes.
  • Cela signifie que vous pouvez utiliser les verbes HTTP normaux GET, POST, PUT et DELETE pour travailler avec une application Web.

Supposons donc que nous ayons une application Web qui gère une liste de Événements.

Si nous voulions accéder à la liste de tous les événements,

  • L'application Web peut exposer une URL telle que http://example/events et
  • On peut utiliser le verbe « GET » pour obtenir la liste complète des événements si l'application est suivie.wing une architecture basée sur REST.

Ainsi, par exemple, s'il y a eu un événement avec un ID de 1, alors nous pouvons obtenir le details de cet événement via l'URL. http://example/events/1

Quel est l'objet $resource

L'objet $resource dans Angular aide à travailler avec des serveurs qui servent des applications sur une architecture basée sur REST.

La syntaxe de base de l'instruction @resource ainsi que les différentes fonctions sont indiquées ci-dessous

Syntaxe de l'instruction @resource

var resource Object = $resource(url);

Une fois que vous avez le ResourceObject à portée de main, vous pouvez utiliser les fonctions ci-dessous pour effectuer les appels REST requis.

1. get([params], [success], [error]) – Ceci peut être utilisé pour effectuer l’appel GET standard.

2. save([params], postData, [success], [error]) – Ceci peut être utilisé pour effectuer l'appel POST standard.

3. query([params], [success], [error]) – Ceci peut être utilisé pour effectuer l'appel GET standard, mais un tableau est renvoyé dans le cadre de la réponse.

4. remove([params], postData, [success], [error]) – Ceci peut être utilisé pour effectuer l'appel DELETE standard.

Dans toutes les fonctions indiquées ci-dessous, le paramètre « params » peut être utilisé pour fournir les paramètres requis, qui doivent être transmis dans l'URL.

Par exemple,

  • Supposons que vous transmettez une valeur de Topic : 'Angular' comme 'param' dans la fonction get comme
  • obtenir('http://example/events' ,'{ Sujet : 'Angulaire' }')
  • L'URL http://example/events?Topic=Angular est invoqué dans le cadre de la fonction get.

Comment utiliser la propriété AngularJS $resource

Afin d'utiliser la propriété $resource, procédez comme suitwing les étapes doivent être suivies :

Étape 1) Le fichier «angular-resource.js» doit être téléchargé depuis le site Angular.JS et doit être placé dans l'application.

Étape 2) Le module d'application doit déclarer une dépendance sur le module « ngResource » afin d'utiliser la ressource $.

Dans la suitewing Par exemple, nous appelons le module « ngResource » depuis notre application « DemoApp ».

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Étape 3) Appel de la fonction $resource() avec votre point de terminaison REST, comme indiqué dans ce qui suitwing Exemple.

Si vous faites cela, l'objet $resource aura la possibilité d'invoquer les fonctionnalités nécessaires exposées par les points de terminaison REST.

Le following L'exemple appelle l'URL du point de terminaison : http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

Dans l'exemple ci-dessus, suivezwing les choses se font

  1. Lors de la définition de l'application Angular, un service est créé à l'aide de l'instruction « DemoApp.services » où DemoApp est le nom donné à notre application Angular.
  2. La méthode .factory est utilisée pour créer le details de ce nouveau service.
  3. « Entrée » est le nom que nous donnons à notre service, qui peut être n'importe quel nom que vous souhaitez donner.
  4. Dans ce service, nous créons une fonction qui va appeler l'API $resource
  5. $resource('/example/Event/:1). La fonction $resource est un service utilisé pour appeler un point de terminaison REST. Le point de terminaison REST est normalement une URL. Dans la fonction ci-dessus, nous utilisons l'URL (/example /Event/:1) comme point de terminaison REST. Notre point de terminaison REST (/example /Event/:1) indique qu'il existe une application Event sur notre site principal « exemple ». Cette application événementielle est développée en utilisant une architecture basée sur REST.
  6. Le résultat de l’appel de fonction est un objet de classe de ressources. L'objet ressource aura désormais les fonctions ( get() , query() , save() , remove(), delete() ) qui peuvent être invoquées.

Étape 4) Nous pouvons maintenant utiliser les méthodes qui ont été renvoyées à l'étape ci-dessus (qui sont get() , query() , save() , remove(), delete() ) dans notre contrôleur.

Dans l'extrait de code ci-dessous, nous utilisons la fonction get() comme exemple

Regardons le code qui peut utiliser la fonction 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);
  });

Dans l'étape ci-dessus,

  • La fonction get() dans l'extrait ci-dessus émet une requête GET vers /exemple /Event/:1.
  • Le paramètre : 1 dans l'URL est remplacé par $scope.id.
  • La fonction get() renverra un objet vide qui sera automatiquement renseigné lorsque les données réelles proviendront du serveur.
  • Le deuxième argument de get() est un rappel qui est exécuté lorsque les données arrivent du serveur. La sortie possible de l'intégralité du code serait un objet JSON qui renverrait la liste des événements exposés à partir du site Web « exemple ». Un exemple de ce qui peut être renvoyé est présenté ci-dessous.
    {
    { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
    { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
    { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}
    
    }

Interactions de serveur de bas niveau avec $http

Le $http est un autre service Angular JS utilisé pour lire les données des serveurs distants. La forme de données la plus courante lue à partir des serveurs est celle au format JSON.

Supposons que nous ayons un PHP Page ( http://example/angular/getTopics.PHP ) qui renvoie le suiviwing Données JSON

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Regardons le code AngularJS utilisant $http, qui peut être utilisé pour obtenir les données ci-dessus du serveur

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

Dans l'exemple ci-dessus

  1. Nous ajoutons le service $http à notre fonction Controller afin de pouvoir utiliser la fonction « get » du service $http.
  2. Nous utilisons maintenant la fonction get du service HTTP pour récupérer les objets JSON depuis l'URL http://example /angular/getTopics.PHP
  3. Sur la base de l'objet 'response', nous créons une fonction de rappel qui renverra les enregistrements de données et nous les stockerons ensuite dans l'objet $scope.
  4. Nous pouvons ensuite utiliser la variable $scope.names du contrôleur et l'utiliser à notre avis pour afficher les objets JSON en conséquence.

Comment récupérer des données à partir de SQL et MySQL Server à l'aide d'AngularJS

Angular peut également être utilisé pour récupérer des données à partir d'un serveur exécutant MySQL ou SQL.

L'idée est que si vous avez une page PHP connectée à une base de données MySQL ou à un Asp.Net page de connexion à un MS SQL base de données du serveur, vous devez alors vous assurer que les pages PHP et ASP.Net restituent les données au format JSON.

Following est un processus étape par étape sur la façon de récupérer des données à partir de SQL et MySQL Server à l'aide d'AngularJS.

Supposons que nous ayons un site PHP (http://example /angular/getTopics.PHP) servant des données à partir d'une base de données MySQL ou SQL.

Étape 1) Prendre des données d'une base de données MySQL
La première étape consiste à s'assurer que la page PHP prend les données d'une base de données MySQL et les sert au format JSON.

Étape 2) Obtenez les données JSON en utilisant le service $http
Écrivez le code similaire indiqué ci-dessus pour utiliser le service $http afin d'obtenir les données JSON.

Regardons le code AngularJS utilisant $http qui peut être utilisé pour obtenir les données ci-dessus du serveur

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Étape 3) Restituez les données dans votre vue à l'aide de l'outil directive ng-répétition

Ci-dessous, nous utilisons la directive ng-repeat pour parcourir chacune des paires clé-valeur dans les objets JSON renvoyés par la méthode « get » du service $http.

Pour chaque objet JSON, nous affichons la clé qui est « Nom » et la valeur est « Description ».

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Résumé

  • La forme complète d'AJAX est l'Asynchrone JavaScript et XML.
  • Nous avons examiné ce qu'est un REPOSANT L'architecture est, qui n'est rien d'autre qu'une fonctionnalité exposée par des applications Web basées sur les verbes HTTP normaux de GET, POST, PUT et DELETE.
  • L'objet $resource est utilisé avec Angular pour interagir avec les applications Web RESTFUL à un niveau élevé, ce qui signifie que nous invoquons uniquement la fonctionnalité exposée par l'application Web, mais ne nous soucions pas de la façon dont la fonctionnalité est implémentée.
  • Nous avons également examiné le service $http qui peut être utilisé pour obtenir des données à partir d'une application Web. Cela est possible car le service $http peut fonctionner avec des applications Web à un niveau plus détaillé.
  • En raison de la puissance du service $http, celui-ci peut être utilisé pour obtenir des données d'un serveur MySQL ou MS SQL via une application PHP. Les données peuvent ensuite être restituées dans un tableau à l'aide de la directive ng-repeat.