Ceci est une ancienne révision du document !
TD n°0
Exemple de démonstration : projet first-app
Objectifs
- Créer des routes, des models, utiliser les templates
- Montrer la cohérence et la simplicité du framework
Pré-requis
Installations
- Node + npm
- ember-cli
- WebStorm + ember.js plugin
- plugin Ember inspector
Création du projet
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
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.
Data-binding
Dans app/templates/user.hbs
{{input value=this.nom}} <div>{{nom}}</div>
Routage
Créer une route client
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}}