AJAX est la forme courte de JavaScript et XML asynchrone. 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 et le nombre de rafraîchissements de la page entière 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 coulisses. 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 en fait cette technique pour actualiser la page ou obtenir des données du serveur.
Dans ce didacticiel, vous apprendrez-
- Interactions de haut niveau avec les serveurs utilisant $ resource
- Interactions de serveur de bas niveau avec $ http
- Récupérer des données depuis un serveur exécutant SQL et MySQL
Interactions de haut niveau avec les serveurs utilisant $ resource
Angular fournit deux API différentes pour gérer les requêtes Ajax. Elles 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 ne nous soucierons que de ce que le serveur a à offrir en termes de fonctionnalités et non de ce que le serveur fait exactement en détail en ce qui concerne cette fonctionnalité.
Par exemple, si le serveur hébergeait une application qui gère les informations sur les employés d'une certaine entreprise, le serveur peut exposer des fonctionnalités à des clients tels que GetEmployeeDetails, SetEmployeeDetails, etc.
Donc, à un niveau élevé, nous savons ce que ces deux fonctions peuvent faire, et nous pouvons les invoquer en utilisant la propriété $ resource. Mais alors nous ne savons pas exactement les détails des fonctions "GetEmployeeDetails" et "SetEmployeeDetails", et 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 d'événements.
Si nous voulions accéder à la liste de tous les événements,
- L'application Web peut exposer une URL telle que http: // exemple / événements et
- 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 avait un événement avec un ID de 1, nous pouvons obtenir les détails de cet événement via l'URL. http: // exemple / événements / 1
Qu'est-ce que 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 donné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 faire l'appel GET standard.
2. save ([params], postData, [success], [error]) - Ceci peut être utilisé pour faire 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 faire l'appel DELETE standard.
Dans toutes les fonctions données ci-dessous, le paramètre «params» peut être utilisé pour fournir les paramètres requis, qui doivent être passés dans l'URL.
Par exemple,
- Supposons que vous passiez une valeur de Topic: 'Angular' comme 'param' dans la fonction get comme
- get (' http: // exemple / événements ', '{Sujet:' Angulaire '}')
- L'URL http: // example / events? Topic = Angular est appelée dans le cadre de la fonction get.
Comment utiliser la propriété $ 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 illustré dans l'exemple suivant.
Si vous faites cela, l'objet $ resource aura la possibilité d'appeler la fonctionnalité nécessaire exposée 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 actions suivantes sont effectuées
-
Lors de la définition de l'application Angular, un service est créé en utilisant 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 fournir.
-
Dans ce service, nous créons une fonction qui va appeler l'API $ resource
-
$ resource ('/ exemple / Événement /: 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 à l'aide d'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 appelées.
Étape 4) Nous pouvons maintenant utiliser les méthodes qui ont été retourné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 de code ci-dessus émet une requête GET à / example / Event /: 1.
- Le paramètre: 1 dans l'URL est remplacé par $ scope.id.
- La fonction get () renverra un objet vide qui est rempli automatiquement lorsque les données réelles proviennent 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 retourné 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 qui est utilisé pour lire des données à partir de serveurs distants. La forme de données la plus courante lue à partir des serveurs est celle des données au format JSON.
Supposons que nous ayons une page PHP ( 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 en utilisant $ http, qui peut être utilisé pour obtenir les données ci-dessus du serveur
Dans l'exemple ci-dessus
- Nous ajoutons le service $ http à notre fonction Controller afin que nous puissions utiliser la fonction "get" du service $ http.
- Nous utilisons maintenant la fonction get du service HTTP pour obtenir les objets JSON à partir de l'URL http: // exemple /angular/getTopics.PHP
- Sur la base de l'objet 'response', nous créons une fonction de rappel qui retournera les enregistrements de données et par la suite nous les stockons dans l'objet $ scope.
- Nous pouvons ensuite utiliser la variable $ scope.names du contrôleur et l'utiliser dans notre vue pour afficher les objets JSON en conséquence.
Récupérer des données depuis un serveur exécutant SQL et MySQL
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 se connectant à une base de données MySQL ou une page Asp.Net se connectant à une base de données de serveur MS SQL, vous devez vous assurer que la page PHP et ASP.Net restitue les données au format JSON.
Supposons que nous ayons un site PHP ( http: // exemple /angular/getTopics.PHP ) servant des données à partir d'une base de données MySQL ou SQL.
Étape 1) La première étape consiste à s'assurer que la page PHP prend les données d'une base de données MySQL et sert les données au format JSON.
Étape 2) Écrivez le code similaire ci-dessus pour utiliser le service $ http pour obtenir les données JSON.
Regardons le code AngularJS en utilisant $ http qui peut être utilisé pour obtenir les données ci-dessus du serveur
Étape 3) Rendez les données de votre vue à l'aide de la directive ng-repeat.
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".
{{x.Name}} {{x.Description}}
Résumé:
- Nous avons examiné ce qu'est une architecture RESTFUL, 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 sans nous soucier 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 à partir d'un serveur MySQL ou MS SQL via une application PHP. Les données peuvent ensuite être rendues dans une table à l'aide de la directive ng-repeat.