Erste Schritte mit Ember und Ember CLI

Kernpunkte

• Ember CLI ist ein für Ember erstellter Befehlszeilenwerkzeug, das eine Vielzahl von Funktionen wie Generator, Kompressor, CSS -Präprozessor -Compiler, automatischem Nachladen und ES6 -Modullader kombiniert. Es kann als Alternative zu Tools wie Grunzen und Gulp verwendet werden, um neue Ember -Projekte einzurichten.
• Ember folgt dem Konzept, dass Konventionen besser sind als die Konfiguration, was bedeutet, dass es viele Standardeinstellungen hat, die den Entwicklungsprozess vereinfachen. Zu den wichtigsten Elementen gehören Routing, Controller, Vorlagen, Komponenten und Ember-Data.
• Dieses Tutorial bietet eine Schritt-für-Schritt-Anleitung zum Erstellen einer einfachen Kontaktmanageranwendung mit der Ember CLI. Es deckt die Funktionen zum Erstellen neuer Ember -Projekte, das Festlegen fester Daten, das Generieren von Benutzermodellen und das Routing, das Erstellen von Benutzervorlagen und das Hinzufügen von Anzeige- und Bearbeiten von Benutzerinformationen ab.
• Ember ist ein leistungsstarkes JavaScript -Framework zum Erstellen großer Webanwendungen. Mit der Ember CLI bietet es eine standardisierte Entwicklungsumgebung, die es einfacher macht, Abhängigkeiten zu verwalten, Aufgaben zu automatisieren und Best Practices auszuführen.

Ember hat sich im Laufe der Jahre viele Veränderungen unterzogen. Die größte Veränderung ist die Einführung von Ember CLI, einem für Ember erstellten Befehlszeilen -Tool. Es kombiniert eine Vielzahl von Funktionen wie Generator, Kompressor, CSS -Präprozessor -Compiler, automatischem Nachladen und ES6 -Modulloader. Mit diesem Befehlszeilen -Tool können Sie die Zeit verkürzt, die Sie damit ausgeben, Tools wie Grunz und Gulp einzurichten. Es ist wohl eine gute Alternative zu diesen Tools für jedes brandneue Ember -Projekt. In diesem Artikel erfahren Sie, wie Sie eine einfache Kontaktmanageranwendung mit der Ember CLI erstellen. Dieses Tutorial unterscheidet sich geringfügig von anderen Artikeln über Ember, die ich auf SitePoint gepostet habe, weil sie nicht mit der Ember CLI kommen. Die meisten dieser Konzepte gelten jedoch weiterhin. Ich empfehle, sie zu überprüfen und weiter zu lernen. Der vollständige Code für diesen Artikel finden Sie in GitHub.

So installieren Sie Ember Cli

Um die Ember CLI zu installieren, müssen Sie zuerst mehrere Abhängigkeiten installieren. Der erste ist Node.js. Sie benötigen mindestens Version 0.12.x. Als nächstes müssen Sie Bower installieren, der durch Ausführen des folgenden Befehls erfolgen kann:

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

Führen Sie dann den folgenden Befehl aus:

, um die Ember CLI zu installieren:

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

So erstellen Sie ein neues Ember -Projekt

Bevor Sie einen wunderbaren Betrieb starten, müssen Sie das Terminal öffnen und die folgenden Befehle ausführen, um einen neuen Projektordner namens ContactManager zu erstellen:

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

Zweiten Schritt gehen Sie zum Verzeichnis und installieren Sie alle NPM- und Bower -Abhängigkeiten mit dem folgenden Befehl:

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

Starten Sie zu diesem Zeitpunkt den integrierten Ember-Server, indem Sie den folgenden Befehl ausführen:

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

Sie können jetzt auf Ihre neue Anwendung bei URL Localhost: 4200 zugreifen. Dies ist der Standardport für die auf dem lokale Computer ausgeführte Ember -Anwendung, aber Sie können ihn so ändern, wie Sie möchten. Wenn Sie alle angewiesenen Schritte ausführen, sollten Sie jetzt einen Titel in Ihrem Browser sehen, auf dem "Willkommen bei Ember" steht.

EMBER -Konventionen und -strukturen

Bevor wir in die Anwendung eintauchen, überprüfen wir einige der Ember -Konventionen.

Router und Router

Routing ist der Einstiegspunkt für die Ember -Anwendung. Router -Definitionen werden in der Datei App/Router.js verwendet. Sie ermöglichen es Ihnen, auf verschiedene Teile der Anwendung zuzugreifen. Wenn Sie beispielsweise entscheiden, dass Sie Benutzer in Ihrer Anwendung verwalten müssen, müssen Sie Benutzerrouten definieren. Sie können dies mit der folgenden Syntax tun:

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

Dies erstellt die folgende URL für uns:

• /user/
• /user/index/
• /user/laden/

Nach Konvention erwartet Ember, wenn Sie eine Route definieren, andere Assoziationsarten wie Routen, Controller und Vorlagen finden. Wir können uns entscheiden, diese Typen explizit zu erstellen oder Ember für uns zu erstellen. In vielen Anwendungen müssen Sie sie höchstwahrscheinlich selbst erstellen, aber es liegt an Ihnen. Denken Sie daran, es ist entscheidend, zwischen Routern und Routen zu unterscheiden. Die oben erstellte URL -Struktur erfolgt mit einem Router. Diese zeigen nur die Absicht, die wir diese URLs in der Anwendung verwenden möchten. Wir haben keine tatsächlichen Routen erstellt, sondern nur URLs für diese Routen. Um eine Route zu erstellen, müssen wir diesen Prozess im Ordner Routes befolgen. Wenn Sie verwirrt sind, machen Sie sich keine Sorgen, da ich mich dieses Thema später in diesem Artikel tiefer betrachten werde.

Controller

Controller ist ein Typ, der zum Speichern des Ansichtszustands verwendet wird und im Ordner App/Controller liegt. Sie arbeiten in Verbindung mit Routing. In diesem Fall entspricht die obige URL /Benutzer /und erfordert einen Controller mit dem Namen /Benutzer /. Auch hier können wir frei wählen, ob wir es selbst definieren sollen. Der Controller definiert auch Ereignishandler für Ansichtsvorgänge (z. B. Klicks, Hobel usw.).

Vorlage

Die Vorlage ist der Darstellungsteil von Ember. Sie schreiben es in eine Vorlagensprache namens Lenker, die zu reinem HTML kompiliert. Die Vorlage befindet sich im Ordner App/Templates.

Komponenten

Komponenten sind kleine in sich geschlossene Funktionsblöcke. Sie können sie als eine Kombination von Darstellungen und Merkmalen vorstellen, sie sind wiederverwendbar und leicht zu warten.

ember-data

Dies ist eine Bibliothek des Ember Core-Teams, die den Ember-Kern ergänzt und als Front-End-ORM für die Verwaltung von Datenmodellen fungiert. Es gibt andere Alternativen, die ich noch nie benutzt habe und die nicht in diesem Artikel entfernt sind, da wir Ember-Data verwenden werden.

App

Die von uns erstellte Kontaktverwaltungsanwendung enthält eine Liste von Benutzern und deren verfügbare Kontaktinformationen. Mit der Anwendung können wir Benutzer erstellen, bearbeiten, löschen und anzeigen. Um unsere Bewerbung präzise und klar zu machen, werden wir den mit der Ember CLI gelieferten festen Adapter verwenden. Dies wirkt als Backend, außer dass die Daten nicht bestehen bleiben, wenn die Seite aktualisiert wird. Wenn Sie es nicht erstellt haben, verwenden Sie den Ember New ContactManager, um ein neues Ember -Projekt zu erstellen.

generieren Sie das Benutzermodell

Überziehen zum Projektordner und generieren Sie das Benutzermodell mit dem folgenden Befehl:

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

Erstellt eine Datei namens user.js in App/Models mit dem folgenden Inhalt:

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

Nehmen Sie die erforderlichen Änderungen vor, damit die Exportanweisung so aussieht:

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

Dies definiert die Eigenschaften, die unser Benutzermodell hat.

Benutzerroute erzeugen

Fügen Sie jetzt die folgenden Zeilen zu Ihrer Datei router.js hinzu, um uns einige verfügbare URLs zu geben:

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

Wir haben drei neue URLs. Eines ist die Auflistung von Benutzern, das andere ist das Anzeigen einzelner Benutzer und das letzte Mal, Benutzerinformationen zu bearbeiten. Erstellen wir als nächstes eine Benutzerroute mit dem folgenden Befehl:

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

Diese Route wird verwendet, um unsere Benutzerliste abzurufen. Ändern Sie seinen Inhalt mit dem folgenden Code -Snippet:

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

feste Daten festlegen und Benutzervorlagen

generieren

Fügen wir zu diesem Zeitpunkt unserer Anwendung einige temporäre Daten hinzu. Führen Sie dazu den folgenden Befehl aus:

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

generiert eine Datei mit dem Namen application.js in App/ Adapter/ Ordner. Standardmäßig verwendet Ember das RutAdapter, um das Modell abzufragen. In diesem Adapter geht davon aus, dass Sie über ein Backend -System verfügen, das Ihrer Ember -Client -Anwendung JSON -Daten zur Verfügung stellt. Da wir kein Backend haben, möchten wir in diesem Fall stattdessen feste Daten verwenden. Daher werden wir den Adaptercode wie folgt aktualisieren:

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

und fügen Sie Ihrem Benutzermodell Folgendes hinzu, um einige Vorrichtungen zu erstellen.

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

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

Wenn Sie zu URL Localhost: 4200/Benutzern navigieren, sehen Sie nur die alten Grußnachrichten und nicht die Benutzer, die wir gerade hinzugefügt haben. Um Benutzerdaten anzuzeigen, müssen wir eine Vorlage für den Benutzer mit dem folgenden Befehl erstellen:

<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>

Dies erstellt eine Datei namens user.hbs in der App/ templates/ im Ordner. Öffnen Sie diese Datei und aktualisieren Sie ihren Inhalt wie folgt:

<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>

Sie sollten jetzt eine Liste von Benutzern sehen, die jeweils einen Text bearbeiten. Da wir nur einen Benutzer in den festen Daten haben, werden wir nur einen Benutzer sehen. Sie können nach Bedarf mehr Benutzerobjekte in die Benutzeranlage hinzufügen. Stellen Sie einfach sicher, dass jedes Objekt eine eindeutige ID hat.

Zeigen Sie einzelne Benutzer

Nachdem wir unsere Benutzer aufgelistet haben, sehen wir sehen, wie die vollständigen Informationen des Benutzers angezeigt werden. Erste. Ändern Sie den Code in der Benutzervorlage, indem Sie den Text "Bearbeiten" neben jedem Benutzernamen mit einem Link einschließen. Dann ändern Sie "Bearbeiten" in:

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

Generieren wir als nächstes einen Benutzercontroller mit dem folgenden Befehl:

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

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

im Inneren (Benutzercontroller) ändern Sie den Inhalt in Folgendes:

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

Verwenden Sie nach Abschluss den folgenden Befehl, um eine Vorlage zum Bearbeiten des Benutzers zu generieren:

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

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

Derzeit ist die erstellte Vorlage (App/Vorlagen/Benutzer/show.hbs) leer. Öffnen Sie es und fügen Sie den folgenden Code hinzu:

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

Tun Sie dies und Sie sollten in der Lage sein, die vollständigen Informationen für jeden Benutzer anzuzeigen, auf den Sie klicken.

Einzelbenutzer bearbeiten

Wenn Sie einen einzelnen Benutzer bearbeiten möchten, müssen Sie einige einfache Schritte ausführen. Link zum Benutzer Bearbeiten Sie zunächst Routen, indem Sie den Text "Bearbeiten" neben jedem Benutzernamen mit einem Link einschließen. Dann ändern Sie "Bearbeiten" in:

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

Generieren wir als nächstes einen Benutzercontroller mit dem folgenden Befehl:

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

im Inneren (Benutzercontroller) ändern Sie den Inhalt in Folgendes:

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

Verwenden Sie nach Abschluss den folgenden Befehl, um eine Vorlage zum Bearbeiten des Benutzers zu generieren:

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

In der neuen Vorlagen -App/Vorlagen/Benutzer/Bearbeiten Sie den folgenden Code:

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

Dieser Code ruft bei der Übermittlung des Formulars die Funktion SaveUser () auf unserem Controller auf. Diese Funktion übergibt den zu bearbeitenden Benutzer und speichert die geänderten Informationen. Mit dieser Änderung können Sie die Details des Benutzers bearbeiten, wenn Sie auf den Link Bearbeiten für den Benutzer klicken. Wenn Sie auf die Schaltfläche Speichern klicken, können Sie sie speichern. Danach werden Sie wieder zur Benutzerliste umgeleitet. Es lebe! Wir haben jetzt einen einfachen Kontaktlistenmanager. Sie können es in eine vollständige Anwendung umwandeln, indem Sie es mit einem realen Backend anschließen, um Daten zu bestehen, wenn die Seite aktualisiert wird. Ich ermutige Sie auch, der App die Funktionen von Löschfunktionen hinzuzufügen, damit Sie jederzeit unerwünschte Benutzer löschen können.

Schlussfolgerung

ember https://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761 ist ein Framework für das Erstellen großer Webanwendungen. Es hat die Idee, dass Konventionen besser sind als die Konfiguration, was bedeutet, dass sie auf mehreren gemeinsamen Entscheidungen basiert und viele Standardeinstellungen (Konventionen) aufweist, was Ihren Entwicklungsprozess erleichtert. Auf diese Weise müssen Sie während des Entwicklungsprozesses nicht viele triviale Entscheidungen treffen. Ich hoffe, Sie haben es genossen, dieses Tutorial zu lesen und neue Dinge darüber zu lernen, wie Sie in Ihrem Projekt ein so leistungsstarkes und einfaches JavaScript -Framework verwenden können. Bitte teilen Sie uns mit, was Sie in den Kommentaren unten denken. Sie finden den Code für die Anwendung auf GitHub.

Häufig gestellte Fragen zum Einstieg mit Ember und Ember Cli

Was ist der Unterschied zwischen Ember und Ember CLI?

Ember ist ein JavaScript -Framework zum Erstellen von Webanwendungen, und Ember CLI ist ein Befehlszeilen -Tool, mit dem Sie Ember -Anwendungen erstellen, entwickeln und erstellen können. Ember CLI bietet eine standardisierte Entwicklungsumgebung, die es einfacher macht, Abhängigkeiten zu verwalten, Aufgaben zu automatisieren und Best Practices auszuführen.

Wie installiere ich Ember CLI?

Um Ember CLI zu installieren, müssen Sie Node.js und NPM auf Ihrem System installieren. Nach der Installation dieser Voraussetzungen können Sie die Ember -CLI mit dem folgenden Befehl im Terminal installieren: npm install -g ember-cli.

Ich erhalte eine Fehlermeldung mit der Aufschrift "Sie müssen im Ember CLI -Projekt sein, um den Befehl servieren zu können." Was bedeutet das?

Dieser Fehler tritt auf, wenn Sie versuchen, den Befehl ember serve außerhalb des Ember CLI -Projektverzeichnisses auszuführen. Um dieses Problem zu beheben, verwenden Sie den Befehl ember serve, um zum Stammverzeichnis des Projekts zu navigieren, bevor Sie cd ausgeführt werden.

Wie erstelle ich eine neue Ember -Anwendung mit der Ember CLI?

Sie können den Befehl ember new verwenden, gefolgt vom Namen der Anwendung, um eine neue Ember -Anwendung zu erstellen. Zum Beispiel erstellt ember new my-app eine neue Ember-Anwendung namens "My-App".

Welche grundlegenden Ember CLI -Befehle sollten ich wissen?

Einige grundlegende Ember -CLI -Befehle, die Sie wissen sollten, einschließlich ember new (eine neue Anwendung erstellen), ember serve (Starten Sie einen Entwicklungsserver), ember generate (generieren Sie eine neue Datei) und ember build (erstellen Sie Ihre Anwendung Programm zur Bereitstellung).

Wie baue ich meine Produktionsanwendung mit Ember CLI auf?

Sie können den Befehl ember build verwenden und die Option --environment auf "Produktion" festlegen, um Ihre Anwendung für die Produktion zu erstellen. Der Befehl sieht so aus: ember build --environment production.

Wie generiere ich mit Ember CLI neue Dateien in meiner Ember -Anwendung?

Sie können den Befehl ember generate verwenden, gefolgt vom Dateityp und seinem Namen, um eine neue Datei in der Ember -Anwendung zu generieren. Zum Beispiel wird ember generate route about eine neue Route namens "About" generieren.

Wie starte ich einen Entwicklungsserver mit Ember CLI?

Sie können den Entwicklungsserver mit dem Befehl ember serve starten. Dadurch wird der Server gestartet und Ihre Anwendung unter http: // localhost: 4200 zugänglich.

Wie aktualisiere ich die Ember CLI?

Sie können den Befehl npm uninstall -g ember-cli verwenden, um die alte Version zu deinstallieren und dann mit dem Befehl npm install -g ember-cli die neue Version zu installieren, um die Ember -CLI zu aktualisieren.

Was ist der Zweck der.ember-Cli-Datei?

.ember-cli Datei ist die Konfigurationsdatei der Ember CLI. Sie können das Verhalten Ihres Ember CLI -Projekts anpassen. Beispielsweise können Sie den Standardport des Entwicklungsservers angeben, bestimmte Funktionen aktivieren oder deaktivieren und mehr.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Ember und Ember CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!