04. Structuration du projet et mise en place du routing

Après avoir fait un point sur les directives et les filtres, nous allons revenir à notre projet, afin d'y mettre en place une organisation propre ainsi que le routing.

Organisation du projet

Pour cela, il va falloir remplacer la navigation classique de page en page par un autre système : le routing. Le routing permet de remplacer dynamiquement une partie de note page HTML par un autre morceau de HTML en fonction d’une URL. Pour cela, nous allons ajouter un élément dans notre page HTML, dans lequel sera injecté les portions de page, que nous aurons configurées au préalable dans le routeur. Chacune de ces portion aura son propre controller et sa vue HTML.

Nous allons également décomposer noter application en deux modules : le module home qui contiendra simplement une page d’accueil et le module show qui sera le cœur de notre application, la gestion des séries. Nous allons donc dans notre répertoire src créer un répertoire modules qui contiendra deux sous répertoires home et show. Puis, nous ferons pour chacun de ces modules un découpage par typologie d’élément en créant un répertoire controllers et views.

Configuration du routing

Angular est décomposé en plusieurs modules, la partie core, indispensable, et plusieurs modules qu'il est possible d’utiliser ou non en fonction de ses besoins. Le routeur en fait partie. Il convient donc d'ajouter ce module à notre application. Pour cela, deux étapes; d’une part récupérer la dépendance depuis NPM et ajouter le fichier JS correspondant (nous l’avons déjà fait dans la première leçon). Puis, il injecter dans notre application ce module pour qu’il soit disponible. Ceci se fait grâce au tableau laissé vide lors de la déclaration de notre application :


var app = angular.module('showthequeApp', ['ngRoute']); // ngRoute est le nom du module à injecter

Par la suite, nous allons configurer notre routeur par l'intermédiaire d'une autre fonction fournit par angular : config. Cette fonction est appelée avant le lancement de l’application et permet de configurer l’application. Nous allons ajouter cette configuration dans le app.js:

app.config(function ($routeProvider){ // injection du $routeProvider pour pouvoir le configurer

    $routeProvider
        // route vers la page page d’accueil 
        .when('/home', // url
            { // paramètres de la route
                  templateUrl: 'modules/home/views/home.html', // chemin vers la vue à charger
                  controller: 'HomeController', // le controller pour gérer cette vue
                  controllerAs: 'homeCtrl' // nom utilisé pour manipuler le scope dans la vue
            }) 

        // route vers la liste des séries
        .when('/shows', 
              { templateUrl: 'modules/show/views/show-list.html', controller: 'ShowListController', controllerAs: 'listCtrl' })

        // route permettant d'éditer une série
        .when('/show/:id?', // url avec un paramètre 'id' facultatif (?)
              { templateUrl: 'modules/show/views/show-edit.html', controller: 'ShowEditController', controllerAs: 'editCtrl' })

        .otherwise({redirectTo: '/home'}); // url vers laquelle rediriger en cas d'url inconnu
});

Pour chaque route à créer, on utilise la fonction when en indiquant l'url de la route puis ses paramètres, ici un controller et sa vue associée.

Puis nous ajoutons dans notre index.html l'emplacement où seront injectés les vues:

<body ng-app="showthequeApp">

    <div class="container body-content">
        <div ng-view></div>
    </div>

    <!-- [scripts] --> 

</body>

Création du module Home

Le premier de nos deux modules home sera très simple, il contiendra juste une page d’accueil présentant l’application et un lien vers le module de gestion des séries. Créons le controller HomeController pour notre module dans le répertoire src/home/controllers, qui sera pour le moment vide (ne pas oublier d'inclure ce nouveau fichier JS dans le index.hml de notre application):

    app.controller('HomeController', [function() {

        }
    ]);

Et la vue correspondante dans src/home/views :

<div>
    <div class="jumbotron">
        <h1>ShowTheque</h1>
        <p>Managing TV Show</p>
        <a href="#/shows" class="btn btn-primary btn-lg">Start</a>
    </div>
</div>

Plus besoinn de mettre la directive ng-controller dans la vue, car c'est le router qui s'en occupe d'après notre configuration.

Comme nous ne sommes pas en mode HTML 5, l’URL permettant de naviguer entre nos différentes vues sera positionnées après le hash (#) ce qui donnera par exemple pour notre page home http://localhost:3002/src/index.html#/home

Création d'un menu pour naviguer

Afin de faciliter la navigation, nous allons ajouter dans notre fichier index.html un menu Bootstrap classique avec un client pour chacun de nos modules.

<body ng-app="showthequeApp">

    <div class="container" style="margin-bottom: 20px">
        <div class="row">
            <div class="col-xs-12">
                <h1>ShowTheque AngularJS</h1>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="navbar navbar-inverse">
            <div class="navbar-header">
                <a class="navbar-brand active" href="#home">Home</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                    <!-- partie angular lien vers les deux modules -->
                    <li><a href="#/home">Home</a></li>
                    <li><a href="#/shows">Shows</a></li>
                    <!-- -->

                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        <div ng-view></div>
    </div>

    <!-- [scripts] --> 

</body>