AngularJS

Single Page Application avec AngularJS – Part 1

Mar 5, 2014

Anthony Guillaume

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AngularJS.Controllers
{
    ///
/// Controlleur Home
    ///
    public class HomeController : Controller
    {
        ///
/// Action par défaut du controlleur
        ///
        ///
        public ActionResult Index()
        {
            return View();
        }
    }
}

Index.cshtml

@{
    Layout = null;
}




    
    AngularJS Single Page Application
    
    
    


    

AngularJS

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 ».

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial;
    font-size: 12px;
    color:#333;
    background: #f8f8f8;
}

a {
    text-decoration: none;
}

#container {
    width: 100%;
}

/* Header */
header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #222;
    color: #fff;
}

    header h1 {
        float: left;
        margin: 0 0 0 10px;
        padding: 0;
        width: 152px;
        font-size: 1.8em;
        height: 35px;
    }

/* Footer*/
footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #222;
    color: #999;
    line-height: 20px;
}

    footer p {
        margin: 0 20px 0 0;
        float: right;
        height: 20px;
        line-height: 20px;
        font-size: 0.95em;
    }

    footer a,
    footer a:visited {
        color: #999;
    }

        footer a:hover {
            color: #4fafd2;
        }

/* Page*/
#page {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 20px;
    zoom: 1;
}

    #page nav {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: 0;
        z-index: 3;
        background: #f5f5f5;
        width: 180px;
    }

        /* Navigation menu*/
        #page nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #page nav li {
            padding: 0;
            margin: 0;
        }

            #page nav li a,
            #page nav li a:visited {
                display: block;
                height: 40px;
                line-height: 40px;
                padding: 0 0 0 20px;
                margin: 0;
                font-size: 1.2em;
                color: #222;
            }

                #page nav li a:hover {
                    background-color: #eee;
                }

            #page nav li.active a {
                color: #fff;
                background-color: #46b6e6;
            }

    /* Contenu de la page */
    #page #content {
        position: absolute;
        top: 20px;
        right: 10px;
        bottom: 5px;
        left: 200px;
        z-index: 2;
        overflow: auto;
    }

        #page #content h1 {
            padding-bottom: 9px;
            margin: 0 0 40px 0;
            border-bottom: 1px solid #eee;
            font-size: 2.2em;
        }

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


    
    AngularJS Single Page Application
    
    
    
    
    

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 ».

'use strict';

// Création de l'application
var app = angular.module('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>



    
    AngularJS Single Page Application
    
    
    
    
    
    


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 :

'use strict';

// Création de l'application
var app = angular.module('app', ['ngRoute']);

// Configuration de l'application
app.config(['$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {

    // Définition des routes
    $routeProvider
        // Route par défaut correspondant à la page d'accueil
        .when('/', {
            templateUrl: '/app/home/views/home',
            controller: 'homeController'
        })
        // page 1
        .when('/page1', {
            templateUrl: '/app/home/views/page1',
            controller: 'page1Controller'
        })
        // page 2
        .when('/page2', {
            templateUrl: '/app/home/views/page2',
            controller: 'page2Controller'
        });

    // Activation du mode HTML5 (supprime le # dans l'url)
    $locationProvider.html5Mode(true);
}]);

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/ » :

app.controller('homeController', function ($scope) {
    'use strict';
});

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

Page d'accueil

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

app.controller('page1Controller', function ($scope) {
    'use strict';
});

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

Page 1

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 :

public class AngularJsRoute : Route
{
     public AngularJsRoute()
            : base("app/{*path}", new AngularJsRouteHandler())
     {

     }
}

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

    public class AngularJsRouteHandler : IRouteHandler
    {
        public IHttpHandler GetHttpHandler(RequestContext requestContext)
        {
            if (requestContext == null) throw new ArgumentNullException("requestContext");

            var filePath = requestContext.HttpContext.Request.AppRelativeCurrentExecutionFilePath;

            if (!filePath.EndsWith(".cshtml", StringComparison.OrdinalIgnoreCase))
                filePath = filePath + ".cshtml";

            var handler = WebPageHttpHandler.CreateFromVirtualPath(filePath);
            if (handler == null)
            {
                requestContext.RouteData.DataTokens.Add("templateUrl", "/views/404");
                handler = WebPageHttpHandler.CreateFromVirtualPath("~/app/views/error/404.cshtml");
            }
            else
            {
                requestContext.RouteData.DataTokens.Add("templateUrl", filePath.Substring(1, filePath.Length - 8));
            }

            return handler;
        }
    }

Ajoutez également dans le fichier « App_Start/RouteConfig.cs » la route AngularJS :

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        // Route AngularJS
        routes.Add("AngularJS", new AngularJsRoute());

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

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 Commentaires

  1. Olivier Chekroun

    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!

    Réponse
  2. Khalid

    Plusieurs images n’apparaissent pas sur le navigateur, quand je suis sur mon androïde

    Réponse
  3. rida

    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

    Réponse
  4. CATHABARD

    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.

    Réponse

Soumettre un commentaire

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

Découvrez nos autres articles

Aller au contenu principal