Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

AngularJS : communiquer avec une API RESTful

Par Antoine STEMPIEN Publié le 22/10/2015 à 17:58:07 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Dans cet article nous allons voir comment utiliser le framework AngularJS afin de communiquer directement avec une API RESTful. Pour cela, je vais me servir d'un exemple de type CRUD (Create, Read, Update, Delete) affichant une liste d'objets, ici ce sera une liste de campus Supinfo.

Les bases

AngularJS est un framework MVC côté client écrit en JavaScript. Il permet de construire de robustes applications sur une seule page. Aujourd'hui je vais me focaliser sur le service $http d'angularJS afin de communiquer directement avec une API RESTful.

Avant de commencer, je vous invite à consulter mon article sur comment créer une API RESTful avec ASP.NET si vous ne disposez pas encore d'api.

Création du module AngularJS

Tout d'abord nous allons commencer par définir notre module "app" qui va agir en tant que conteneur pour d'autres composants, tels que notre service et notre controller.

Création du service AngularJS

Maintenant que le module est défini, nous allons créer un service qui s'occupera de communiquer directement avec notre API RESTful contenant toutes les requêtes $http de angularJS et qui va retourner, pour chaque méthode une "promise".

Création du controller AngularJS

Maitenant que notre service est crée, nous allons nous servir d'un controller pour faire appel aux différentes méthodes du service, qui seront résolu à partir des "promises" retournées à l'aide des fonctions success() et error(). Notre controller va permettre de charger la liste de tous les campus, mettre des évènements "click" sur les différents boutons afin d'ajouter / éditer / supprimer des campus.

Création de la vue

Maintenant que toute la partie javascript est terminée, nous pouvons procéder à l'affichage de nos données. Pour cela nous allons faire une simple page html affichant la liste de tous nos campus. Le tout doit être encapsulé dans une "div" qui déclare notre application "app" et notre controller "appController".

Ci-dessous le rendu final de notre page, nous avons en haut un message affichant le statut de nos requêtes vers l'api ainsi que notre tableau comprenant tous nos campus avec la possibilité d'en ajouter, d'en modifier ou d'en supprimer.

Conclusion

C'est ainsi que s'achève cet article sur la création d'une API RESTful avec ASP.NET. Nous avons vu un aperçu des possibilités d'AngularJS, avec l'utilisation de services, controllers et des différentes directives tels que ng-repeat, ng-show, ng-hide ainsi que l'utilisation du service $http. J'espère que cet exemple tout simple vous aura éclairci sur le sujet.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels