Single Page Application avec AngularJS – Part 1


angularjs1-820x350

Récemment j’ai du créer une application de BackOffice pour un projet et j’ai décidé de partir sur une “Single Page Application” qui est très à la mode en ce moment. Dans cette série d’articles, je vais vous expliquer les différentes étapes que j’ai effectuées pour réaliser mon application.

  • Utilisation d’AngularJS avec ASP.NET MVC
  • Création de l’application AngularJS
  • Utilisation d’ASP.NET Web API pour l’accès aux données
  •  Ajout d’une page de connexion à l’application

AngularJS et ASP.NET MVC

Pour pouvoir charger l’application, nous allons commencer par créer une première page qui sera la page principale. Celle-ci va me permettre de charger l’application AngularJS. Nous utiliserons ASP.NET MVC avec un contrôleur et une action ce qui va permettre de gérer de la sécurité, de la configuration, …

Pour les vues d’AngularJS, j’ai choisi de partir sur ASP.NET WebPages car il serait fastidieux de créer une action pour chaque vue que je souhaite charger. Je vais donc créer une route personnalisée qui se chargera de récupérer ma vue “cshtml”.

Création du projet ASP.NET MVC

Le projet MVC

Nous allons partir d’un projet ASP.NET vide (“Empty”) en cochant la case “MVC”. Cela va me permettre d’avoir un projet de base relativement propre à la différence du projet type “MVC”.
01
Une fois le projet créé, vous devriez avoir le contenu de l’image ci-dessous.
02

La page principale

Nous allons maintenant ajouter la page principale qui chargera plus tard notre application AngularJS. Pour cela commencez par ajouter un controleur “HomeController” dans le répertoire “Controllers” et la vue “Index.cshtml” dans le répertoire “Views/Home”.

04

HomeController.cs

Index.cshtml

Ajoutons un peu de style

Pour rendre l’application un peu plus sympa, vous pouvez rajouter le fichier “main.css” dans le répertoire “Content/themes/default”.

Intégration d’AngularJS dans ASP.NET MVC

Structure du projet AngularJS dans notre solution.

Le site d’AngularJS propose un structure de fichier simple regroupant d’un côté les fichiers javascript et de l’autre les fichiers html. Ce système convient bien à de petites applications mais lorsque l’on commence à avoir beaucoup de contrôleur, il devient difficile de s’y retrouver.
Dans cet article, je suis parti sur une organisation par fonctionnalité que je trouve plus adaptée dans une application ayant beaucoup de page.
J’ai également séparé les fichiers de l’application AngularJS de l’application ASP.NET MVC dans le répertoire “app”. Certaines personne mélange les deux mais je trouve que cela rend la maintenance plus complexe.

03

Les librairies AngularJS

Nous allons tout d’abord ajouter les différentes librairies AngularJS dont nous allons avoir besoins. Vous pouvez les télécharger ici

  • angular.js : AngularJS
  • angular-route.js : fonctionnalité de routage pour AngularJS

05

Le fichier app.js

Nous allons maintenant pouvoir créer le fichier “app.js” qui va se charger d’initialiser l’application AngularJS. Celui-ci va se trouver à la racine du répertoire “app”.

Une fois créé, nous devons rajouter dans le fichier index.html :

  • la balise script permettant de charger le fichier app.js
  • préciser à AngularJS le nom de l’application à charger en rajoutant l’attribut “data-ng-app” dans la balise <html>

Les routes et vues

Notre application AngularJS est maintenant chargée côté client, nous allons pouvoir configurer l’affichage des différentes pages. Pour cela, nous allons rajouter des routes qui vont correspondre aux différentes pages de notre site. Il va également falloir préciser une contrôleur qui sera chargé lorsque la route sera appelé et une vue qui sera affichée à l’utilisateur dans notre balise “ng-view”.

Nous allons donc modifier le fichier app.js :

Une fois les routes défini, il va falloir créer les contrôleurs et les vues associés.
Pour la page d’accueil, nous allons créer un contrôleur “homeController.js” dans le répertoire “app/home/controllers/” :

Ainsi que la vue “home.cshtml” dans le répertoire “app/home/views/” :

Pour la page 1, nous allons créer un contrôleur “page1Controller.js” dans le répertoire “app/home/controllers/” :

Ainsi que la vue “page1.cshtml” dans le répertoire “app/home/views/” :

Faites de même pour la page 2.

Si vous exécutez l’application, vous ne verrez pas apparaître les pages car nous n’avons pas encore rajouter la route dans notre application ASP.NET MVC permettant à ASP.NET de trouver nos vues.

WebPages pour charger les vues

Côté serveur, nous n’allons pas utiliser MVC pour charger nos vues car il faudrait pour cela créer une action pour chaque vue à charger. Pour éviter se travail fastidieux, nous allons créer une route spécifique et utiliser WebPages pour charger nos vues directement.

Nous allons pour cela créer une route personnalisé en ajoutant deux fichiers :
06

La classe AngularJsRoute correspondant à notre route personnalisée :

La classe AngularJsRouteHandler se chargera d’exécuter notre route et donc de fournir le fichier .cshtml correspondant à la vue demandée :

Ajoutez également dans le fichier “App_Start/RouteConfig.cs” la route AngularJS :

Si vous exécutez maintenant votre application, vous devriez voir apparaître le contenu des page.

Conclusion

Vous pouvez télécharger le projet ici.

Dans les prochains articles, je vous expliquerais comment mettre en place une Web API et l’utiliser avec AngularJS.

4 commentaire(s)

  • Je ne suis pas frontend développeur et c’est le premier article SPA qui me donne pas envie de fuire 😉

    J’attends les suivants avec impatience!

    Reply
  • Bonjour,
    un grand merci pour l’article, je travail avec des areas je souhaite connaitre l’emplacement juste des fichier js dans mon application . Pour le moment je les place dans le dossier Controller (ASP.net mvc ) .

    bien à vous

    Reply
  • Trés bon tuto mais, oui, il y a des images qui n’apparaissent pas et il ne m’est pas possible de télécharger les sources.

    Reply

Commentez cet article