Truc 22 : Le squelette d’une application Mvc Angular avec Routing de Vue.

angularjs
Introduction


Après avoir fait plusieurs exercices d’applications Angular sans routing, et donc pas MVC, je passe donc au routing de vue.

Ce squelette sera celui que j’utiliserais dans mes futures apps Angular. Sauf qu’en plus il faut séparer dans des répertoires séparés(Controlleurs, Modèle, Vue et Factories).

Pour le tester, c’est ici .

L’intérêt ?

Le gain de performance , et la logique. En effet, chaque vue HTML est liée à un controleur, les élèments sont séparés en mémoire, ce qui permet de créer de grosses applications.

Si un controleur comporte une erreur, alors c’est la vue liée qui plante, et pas le reste de l’application.

Voici donc un squelette de base d’une application Mvc Angular :

Le Code :



<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Squelette de base d application MVC Angular</title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
        <!-- APPEL LIB ANGULAR -->
        <script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="librairies/angular-locale_fr-fr.js"></script>
         <!-- CSS DE L APPLICATION -->
        <link href="app10.css" media="screen" rel="stylesheet" type="text/css" />
        <script>

        <!-- Déclaration des modules utilisés par l application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d Angular, ce sont des librairies -->
         var monApp = angular.module('monApp',['ngRoute'])

        <!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
        .config(function ($routeProvider, $locationProvider){
          $routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
            .when('/liste', {
              templateUrl: 'liste.html',
              controller: 'listeCtrl'
            })
            .when('/detail', {
              templateUrl: 'detail.html',
              controller: 'editDetailsCtrl'
            })
            .when('/statistiques', {
              templateUrl: 'stats.html',
              controller: 'stats'
            })
            .otherwise({redirectTo: '/accueil'});
        })

        <!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les options du controleur.. Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norma bower Grunt -->

        <!-- LE CONTROLEUR DE L ACCUEIL -->
        .controller("accueilCtrl", function($scope) {
            $scope.bonjour = "Mr Durand";
        <!-- FIN DU CONTROLEUR -->
        })

        <!-- LE CONTROLEUR DE LA LISTE -->
        .controller("listeCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })

        <!-- LE CONTROLEUR D UN OBJET A EDITER -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })

        <!-- LE CONTROLEUR DES STATISTIQUES -->
        .controller("stats", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })

    </script>
 </head>

 <!-- La page HTML générale -->
<body ng-controller="accueilCtrl" >

	<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->
	<div class="container ">
		<div class="menu designDiv">
			<a href="#/accueil" class="">Accueil</a>
			<a href="#/liste" class="">Liste  </a>
			<a href="#/detail" class="">Details</a>
			<a href="#/statistiques" class="">Stats</a>
		</div>
		<!-- Cette balise NG-View va afficher les différentes vues -->
		<div id="main" class="designDiv">
			<div ng-view></div>
		</div>
	</div>
</body>

<!-- Voici maintenant la liste des vues qui s affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme BOWER -->
<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">
        Bonjour {{bonjour}} je suis la vue de l accueil.
    </script>

<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="liste.html">
        Bonjour, je suis la vue qui présente une liste d objets.
    </script>

<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="detail.html">
        Bonjour, je suis la vue qui présente le detail d un objet.
    </script> 

<!-- VUE HTML : STATS -->
    <script type="text/ng-template" id="stats.html">
        Bonjour, je suis la vue qui présente des statistiques.
    </script>
Publicités