Différences

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

--- richclient:emberjs:services [2018/01/26 11:26] – créée jcheron
+++ richclient:emberjs:services [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== Services ======
-Un service Ember (**Ember.Service**) est un objet dont la durée de vie est celle de l'application, et qui sera accessible depuis tous ses éléments
+Un service Ember (**Ember.Service**) est un objet dont la durée de vie est celle de l'application, et qui sera accessible depuis tous ses éléments.
+Les services peuvent être utilisés pour toutes les opérations relatives à une application :
+  * User/session authentication.
+  * Geolocation.
+  * WebSockets.
+  * Server-sent events or notifications.
+  * Server-backed API calls that may not fit Ember Data.
+  * Third-party APIs.
+  * Logging.
+===== Création =====
+Avec ember-cli :
+<sxh bash;gutter:false>
+ember generate service shopping-cart
+</sxh>
+Un service hérite de la classe **Ember.Service** :
+<sxh javascript;title:app/services/shopping-cart.js>
+import Ember from 'ember';
+export default Ember.Service.extend({
+});
+</sxh>
+Comme les autres objets Ember, un service est initialisé (init) et peut avoir des propriétés et des méthodes. Ci-dessous, le service shopping cart permet de gérer un tableau d'items présents dans le pannier :
+<sxh javascript;title:app/services/shopping-cart.js>
+import Ember from 'ember';
+export default Ember.Service.extend({
+  items: null,
+  init() {
+    this._super(...arguments);
+    this.set('items', []);
+  },
+  add(item) {
+    this.get('items').pushObject(item);
+  },
+  remove(item) {
+    this.get('items').removeObject(item);
+  },
+  empty() {
+    this.get('items').clear();
+  }
+});
+</sxh>
+===== Accès à un service =====
+L'accès à un service se fait par injection de dépendance.
+<sxh javascript;title:app/components/cart-contents.js>
+import Ember from 'ember';
+export default Ember.Component.extend({
+  //will load the service in file /app/services/shopping-cart.js
+  shoppingCart: Ember.inject.service()
+});
+</sxh>
+<sxh javascript;title:app/components/cart-contents.js>
+import Ember from 'ember';
+export default Ember.Component.extend({
+  //will load the service in file /app/services/shopping-cart.js
+  cart: Ember.inject.service('shopping-cart')
+});
+</sxh>
+Utilisation du service injecté dans une action (accès par son getter) :
+<sxh javascript;title:app/components/cart-contents.js>
+import Ember from 'ember';
+export default Ember.Component.extend({
+  cart: Ember.inject.service('shopping-cart'),
+  actions: {
+    remove(item) {
+      this.get('cart').remove(item);
+    }
+  }
+});
+</sxh>