AngularJS AJAX

AJAX est la forme abrégée de Asynchronous JavaScript et XML. 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 aux clients telles que GetEmployeeDetails, 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 nous ne connaissons pas exactement les détails des fonctions « GetEmployeeDetails » et « SetEmployeeDetails », ni comment elles sont implémentées.

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 Évenements.

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 le
Nous pouvons utiliser le verbe « GET » pour obtenir la liste complète des événements si l'application suit une architecture basée sur REST.

Ainsi, par exemple, s'il y a eu un événement avec un ID de 1, nous pouvons alors obtenir les détails 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

Pour utiliser la propriété $resource, les étapes suivantes 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 l'exemple suivant, 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 l'exemple suivant.

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.

L'exemple suivant 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, les choses suivantes sont effectuées

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.
La méthode .factory est utilisée pour créer les détails de ce nouveau service.
« Entrée » est le nom que nous donnons à notre service, qui peut être n'importe quel nom que vous souhaitez donner.
Dans ce service, nous créons une fonction qui va appeler l'API $resource
$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.
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 les données JSON suivantes

"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

Nous ajoutons le service $http à notre fonction Controller afin de pouvoir utiliser la fonction « get » du service $http.
Nous utilisons maintenant la fonction get du service HTTP pour récupérer les objets JSON depuis l'URL http://example /angular/getTopics.PHP
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.
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 Serveur utilisant 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 à un MySQL base de données 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.

Voici le processus étape par étape sur la façon de récupérer des données à partir de SQL et MySQL Serveur utilisant AngularJS.

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

Étape 1) Prendre des données d'un MySQL base de données
La première étape consiste à s'assurer que la page PHP récupère les données d'un MySQL base de données et sert les données 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 Javascénario 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é.
Grâce à la puissance du service $http, celui-ci peut être utilisé pour obtenir des données d'un MySQL ou MS SQL Server via une application PHP. Les données peuvent ensuite être restituées dans un tableau à l'aide de la directive ng-repeat.

Tu pourrais aimer: