Différences

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

--- web:javascript:angularjs:routing [2014/12/07 03:28] – [Query String] sgariepy
+++ web:javascript:angularjs:routing [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 99: / Ligne 99: @@
+==== reload() ====
+On peut recharger la vue de la route, sans recharger la page au complet.
+<code javascript>
+$route.reload();
+</code>
+==== HTML 5 Routing ====
+Il suffit d'injecter ''$locationProvider'' et utiliser:
+<code javascript>
+$locationProvider.html5mode(true);
+</code>
+==== Template ====
+Dans les routes, on peut spécifier directement ''template'' au lieu de ''templateUrl'', comme ce fût utilisé auparavant.  Le principal avantage de ça, c'est de pouvoir générer des templates sur le volet, à l'aide d'un service par exemple.
+<code javascript>
+$routeProvider.when('/event/:eventId', {
+  template: '<h1>Allo Monde.</h1>',
+  controller: 'EventController'
+});
+</code>
+Ou bien :
+<code javascript>
+$routeProvider.when('/event/:eventId', {
+  template: templateService.generateTemplate(),
+  controller: 'EventController'
+});
+</code>
+==== Resolve ====
+Si un certain travail doit être fait avant d'afficher le template, comme par exemple la récupération de données, on peut utiliser ''resolve''.  Quand ce qui est assigné à ''resolve'' sera //résolvé//, le template s'affiche.
+Dans l'exemple suivant, on veut que les données de l'événement soient disponibles avant l'affichage du template ''EventDetails.html''.
+<code javascript>
+$routeProvider.when('/event/:eventId', {
+  templateUrl: 'templates/EventDetails.html',
+  controller: 'EventController',
+  resolve: {
+    event: function($q, $route, $eventData) {
+      var deferred = $q.defer();
+      eventData.getEvent($route.current.pathParams.eventId).then(function(event) {
+        deferred.resolve(event);
+      });
+      return deferred.promise;
+    }
+  }
+});
+</code>
+Dans le contrôleur (dans notre cas ''EventController''), on n'utilise plus le ''eventData'', mais les données récupérés par le ''resolve'' :
+<code javascript>
+var $scope.event = $route.current.locals.event;
+</code>
+==== $location ====
+Au lieu d'utiliser des liens ''%%<a href="/newEvent"></a>%%'', on peut utiliser ''$location.url()'', dans une fonction par exemple appelée d'un bouton :
+<code html>
+<button class="btn" ng-click="createEvent()">Créer un événement</button>
+</code>
+Dans le contrôleur:
+<code javascript>
+$scope.createEvent = function() {
+  $location.url('/newEvent');
+};
+</code>
+Ayant l'URL suivant dans le navigateur ''%%http://localhost:8080/newEvent?foo=bar&eventId=2#qux%%'', voici
+^ Propriété  ^ Appel  ^ Exemple de retour  ^
+| ''absUrl''  | ''$location.absUrl()''  | ''%%http://localhost:8080/newEvent%%''  |
+| ''protocol''  | ''$location.protocol()''  | ''http''  |
+| ''port''  | ''$location.port()''  | ''8080''  |
+| ''host''  | ''$location.host()''  | ''localhost''  |
+| ''path''  | ''$location.path()''  | ''/newEvent''  |
+| ''search''  | ''$location.search()''  | ''%%Object {fooL "bar", eventId: "2"}%%''  |
+| ''hash''  | ''$location.hash()''  | ''qux''  |
+| ''url''  | ''$location.url()''  | ''/newEvent?foo=bar&eventId=2#qux''  |
+Les méthodes ''path()'', ''search()'', ''hash()'' et ''url()'' sont des méthodes que l'on peut lire les données (//getter//) et assigner la donnée (//setter//).  Les autres sont seulement des //getters//.
+=== replace() ===
+Permet de faire une //nouvelle page// sans faire une nouvelle page (ouin, c'est ça).  Ceci a pour effet par exemple, de supprimer l'historique du navigateur, comme si on avait fait un nouvel onglet et navigué à un certain URL, il n'y a pas d'historique associé à ce nouvel onglet.