EmberJS - Création et exécution d'une application

Vous pouvez facilement configurer Ember.js dans votre système. L'installation d'Ember.js est expliquée dans le chapitre Installation d'EmberJS .

Créer une application

Créons une application simple en utilisant Ember.js. Créez d'abord un dossier dans lequel vous créez vos applications. Par exemple, si vous avez créé le dossier «emberjs-app», accédez à ce dossier en tant que -

$ cd ~/emberjs-app

Dans le dossier "emberjs = app", créez un nouveau projet en utilisant la nouvelle commande -

$ ember new demo-app

Lorsque vous créez un projet, une nouvelle commande fournit la structure de répertoires suivante avec des fichiers et des répertoires -

|-- app
|-- bower_components
|-- config
|-- dist
|-- node_modules
|-- public
|-- tests
|-- tmp
|-- vendor

bower.json
ember-cli-build.js
package.json
README.md
testem.js

  • app - Il spécifie les dossiers et fichiers des modèles, itinéraires, composants, modèles et styles.

  • bower_components / bower.json- Il est utilisé pour gérer les composants tels que HTML, CSS, JavaScript, fichiers image, etc. et peut être installé en utilisant le npm. Le répertoire bower_components contient tous les composants Bower et bower.json contient la liste des dépendances qui sont installées par Ember, Ember CLI Shims et QUnit.

  • config- Il contient le répertoire environment.js qui est utilisé pour configurer les paramètres d'une application.

  • dist - Il comprend les fichiers de sortie qui sont déployés lors de la création de l'application.

  • node_modules / package.json- NPM est un gestionnaire de packages de nœuds pour Node.js qui est utilisé pour installer, partager et gérer les dépendances dans les projets. Le fichier package.json inclut les dépendances npm actuelles d'une application et les packages répertoriés sont installés dans lenode_modules annuaire.

  • public - Il comprend des éléments tels que des images, des polices, etc.

  • vendor - C'est un répertoire dans lequel les dépendances frontales telles que JavaScript, CSS ne sont pas contrôlées par Bower go.

  • tests / testem.js- Les tests automatisés sont stockés dans le dossier tests et le testeur testem d'Ember CLI est organisé dans testem.js .

  • tmp - Il contient les fichiers temporaires d'Ember CLI.

  • ember-cli-build.js - Il spécifie comment créer l'application à l'aide de l'interface de ligne de commande Ember.

Application en cours d'exécution

Pour exécuter l'application, accédez au répertoire de projet nouvellement créé -

$ cd demo-app

Nous avons créé le nouveau projet et il est prêt à fonctionner avec la commande donnée ci-dessous -

$ ember server

Ouvrez maintenant le navigateur et accédez à http://localhost:4200/. Vous obtiendrez la page de bienvenue Ember comme indiqué dans l'image ci-dessous -