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/03/03 14:35] – [4.1- Création d'une route] 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 92: Ligne 93:
  
 <html><div class="note"></html> <html><div class="note"></html>
-<strong>Attention de respecter l'ordre logique d'insertion des fichiers :</strong>+**Attention de respecter l'ordre logique d'insertion des fichiers :**
   - angular.min.js   - angular.min.js
   - angular-route.min.js   - angular-route.min.js
Ligne 107: 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 121: 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 131: 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 164: 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 177: 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 203: 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 211: 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 217: 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 279: 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 286: 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 313: 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 323: 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>
  
  • slam4/richclient/angularjs/routing.1425389735.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)