richclient:emberjs:td3

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
richclient:emberjs:td3 [2018/02/20 23:19] – [TD n°3] jcheronrichclient:emberjs:td3 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 4: Ligne 4:
 |< 100% >| |< 100% >|
 | {{::ember.png?150|}} | Tous les exercices utilisent [[https://getbootstrap.com|Bootstrap]] pour la partie CSS. <sxh bash;gutter:false> ember install ember-bootstrap </sxh> | | {{::ember.png?150|}} | Tous les exercices utilisent [[https://getbootstrap.com|Bootstrap]] pour la partie CSS. <sxh bash;gutter:false> ember install ember-bootstrap </sxh> |
-| ::: | Pour passer à la v4 de bootstrap (sass requis) : <sxh bash;gutter:false> npm install --save-dev ember-cli-sass 
-ember generate ember-bootstrap --bootstrap-version=4</sxh> | 
 | ::: | pour les fonts : <sxh bash;gutter:false>ember install ember-font-awesome</sxh> | | ::: | pour les fonts : <sxh bash;gutter:false>ember install ember-font-awesome</sxh> |
 <html></div></html> <html></div></html>
Ligne 18: Ligne 16:
 <html></div></html> <html></div></html>
  
-Renommer le projet **td2** en **td2-3**+<html><div class="note"></html> 
 +Le plugin **ember-local-storage** remplace le module **ember-localstorage-adapter** auquel la documentation officielle emberJS fait référence. 
 +<html></div></html>
  
-Ajouter le plugin **ember-localstorage-adapter** pour stocker des models côté client :+Ajouter le plugin **ember-local-storage** pour stocker des models côté client :
  
 <sxh bash;gutter:false> <sxh bash;gutter:false>
-ember install ember-localstorage-adapter+ember install ember-local-storage
 </sxh> </sxh>
  
-====== Adapter et Serializer ======+===== Adapter et Serializer =====
  
 Créer l'adapter : Créer l'adapter :
Ligne 35: Ligne 35:
 Définir le namespace **contact-app**, clé sous laquelle les données seront enregistrées dans le local storage Définir le namespace **contact-app**, clé sous laquelle les données seront enregistrées dans le local storage
 <sxh javascript;title:app/adapters/application.js> <sxh javascript;title:app/adapters/application.js>
-import LSAdapter from 'ember-localstorage-adapter';+import Adapter from 'ember-local-storage/adapters/local';
  
-export default LSAdapter.extend({ +export default Adapter.extend({ 
-  namespace: 'contact-app'+  modelNamespace: 'contact-app'
 }); });
 </sxh> </sxh>
Ligne 48: Ligne 48:
  
 <sxh javascript;title:app/serializers/application.js> <sxh javascript;title:app/serializers/application.js>
-import { LSSerializer } from 'ember-localstorage-adapter'; +export { default } from 'ember-local-storage/serializers/serializer';
- +
-export default LSSerializer.extend();+
 </sxh> </sxh>
  
 ===== Gestion des contacts ===== ===== Gestion des contacts =====
-==== -- Objectifs ====+==== - Objectifs ====
   - Models et Store   - Models et Store
   - Computed properties   - Computed properties
   - Création de composants   - Création de composants
  
-==== -- Fonctionnalités ====+==== - Fonctionnalités ====
   - Obtenir la liste des contacts et la filtrer   - Obtenir la liste des contacts et la filtrer
   - Ajouter un contact dans la liste   - Ajouter un contact dans la liste
Ligne 72: Ligne 70:
 ^::: | <html><span class="variable">prenom</span></html>\\ string | ^::: | <html><span class="variable">prenom</span></html>\\ string |
 ^::: | <html><span class="variable">email</span></html>\\ string | ^::: | <html><span class="variable">email</span></html>\\ string |
-^::: | <html><span class="variable">deleted</span></html>\\ false | +==== - Route/Model/actions ====
- +
-==== -- Route/Model/actions ====+
  
 === /contacts === === /contacts ===
Ligne 103: Ligne 99:
 ^**actions** | <html><span class="method">updateContact(datas)</span></html>\\ Modifie le contact dans le store  | ^**actions** | <html><span class="method">updateContact(datas)</span></html>\\ Modifie le contact dans le store  |
  
-==== -- Vues ====+==== - Vues ====
  
-=== -- Interface ===+=== - Interface ===
 {{:slam4:richclient:angularjs:ex3.png?600|}} {{:slam4:richclient:angularjs:ex3.png?600|}}
  
 <html><a target="_new" href="http://angular.kobject.net/ex4" class="btn">Tester l'appli <b>Gestion de contacts</b></a></html> <html><a target="_new" href="http://angular.kobject.net/ex4" class="btn">Tester l'appli <b>Gestion de contacts</b></a></html>
  
-=== -- Logique applicative / comportement de l'interface ===+=== - Logique applicative / comportement de l'interface ===
  
   * Zone filter : filtre l'ensemble des contacts affichés.   * Zone filter : filtre l'ensemble des contacts affichés.
  • richclient/emberjs/td3.1519165142.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)