Différences

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

--- web:javascript:angularjs:routing [2014/12/08 04:43] – [Resolve] sgariepy
+++ web:javascript:angularjs:routing [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 139: / Ligne 139: @@
 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', {
-  template: '<h1>Allo Monde.</h1>',
+  templateUrl: 'templates/EventDetails.html',
-  controller: 'EventController'
+  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.