TD n°0

Exemple de démonstration : projet first-app

1. Créer des routes, des models, utiliser les templates
2. Montrer la cohérence et la simplicité du framework

• Node + npm
• ember-cli
• WebStorm + ember.js plugin
• plugin Ember inspector

Créer le projet first-app dans votre dossier local ember-tds

cd ember-tds
ember new first-app

Démarrer le serveur ember :

cd first-app
ember serve

Création d'une route (se placer dans le dossier du projet) :

ember generate route user

ou en version plus courte :

ember g route user

L'url http://127.0.0.1:4200/user est maintenant accessible.

Dans app/templates/user.hbs

{{input value=this.nom}}
<div>{{nom}}</div>

Cet exemple illustre les routes imbriquées

Créer une route client

Définir le model hook dans app/routes/client.js

export default Route.extend({
  model(){
    return {nom:'Smith',
            details:'Des détails sur Smith...'}
  }
});

Dans app/templates/client.hbs

<h1>{{model.nom}}</h1>
{{#link-to "client.details"}}
  Détails
{{/link-to}}
{{outlet}}

Créer une route client/details

Modifier app/routes/client/details.js pour y ajouter une action permettant de masquer le detail (en retournant à la page client)

export default Route.extend({
  actions:{
    fermer(){
      this.transitionTo('client');
    }
  }
});

Modifier le template app/templates/client/details.hbs :

{{model.details}}
<button {{action "fermer"}}>Fermer</button>