ASP .NET Web API et AngularJS : Premiers pas

AngularJS

AngularJS est un Framework Javascript construit autour de concepts clés et de bonnes pratiques aujourd’hui incontournables dans le développement Web :

  • Data-binding bidirectionnel
  • Architecture MVC
  • Injection de dépendances
  • Manipulation du DOM au moyen de directives

ASP .NET Web API

ASP .NET Web API est apparu avec ASP .NET MVC 4. Ce Framework facilite l’implémentation de service Web RESTful, consommables par une grande diversité de clients (pc, mobile, tv connectée…).

Dans cet article nous allons voir ensemble comment construire pas à pas notre premier projet utilisant conjointement AngularJS et Web API.

Ce projet s’articulera autour d’une base de données SQL Server dont le contenu sera manipulé à partir de notre vue via des services RESTful.
Je ne reviendrai pas ici sur le concept MVC ou sur la technologie REST dans son ensemble car ce n’est pas le but de cet article.

Notre projet AngularJS / ASP .NET Web API

Etape 1 :  Commençons par créer un projet ASP .NET MVC Vide que nous appellerons  AJSWebapi :

blog ai3 asp_net_mvc_visual_studio ASP .NET Web API et AngularJS : Premiers pas

Etape 2 : ajouter AngularJS au projet via le gestionnaire de package Nuget :

blog ai3 AngularJS_NuGet ASP .NET Web API et AngularJS : Premiers pas
Etape 3 : Ajoutez une base de données via un clic droit sur le dossier App_Data. Nous appellerons cette base de données AJSWebapi. Créez dans cette base une table nommée TVShow :

 

Etape 4 : Insérez quelques lignes de données dans cette table :

 

Etape 5 : Nous allons maintenant ajouter un modèle Entity Framework qui nous facilitera l’accès aux données via un mappage objet/relationnel, nous allons appeler ce modèle Appli. Dans l’assistant EDM qui s’affiche choisir les options par défaut et sélectionner la table TVShow créée précédemment :

blog ai3 Entity_Framework_Data_Model ASP .NET Web API et AngularJS : Premiers pas

Au final on doit se retrouver avec ça :

blog ai3 Entity_framework_TVShow_table ASP .NET Web API et AngularJS : Premiers pas

Etape 6 : Rebuildez le projet, sinon vous ne pourrez pas passer l’étape suivante.

Etape 7 : Ajoutons enfin un contrôleur Web API en faisant un clic droit sur le dossier Controller :

blog ai3 Web_API_Controller ASP .NET Web API et AngularJS : Premiers pas

Nous nommerons ce contrôleur  TVShowsAPIController :

blog ai3 Web_API_Controller_Add ASP .NET Web API et AngularJS : Premiers pas
Vous remarquerez que toutes les méthodes du contrôleur ont été automatiquement générées par Visual Studio. Ce contrôleur Web API gèrera l’ensemble des opérations dites CRUD (Create, Read, Update, Delete).

Un contrôleur Web API est similaire à un contrôleur classique mais avec deux petites différences :

1 – Dans ASP .NET Web API les actions sont par défaut implicites. Le choix de l’action se fait en fonction des paramètres de la requête et du verbe HTTP (GET, POST, DELETE, PUT). Si vous jetez un œil au contenu de la classe WebApiConfig.cs générée par Visual Studio à la création du contrôleur Web API vous remarquerez que la méthode d’action n’est pas présente dans le routeTemplate :

 

blog ai3 asp_net_web_api_routing ASP .NET Web API et AngularJS : Premiers pas

Contrairement au système de routage d’ ASP .NET MVC :

blog ai3 asp_net_mvc_routing ASP .NET Web API et AngularJS : Premiers pas

2 – Les vues sont inexistantes dans ASP .NET Web API. Les données sont sérialisées puis renvoyées directement au client (JSON ou XML)

 

Etape 8 : On peut déjà tester le bon fonctionnement de la partie serveur  en entrant tout simplement dans un navigateur l’URL d’une des actions gérées par notre contrôleur Web APIhttp://localhost/api/TVShowsAPI. Si tout c’est bien passé, sous Chrome vous devriez voir vos données au format XML s’afficher dans votre navigateur, sous Internet Explorer le téléchargement d’un fichier de type .json contenant nos données sera proposé. Le résultat avec Chrome :

 

 

Etape 9 : Ajoutez un nouveau contrôleur (pas de Web API cette fois, ce contrôleur servira à l’affichage de notre page d’accueil), nous appellerons celui-ci TVShowController :

blog ai3 MVC_Empty_Controller ASP .NET Web API et AngularJS : Premiers pas

Etape 10 : Nous allons maintenant implémenter la partie client, comme vue plus haut celle-ci utilise la librairie Javascript AngularJS. Dans le dossier Scripts créez un nouveau dossier appelé MyScripts, dans celui-ci ajouter les 3 fichiers javascript suivants :
Service.js :

 

Dans ce fichier nous trouvons l’implémentation d’un service AngularJS.

D’une façon générale un service AngularJS fourni un ensemble de tâches nécessaires au fonctionnement d’une application, c’est un singleton. Dans notre cas ce service sera utilisé pour  les appels externes de méthodes (actions) contenues dans notre contrôleur Web API.

Ces méthodes seront appelées via les requêtes HTTP post, get, put et delete  (service $http fournit par AngularJS) . Les opérations de CRUD pourront ainsi être effectuées côté serveur par notre contrôleur Web API. Le résultat sera renvoyé au format JSON/XML (voir étape 7). Ce service $http fourni par AngularJS est le cœur de la communication entre client et serveur.

Module.js :

 

On peut définir le module comme un conteneur de notre application. Il permet de lier entre eux les différents éléments qui la constitue (Controller, Service…).

Controller.js :

 

Dans notre vue (Home.cshtml) le controller est lié au DOM par l’utilisation de la directive ng-controller.

Lorsque cette directive est utilisée AngularJS instancie un objet controller recevant un $scope en paramètre, il devient ainsi un $scope enfant.

Notre contrôleur utilise notre service AngularJS (instancié par le mécanisme d’injection de dépendances) pour récupérer les données qui nous intéresse et les placer dans le $scope. Ce $scope permet de lier notre vue et notre contrôleur .  Le mécanisme de data-binding d’ AngularJS permet l’affichage dans notre vue des données contenues dans le $scope.

Etape 11 : Faire un clic droit sur le dossier Views/TVShow et ajouter une vue que vous nommerez Home. Remplacez son contenu par celui-ci :

 

Le mécanisme de data-binding d’AngularJS permet un affichage simplifié des données du $scope via le mécanisme de data-binding. Dans notre vue une syntaxe du type {{Ts.Id}} permet du one way data-binging alors que la directive ng-model autorise le two way data-binding.

Etape 12 : Installer System.Web.Optimization via la console de gestion des packages NuGet

blog ai3 install_system_web_optimization ASP .NET Web API et AngularJS : Premiers pas

Etape 13 : Editer le ficher Global.asax.cs et remplacer son contenu par celui-ci

 

Etape 14 : Dans le dossier App_Start rajoutez une classe BundleConfig.cs  

 

Etape 15 : Editer le fichier RouteConfig.cs et modifier la page d’accueil par défaut 

 

Etape 16 : Editer le controleur TVShowController et remplacer son contenu par celui-ci

 

Etape 17 : Rebuildez le projet et testez, si tout c’est bien passé ça devrait donner ça :

blog ai3 application ASP .NET Web API et AngularJS : Premiers pas

Notre application utilisant conjointement AngularJS et ASP .NET Web API est terminée !

Télécharger le source

2 thoughts on “ASP .NET Web API et AngularJS : Premiers pas

  1. Bonjour,

    J’ai une question auquel je n’arrive pas a trouver la solution. Pourquoi utiliser les opérations CRUD avec AngularJs ?? Je veux dire le system Asp MVC | Repository fonctionne très bien, quel est l’intéret de venir ajouter la couche Angular par dessus ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.