ember.jsDémarrer avec ember.js


Remarques

Cette section fournit une vue d'ensemble de ce qu'est ember.js et pourquoi un développeur peut vouloir l'utiliser.

Il devrait également mentionner tous les sujets importants dans ember.js et établir un lien avec les sujets connexes. La documentation de ember.js étant nouvelle, vous devrez peut-être créer des versions initiales de ces rubriques connexes.

Versions

Version à jour

Version Date de sortie
2.14.0 beta 2017-04-29
2.13.0 2017-04-29

Installation ou configuration

Commencer avec Ember est facile. Les projets Ember sont créés et gérés via notre outil de génération de ligne de commande Ember CLI. Cet outil fournit:

  • Gestion moderne des ressources applicatives (y compris concaténation, minification et gestion des versions).
  • Générateurs pour aider à créer des composants, des itinéraires, etc.
  • Une mise en page de projet classique, facilitant l’approche des applications Ember existantes.
  • Prise en charge de JavaScript ES2015 / ES6 via le projet Babel . Cela inclut la prise en charge des modules JavaScript , utilisés dans ce guide.
  • Un harnais de test complet QUnit .
  • La capacité de consommer un écosystème croissant de Ember Addons .

Les dépendances

Node.js et npm

Ember CLI est construit avec JavaScript et attend le runtime Node.js. Il nécessite également des dépendances récupérées via npm . npm est fourni avec Node.js, donc si Node.js est installé sur votre ordinateur, vous êtes prêt à partir.

Ember nécessite Node.js 0.12 ou supérieur et npm 2.7 ou supérieur. Si vous n'êtes pas sûr d'avoir Node.js ou la bonne version, exécutez ceci sur votre ligne de commande:

node --version
npm --version

Si vous obtenez une erreur "commande introuvable" ou une version obsolète pour le noeud:

Si vous obtenez une version obsolète de npm, exécutez npm install -g npm .

Git

Ember exige que Git gère un grand nombre de ses dépendances. Git est livré avec Mac OS X et la plupart des distributions Linux. Les utilisateurs de Windows peuvent télécharger et exécuter ce programme d'installation de Git .

Gardien (optionnel)

Sur Mac et Linux, vous pouvez améliorer les performances de surveillance des fichiers en installant Watchman .

PhantomJS (optionnel)

Vous pouvez exécuter vos tests à partir de la ligne de commande avec PhantomJS, sans qu'un navigateur soit ouvert. Consultez les instructions de téléchargement de PhantomJS .

Installation

Installez Ember en utilisant npm:

npm install -g ember-cli

Pour vérifier que votre installation a réussi, exécutez:

ember -v

Si un numéro de version est affiché, vous êtes prêt à partir.

Affecter des ports localhost (en particulier des problèmes de permissions / disponibilité, exécutant simultanément plusieurs sites de braises)

Parfois, il est utile d'assigner manuellement un ou plusieurs ports par rapport aux paramètres par défaut. Cela peut résoudre les problèmes de disponibilité / autorisation de port ou permettre l'exécution de plusieurs instances de ember à la fois.


Pour que ember-cli tente d'identifier et d'attribuer un port disponible, utilisez:

ember serve --port 0
 

Aide à la journée: "Passez 0 pour sélectionner automatiquement un port disponible". (Dans un terminal, tapez help de la braise).


Pour exécuter simultanément plusieurs sites de braise, chacun a besoin de son propre serveur et de ses ports de rechargement en direct. Une approche simple: dans des fenêtres de terminal distinctes, accédez à chaque instance et utilisez les éléments suivants pour les lancer avec leurs propres ports:

ember serve --port 0 --live-reload-port 0
 

Si vous obtenez une erreur concernant la disponibilité ou l'autorisation dans l'un de ces cas, entrez le script python suivant à l'invite du terminal pour identifier un port disponible:

python -c 'import socket; s=socket.socket(); s.bind(("", 0)); print(s.getsockname()[1]); s.close()'
 

Utilisez les résultats pour spécifier les ports que vous savez maintenant être disponibles:

ember serve --port <known_port_1> --live-reload-port <known_port_2>
 

Créer une application

Ember CLI vous permet d'utiliser l'une des deux options suivantes pour générer une nouvelle application:

  1. Créez un dossier et exécutez ember init (génère la structure de l'application et configure git et effectue votre premier commit)
  2. Exécutez le ember new <app name> (crée un dossier avec le nom spécifié, le lance et exécute ember init )

Une fois le processus de génération terminé, démarrez un serveur live-reload dans le dossier de l'application en exécutant:

ember server
 

ou ember s pour faire court. * Ta-da, maintenant vous avez une application Ember en cours d'exécution! Documents officiels

Créer votre premier modèle

Créons un nouveau modèle en utilisant la commande ember generate .

ember generate template application
 

Le modèle d' application est toujours à l'écran lorsqu'un utilisateur visite votre application. Dans votre éditeur de choix, ouvrez app/templates/application.hbs et ajoutez le code suivant:

<h2>My first Ember application</h2>

{{outlet}}
 

Vous devriez maintenant voir le nouveau texte ajouté sur la page d'accueil de votre application. Notez également que Ember détecte automatiquement le nouveau fichier et recharge la page pour vous. Neat, non?

Déployer l'application

Pour déployer une application Ember, transférez simplement la sortie de la version ember sur un serveur Web. Cela peut être fait avec les outils de transfert de fichiers Unix standard tels que rsync ou scp . Il existe également des services qui vous permettront de déployer facilement.

ember build
scp -r dist/* myserver.com:/var/www/public/
 

normalement nous utiliserions ember build --environment=production qui fait plus pour rendre votre code prêt pour la production (gzip et minify code).

Comment travailler avec les plugins JavaScript

Il y a quatre façons de travailler avec les plugins JavaScript,

  1. Ember add-on
  2. Importer les plugins JavaScript globalement
  3. Consommez les plugins AMD nommés
  4. Via ember-browserify