Commencer avec Ember et Ember CLI

Points de base

• Ember CLI est un outil de ligne de commande construit pour Ember, qui combine une variété de fonctions telles que le générateur, le compresseur, le compilateur de préprocesseur CSS, le rechargement automatique et le chargeur de module ES6. Il peut être utilisé comme alternative à des outils comme Grunt et Gulp pour mettre en place de nouveaux projets Ember.
• Ember suit le concept selon lequel les conventions sont meilleures que la configuration, ce qui signifie qu'il a de nombreux paramètres par défaut qui simplifient le processus de développement. Les éléments clés incluent le routage, les contrôleurs, les modèles, les composants et les données de bilan.
• Ce tutoriel fournit un guide étape par étape sur la façon de créer une application de gestion de contact simple à l'aide de la CLI Ember. Il couvre les capacités de créer de nouveaux projets Ember, de définir des données fixes, de générer des modèles d'utilisateurs et de routage, de créer des modèles d'utilisateurs et d'ajouter des informations sur affichage et modification des utilisateurs.
• Ember est un puissant cadre JavaScript pour la création de grandes applications Web. Avec la CLI Ember, il fournit un environnement de développement standardisé qui facilite la gestion des dépendances, automatiser les tâches et exécuter les meilleures pratiques.

Ember a subi de nombreux changements au fil des ans. Le plus grand changement est l'introduction de Ember CLI, un outil de ligne de commande construit pour Ember. Il combine une variété de fonctions telles que le générateur, le compresseur, le compilateur CSS PRÉPROCESSEUR, le rechargement automatique et le chargeur de module ES6. Cet outil de ligne de commande vous aidera à réduire le temps que vous passez à configurer des outils comme Grunt et Gulp. C'est sans doute une bonne alternative à ces outils pour tout nouveau projet Ember. Dans cet article, vous apprendrez à créer une application de gestionnaire de contacts simple à l'aide de la CLI Ember. Ce tutoriel est légèrement différent des autres articles sur Ember que j'ai publiés sur SitePoint car ils ne viennent pas avec la CLI Ember. Cependant, la plupart de ces concepts s'appliquent toujours, je vous recommande donc de les vérifier et de continuer à apprendre. Le code complet de cet article peut être trouvé sur GitHub.

Comment installer CLI Ember

Pour installer la CLI Ember, vous devez d'abord installer plusieurs dépendances. Le premier est node.js. Vous avez besoin au moins de la version 0.12.x. Ensuite, vous devez installer Bower, ce qui peut être fait en exécutant la commande suivante:

<code class="language-bash">npm install -g bower</code>

Ensuite, pour installer la CLI Ember, exécutez la commande suivante:

<code class="language-bash">npm install -g ember-cli</code>

Comment créer un nouveau projet Ember

Avant de démarrer une opération merveilleuse, vous devez ouvrir le terminal et exécuter les commandes suivantes afin de créer un nouveau dossier de projet appelé ContactManager:

<code class="language-bash">ember new contactmanager</code>

Deuxième étape, accédez au répertoire et installez toutes les dépendances NPM et Bower en utilisant la commande suivante:

<code class="language-bash">cd contactmanager
npm install
bower install</code>

Pour le moment, démarrez le serveur Ember intégré en exécutant la commande suivante:

<code class="language-bash">ember serve</code>

Vous pouvez désormais accéder à votre nouvelle application sur URL LocalHost: 4200. Il s'agit du port par défaut pour l'application Ember en cours d'exécution sur l'ordinateur local, mais vous pouvez le modifier comme vous le souhaitez. Si vous suivez toutes les étapes instruites, vous devriez maintenant voir un titre dans votre navigateur qui dit "Bienvenue à Ember".

Conventions et structures enceintes

Avant de plonger dans la demande, passons en revue certaines des conventions de berceau.

routeur et routeur

Le routage

est le point d'entrée de l'application Ember. Les définitions du routeur sont utilisées dans le fichier app / router.js. Ils vous permettent d'accéder à différentes parties de l'application. Par exemple, si vous décidez que vous devez gérer les utilisateurs de votre application, vous devez définir les itinéraires utilisateur. Vous pouvez le faire en utilisant la syntaxe suivante:

<code class="language-bash">npm install -g bower</code>

Cela créera l'URL suivante pour nous:

• / utilisateurs /
• / utilisateurs / index /
• / utilisateurs / chargement /

Par convention, lorsque vous définissez une route, Ember prévoit de trouver d'autres types d'association, tels que les itinéraires, les contrôleurs et les modèles. Nous pouvons décider de créer ces types explicitement, ou permettre à Ember de les créer pour nous. Dans de nombreuses applications, vous devrez très probablement les créer vous-même, mais c'est à vous. N'oubliez pas qu'il est crucial de faire la distinction entre les routeurs et les itinéraires. La structure URL que nous avons créée ci-dessus se fait à l'aide d'un routeur. Ceux-ci ne montrent que l'intention que nous voulons utiliser ces URL dans l'application. Nous n'avons pas créé de routes réelles, mais juste des URL pour ces itinéraires. Pour créer une route, nous devons suivre ce processus dans le dossier des routes. Si vous êtes confus, ne vous inquiétez pas, car je vais regarder ce sujet plus profondément plus tard dans cet article.

Contrôleur

Le contrôleur est un type utilisé pour stocker l'état de vue, situé dans le dossier App / Contracelers. Ils fonctionnent en conjonction avec le routage. Dans ce cas, l'URL ci-dessus correspond à / user / et nécessite un contrôleur nommé / utilisateurs /. Ici aussi, nous sommes libres de choisir de le définir nous-mêmes. Le contrôleur définit également les gestionnaires d'événements pour les opérations de vue (tels que les clics, les planches, etc.).

Modèle

Le modèle est la partie de représentation de Ember. Vous l'écrivez dans une langue de modèle appelée guidon, qui compile en pur html. Le modèle est situé dans le dossier APP / Templates.

Composants

Les composants sont de petits blocs fonctionnels autonomes. Vous pouvez les considérer comme une combinaison de représentations et de caractéristiques, ils sont réutilisables et faciles à entretenir.

Ember-Data

Il s'agit d'une bibliothèque maintenue par l'équipe Ember Core qui complète le noyau Ember et agit comme un ORM frontal pour gérer les modèles de données. Il existe d'autres alternatives que je n'ai jamais utilisées auparavant et qui ne sont pas hors de la portée de cet article, car nous utiliserons les données de l'empeillets.

App

L'application de gestion des contacts que nous créerons comprendra une liste des utilisateurs et leurs coordonnées disponibles. L'application nous permettra de créer, modifier, supprimer et afficher les utilisateurs. Pour rendre notre application concise et claire, nous utiliserons l'adaptateur fixe fourni avec la CLI Ember. Cela agit comme un backend, sauf que les données ne sont pas persistées lorsque la page est actualisée. Tout d'abord, si vous ne l'avez pas créé, utilisez le nouveau ContactManager Ember pour créer un nouveau projet Ember.

générer un modèle utilisateur

Passez au dossier du projet et générez le modèle utilisateur à l'aide de la commande suivante:

<code class="language-bash">npm install -g ember-cli</code>

Cela créera un fichier nommé user.js dans l'application / les modèles, avec le contenu suivant:

<code class="language-bash">npm install -g bower</code>

apportez les modifications nécessaires afin que l'instruction d'exportation ressemble à ceci:

<code class="language-bash">npm install -g ember-cli</code>

Cela définit les propriétés que notre modèle utilisateur aura.

générer une route utilisateur

Maintenant, ajoutez les lignes suivantes à votre fichier router.js pour nous donner quelques URL disponibles:

<code class="language-bash">ember new contactmanager</code>

Nous avons trois nouvelles URL. L'un consiste à répertorier les utilisateurs, l'autre consiste à afficher les utilisateurs individuels et le dernier est de modifier les informations utilisateur. Ensuite, créons une route utilisateur en utilisant la commande suivante:

<code class="language-bash">cd contactmanager
npm install
bower install</code>

Cette route sera utilisée pour récupérer notre liste d'utilisateurs. Modifiez son contenu en utilisant l'extrait de code suivant:

<code class="language-bash">ember serve</code>

Définir les données fixes et générer des modèles d'utilisateur

À ce stade, ajoutons quelques données temporaires à notre application. Pour ce faire, exécutez la commande suivante:

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {});
});</code>

Cela générera un fichier nommé application.js dans l'application / adaptateurs / dossier. Par défaut, Ember utilise Restadapter pour interroger le modèle. Cet adaptateur suppose que vous avez un système backend qui fournit des données JSON à votre application client Ember. Comme nous n'avons pas de backend, dans ce cas, nous voulons utiliser des données fixes à la place. Par conséquent, nous mettrons à jour le code de l'adaptateur comme suit:

<code class="language-bash">ember generate model user</code>

et ajoutez ce qui suit à votre modèle d'utilisateur pour créer certains luminaires.

<code class="language-javascript">import DS from 'ember-data';

export default DS.Model.extend({
});</code>

Si vous naviguez vers URL LocalHost: 4200 / Users, vous ne verrez que les anciens messages de salutation, et non les données épinglées par l'utilisateur que nous venons d'ajouter. Pour afficher les données de l'utilisateur, nous devons créer un modèle pour l'utilisateur à l'aide de la commande suivante:

<code class="language-javascript">export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});</code>

Cela crée un fichier nommé users.hbs dans l'application / modèles / dossier. Ouvrez ce fichier et mettez à jour son contenu comme suit:

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});</code>

Vous devriez maintenant voir une liste d'utilisateurs, chacun avec un texte d'édition à côté. Parce que nous n'avons qu'un seul utilisateur dans les données fixes, nous ne verrons qu'un seul utilisateur. Vous pouvez ajouter plus d'objets utilisateur au luminaire utilisateur selon les besoins. Assurez-vous simplement que chaque objet a un ID unique.

Afficher les utilisateurs individuels

Maintenant que nous avons répertorié nos utilisateurs, voyons comment afficher les informations complètes de l'utilisateur. d'abord. Modifiez le code dans le modèle d'utilisateurs en entourant le texte "Modifier" à côté de chaque nom d'utilisateur avec un lien. Ensuite, modifiez "Modifier" vers:

<code class="language-bash">ember generate route users</code>

Ensuite, générons un contrôleur d'utilisateur en utilisant la commande suivante:

<code class="language-javascript">import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});</code>

à l'intérieur (contrôleur d'utilisateur), modifiez le contenu en ce qui suit:

<code class="language-bash">ember generate adapter application</code>

Après avoir terminé, utilisez la commande suivante pour générer un modèle pour modifier l'utilisateur:

<code class="language-javascript">import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
});</code>

Actuellement, le modèle créé (app / modèles / utilisateurs / show.hbs) est vide. Ouvrez-le et ajoutez le code suivant:

<code class="language-javascript">User.reopenClass({
   FIXTURES: [{
      id: 1,
      firstName: 'James',
      lastName: 'Rice',
      addressLine: '66 Belvue Road',
      postCode: 'M235PS',
      country: 'United Kingdom'
   }]
});</code>

Faites cela et vous devriez pouvoir voir les informations complètes pour chaque utilisateur sur lequel vous cliquez.

Modifier un seul utilisateur

Si vous souhaitez modifier un seul utilisateur, vous devez suivre quelques étapes simples. Tout d'abord, lien vers l'utilisateur d'édition des routes en enfermant le texte "Modifier" à côté de chaque nom d'utilisateur avec un lien. Ensuite, modifiez "Modifier" vers:

<code class="language-bash">npm install -g bower</code>

Ensuite, générons un contrôleur d'utilisateur en utilisant la commande suivante:

<code class="language-bash">npm install -g ember-cli</code>

à l'intérieur (contrôleur d'utilisateur), modifiez le contenu en ce qui suit:

<code class="language-bash">ember new contactmanager</code>

Après avoir terminé, utilisez la commande suivante pour générer un modèle pour modifier l'utilisateur:

<code class="language-bash">cd contactmanager
npm install
bower install</code>

Dans le nouveau modèle App / Templates / Users / Edit, collez le code suivant:

<code class="language-bash">ember serve</code>

Ce code appelle la fonction SaveUser () sur notre contrôleur lors de la soumission du formulaire. Cette fonction transmet l'utilisateur en cours de modification et enregistre les informations modifiées. Avec ce changement, vous pouvez modifier les détails de l'utilisateur lorsque vous cliquez sur le lien d'édition pour l'utilisateur. Lorsque vous cliquez sur le bouton Enregistrer, vous pouvez les enregistrer, après quoi vous serez redirigé vers la liste d'utilisateurs. Vive! Nous avons maintenant un simple gestionnaire de liste de contacts. Vous pouvez le convertir en une application complète en la connectant à un véritable backend en données persistant lorsque la page actualise. Je vous encourage également à ajouter des fonctionnalités de suppression à l'application afin que vous puissiez supprimer les utilisateurs indésirables à tout moment.

Conclusion

Ember https://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761 est un cadre pour créer de grandes applications Web. Il a l'idée que les conventions sont meilleures que la configuration, ce qui signifie qu'elle est basée sur plusieurs décisions courantes et a de nombreuses valeurs par défaut (conventions), ce qui facilite votre processus de développement. De cette façon, vous n'avez pas à prendre de nombreuses décisions triviales pendant le processus de développement. J'espère que vous avez aimé lire ce tutoriel et apprendre de nouvelles choses sur la façon d'utiliser un framework JavaScript aussi puissant et aussi simple dans votre projet. Veuillez nous dire ce que vous pensez dans les commentaires ci-dessous. Vous pouvez trouver le code de l'application sur GitHub.

Les questions fréquemment posées sur le début de la bercette et de la berceuse

Quelle est la différence entre la CLI Ember et Ember?

Ember est un cadre JavaScript pour la création d'applications Web, et Ember CLI est un outil de ligne de commande qui vous aide à créer, développer et créer des applications Ember. Ember CLI fournit un environnement de développement standardisé qui facilite la gestion des dépendances, automatiser les tâches et exécuter les meilleures pratiques.

Comment installer Ember CLI?

Pour installer Ember CLI, vous devez installer Node.js et NPM sur votre système. Après avoir installé ces conditions préalables, vous pouvez installer la CLI Ember en utilisant la commande suivante dans le terminal: npm install -g ember-cli.

Je reçois un message d'erreur disant "vous devez être à l'intérieur du projet CLI Ember pour utiliser la commande Serve". Qu'est-ce que cela signifie?

Cette erreur se produit lorsque vous essayez d'exécuter la commande ember serve à l'extérieur du répertoire du projet CLI Ember. Pour résoudre ce problème, utilisez la commande ember serve pour accéder au répertoire racine du projet avant d'exécuter cd.

Comment créer une nouvelle application Ember à l'aide de la CLI Ember?

Vous pouvez utiliser la commande ember new suivie du nom de l'application pour créer une nouvelle application Ember. Par exemple, ember new my-app créera une nouvelle application Ember appelée "My-App".

Quelles commandes de base CLI Ember dois-je savoir?

certaines commandes de base CLI Ember que vous devez savoir inclure ember new (créer une nouvelle application), ember serve (démarrer un serveur de développement), ember generate (générer un nouveau fichier) et ember build (créez votre application programme de déploiement).

Comment créer mon application de production à l'aide de CLI Ember?

Vous pouvez utiliser la commande ember build et définir l'option --environment sur "Production" pour créer votre application de production. La commande ressemble à ceci: ember build --environment production.

Comment générer de nouveaux fichiers dans mon application Ember à l'aide de CLI Ember?

Vous pouvez utiliser la commande ember generate suivie du type de fichier et de son nom pour générer un nouveau fichier dans l'application Ember. Par exemple, ember generate route about générera un nouvel itinéraire appelé "About".

Comment démarrer un serveur de développement en utilisant Ember CLI?

Vous pouvez démarrer le serveur de développement à l'aide de la commande ember serve. Cela démarrera le serveur et rendra votre application accessible sur http: // localhost: 4200.

Comment mettre à jour la CLI Ember?

Vous pouvez utiliser la commande npm uninstall -g ember-cli pour désinstaller l'ancienne version, puis utiliser la commande npm install -g ember-cli pour installer la nouvelle version pour mettre à jour la CLI Ember.

Quel est le but du fichier.

.ember-cli Le fichier est le fichier de configuration de la CLI Ember. Il vous permet de personnaliser le comportement de votre projet CLI Ember. Par exemple, vous pouvez spécifier le port par défaut du serveur de développement, activer ou désactiver certaines fonctionnalités, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!