slam4:richclient:angularjs:routing

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

slam4:richclient:angularjs:routing [2015/01/26 02:32] – jcheronslam4:richclient:angularjs:routing [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 58: Ligne 58:
 <sxh html;title:views/route1-template.html> <sxh html;title:views/route1-template.html>
 <h1>Route1</h1> <h1>Route1</h1>
-<div ng-bind="content1"></div>+<div ng-bind="rtCtrl1.content1"></div>
 </sxh> </sxh>
 ===== -- Configuration du routage ===== ===== -- Configuration du routage =====
Ligne 72: Ligne 72:
                 when('/route1', {                 when('/route1', {
                     templateUrl: 'views/route1-template.html',                     templateUrl: 'views/route1-template.html',
-                    controller: 'RouteController'+                    controller: 'RouteController', 
 +                    controllerAs:'rtCtrl1'
                 });                 });
         }]);         }]);
Ligne 82: Ligne 83:
  
 <sxh javascript;title:app/controllers.js> <sxh javascript;title:app/controllers.js>
-angular.module("sampleApp").controller("RouteController",["$scope",function($scope){ +angular.module("sampleApp").controller("RouteController",[function(){ 
- $scope.content1="Contenu du template de route1"+ this.content1="Contenu du template de route1"
 }]); }]);
 </sxh> </sxh>
Ligne 91: Ligne 92:
 {{:slam4:richclient:angularjs:route1.png?nolink|}} {{:slam4:richclient:angularjs:route1.png?nolink|}}
  
 +<html><div class="note"></html>
 +**Attention de respecter l'ordre logique d'insertion des fichiers :**
 +  - angular.min.js
 +  - angular-route.min.js
 +  - app/app.js
 +  - app/controller.js
 +  - app/routing.js
 +<html></div></html>
 ==== -- Route avec paramètre passé ==== ==== -- Route avec paramètre passé ====
  
Ligne 99: Ligne 108:
                 when('/route1', {                 when('/route1', {
                     templateUrl: 'views/route1-template.html',                     templateUrl: 'views/route1-template.html',
-                    controller: 'RouteController'+                    controller: 'RouteController', 
 +                    controllerAs: 'rtCtrl1'
                 }).                 }).
                 when('/route2/:nom', {                 when('/route2/:nom', {
                     templateUrl: 'views/route2-template.html',                     templateUrl: 'views/route2-template.html',
-                    controller: 'RouteController'+                    controller: 'RouteController', 
 +                    controllerAs: 'rtCtrl2'
                 });                 });
         }]);         }]);
Ligne 113: Ligne 124:
  
 <sxh javascript;title:app/controllers.js;highlight:[1,3]> <sxh javascript;title:app/controllers.js;highlight:[1,3]>
-angular.module("sampleApp").controller("RouteController",["$scope","$routeParams",function($scope,$routeParams){ +angular.module("sampleApp").controller("RouteController",["$routeParams",function($routeParams){ 
- $scope.content1="Contenu du template de route1"; + this.content1="Contenu du template de route1"; 
- $scope.params=$routeParams;+ this.params=$routeParams;
 }]); }]);
 </sxh> </sxh>
Ligne 123: Ligne 134:
 <sxh html;title:views/route2-template.html> <sxh html;title:views/route2-template.html>
 <h1>Route2</h1> <h1>Route2</h1>
-<div>Bienvenue M. {{params.nom}}</div>+<div>Bienvenue M. {{rtCtrl2.params.nom}}</div>
 </sxh> </sxh>
  
Ligne 156: Ligne 167:
 <sxh html;title:views/route2-template.html> <sxh html;title:views/route2-template.html>
 <h1>Route2</h1> <h1>Route2</h1>
-<div>Bienvenue M. {{params.prenom}} {{params.nom}}</div>+<div>Bienvenue M. {{rtCtrl2.params.prenom}} {{rtCtrl2.params.nom}}</div>
 </sxh> </sxh>
- 
 ==== -- Route par défaut ==== ==== -- Route par défaut ====
  
 Il est possible de définir la route par défaut : celle qui sera utilisée si toutes les autres routes ne trouvent pas leur correspondance : Il est possible de définir la route par défaut : celle qui sera utilisée si toutes les autres routes ne trouvent pas leur correspondance :
  
-<sxh javascript;title:app/routing.js;highlight:[11,12]>+<sxh javascript;title:app/routing.js;highlight:[12,13]>
 angular.module("sampleApp").config(['$routeProvider', angular.module("sampleApp").config(['$routeProvider',
        function($routeProvider) {        function($routeProvider) {
Ligne 169: Ligne 179:
                when('/route1', {                when('/route1', {
                    templateUrl: 'views/route1-template.html',                    templateUrl: 'views/route1-template.html',
-                   controller: 'RouteController'+                   controller: 'RouteController', 
 +                    controllerAs: 'rtCtrl1'
                }).                }).
                when('/route2/:nom', {                when('/route2/:nom', {
                    templateUrl: 'views/route2-template.html',                    templateUrl: 'views/route2-template.html',
-                   controller: 'RouteController'+                   controller: 'RouteController', 
 +                    controllerAs: 'rtCtrl2'
                }).otherwise({                }).otherwise({
             redirectTo: '/route1'             redirectTo: '/route1'
Ligne 195: Ligne 207:
  
 Le lien inexistant vers **#/route3** conduit bien maintenant à la route par défaut **route1**  Le lien inexistant vers **#/route3** conduit bien maintenant à la route par défaut **route1** 
- 
- 
 ==== -- Masquage du # dans l'URL ==== ==== -- Masquage du # dans l'URL ====
  
Ligne 203: Ligne 213:
 Pour masquer le # dans les urls utilisées, il est nécessaire d'injecter le service **$locationProvider** dans la configuration du routeur, pour activer le mode html5 : Pour masquer le # dans les urls utilisées, il est nécessaire d'injecter le service **$locationProvider** dans la configuration du routeur, pour activer le mode html5 :
  
-<sxh javascript;title:routes.js;highlight:[1,14,15,16]>+<sxh javascript;title:routing.js;highlight:[1,15,16,17]>
 angular.module("sampleApp").config(['$routeProvider','$locationProvider', angular.module("sampleApp").config(['$routeProvider','$locationProvider',
        function($routeProvider,$locationProvider) {        function($routeProvider,$locationProvider) {
Ligne 209: Ligne 219:
                when('/route1', {                when('/route1', {
                    templateUrl: 'views/route1-template.html',                    templateUrl: 'views/route1-template.html',
-                   controller: 'RouteController'+                   controller: 'RouteController', 
 +                    controllerAs: 'rtCtrl1'
                }).                }).
                when('/route2/:nom', {                when('/route2/:nom', {
                    templateUrl: 'views/route2-template.html',                    templateUrl: 'views/route2-template.html',
-                   controller: 'RouteController'+                   controller: 'RouteController', 
 +                    controllerAs: 'rtCtrl2'
                }).otherwise({                }).otherwise({
             redirectTo: '/route1'             redirectTo: '/route1'
Ligne 222: Ligne 234:
        }]);        }]);
 </sxh> </sxh>
 +
 +=== -- Définition de la base Href ===
 +
 +Dans le fichier par défaut v_main.html, ajouter la définition de la base des urls utilisées :
 +
 +<sxh html;title:v-main.html>
 +
 +<head>
 +    <base href="/siteBaseURL/"/>
 +    ...
 +</head>
 +</sxh>
 +
 +Toutes les URLs utilisées (inclusions de js, CSS, templates) se feront à l'avenir à partir de cette localisation de base.
  
 === -- Modification des URLs === === -- Modification des URLs ===
Ligne 257: Ligne 283:
 RewriteRule ^ v_main.html [L] RewriteRule ^ v_main.html [L]
 </sxh> </sxh>
- 
 ===== -- Conservation de variables entre changements de vues ===== ===== -- Conservation de variables entre changements de vues =====
  
Ligne 264: Ligne 289:
 <sxh html;title:views/route2-template.html> <sxh html;title:views/route2-template.html>
 <h1>Route2</h1> <h1>Route2</h1>
-<div>Bienvenue M. {{params.nom}} {{params.prenom}}</div>+<div>Bienvenue M. {{rtCtrl2.params.nom}} {{rtCtrl2.params.prenom}}</div>
 <div><label>Entrez votre code : <input type="text" ng-model="code"></label></div> <div><label>Entrez votre code : <input type="text" ng-model="code"></label></div>
 </sxh> </sxh>
Ligne 291: Ligne 316:
  
 <sxh javascript;title:controllers.js;highlight:[1,4]> <sxh javascript;title:controllers.js;highlight:[1,4]>
-angular.module("sampleApp").controller("RouteController",["$scope","$routeParams","code",function($scope,$routeParams,code){ +angular.module("sampleApp").controller("RouteController",["$routeParams","code",function($routeParams,code){ 
- $scope.content1="Contenu du template de route1"; + this.content1="Contenu du template de route1"; 
- $scope.params=$routeParams; + this.params=$routeParams; 
- $scope.code=code;+ this.code=code;
 }]); }]);
 </sxh> </sxh>
Ligne 301: Ligne 326:
 <sxh javascript;title:views/route2-template.html;highlight:[3]> <sxh javascript;title:views/route2-template.html;highlight:[3]>
 <h1>Route2</h1> <h1>Route2</h1>
-<div>Bienvenue M. {{params.nom}} {{params.prenom}}</div> +<div>Bienvenue M. {{rtCtrl2.params.nom}} {{rtCtrl2.params.prenom}}</div> 
-<div><label>Entrez votre code : <input type="text" ng-model="code.value"></label></div>+<div><label>Entrez votre code : <input type="text" ng-model="rtCtrl2.code.value"></label></div>
 </sxh> </sxh>
  
 En cas de changement de vue (passage de route2 à route1 puis retour à route2), les modifications opérées sur la variable code sont conservées (grâce à la closure créée par la factory).  En cas de changement de vue (passage de route2 à route1 puis retour à route2), les modifications opérées sur la variable code sont conservées (grâce à la closure créée par la factory). 
 +
 +
 +===== -- Autres directives =====
 +
 +D'autres directives existent, permettant de gérer le contenu et/ou les templates affichés, mais elles n'utilisent pas le routage :
 +
 +  * [[https://docs.angularjs.org/api/ng/directive/ngInclude|ng-include]]
 +  * [[https://docs.angularjs.org/api/ng/directive/ngSwitch|ng-switch]]
  • slam4/richclient/angularjs/routing.1422235937.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)