AngularJS MVVM application structure without loading all controllers at once. Structure d une application AngularJS sans charger tous les controllers

Publié par | 05:30 | 0 commentaires

Dans cette exercice on créera un exemple d'application AngularJS sans charger tous les controllers.

Habituellement dans une application AngularJs les controllers de toutes les pages sont chargés des la première page
Ce qui constitue une charge et une lenteur de chargement pour la page d accueil . Une autre autre architecture existe pour charger les controllers de chaque vue au fur de l eau .

Commençons par creer une application AngularJS qui aura une structure de fichier comme suit :
--Partials ----- View1.html
----- View1.html
--Libs
------ angular.js
------ jquery.js
-- Directives
-- Services
-- Filters
-- Factories
-- Controllers
-- index.html
-- app.js
et voici le contenu de la page index.html 

<html ng-app="testApp">
  <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="angular.js"></script>
    
  </head>
  <body>
    <div>
	   <h3>heading</h3>
	   <a href="#/">view1</a>
	  <a href="#/view2">view2</a>
	</div>
	
     <div ng-view></div>
	  <script type="text/javascript" src="app.js"></script>
  </body>
</html>
Ici comme on le voit seule le fichier app.js est charge dans la page index.html Voyons maintenant le contenu de app.js : 
  angular.module('testApp', [])
  .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/view2', {
      templateUrl: 'partials/view2.html'
    }) .otherwise({
       templateUrl: 'partials/view1.html'
    });
	}])
On déclare deux deux vues partielles associées qui sont liées par les deux liens hypertextes dans index.html .

Examinons maintenant le contenu d une vue partielle:
view1.html 

 <script>
//@ sourceURL=http://localhost:8082/dynamicScript.js 
//cette ligne est pour le debugger de chrome
function view1Ctrl($scope){
 $scope.test="view1 Message";
}
</script>
<div ng-controller="view1Ctrl">
{{test}}
</div>
Dans cette vue on distingue le script en ligne qui nous sert directement de controller de la vue et la vue elle meme qui est intégrée

view2.html 

 <script>
//@ sourceURL=http://localhost:8082/dynamicScript.js 
//cette ligne est pour le debugger de chrome
function view2Ctrl($scope){
 $scope.test="view2 Message";
}
</script>
<div ng-controller="view2Ctrl">
{{test}}
</div>
Dans cette vue on distingue egalement le script en ligne qui nous sert directement de controller de la vue et la vue elle meme qui est intégrée

Exécuter maintenant l exemple et on verra que la page web s affiche comme prévu