Einrichtung der JavaScript-Umgebung für Angular 2
In diesem Kapitel zeigen wir Ihnen, wie Sie die Angular 2-Ausführungsumgebung konfigurieren.
Dieses Kapitel verwendet JavaScript zum Erstellen von Angular-Anwendungen; Sie können natürlich auch TypeScript und Dart verwenden, um Angular-Anwendungen zu erstellen.
Die in diesem Kapitel verwendete Dateiverzeichnisstruktur ist wie folgt:
Konfigurationsdatei erstellen
Verzeichnis erstellen
$ mkdir angular-quickstart $ cd angular-quickstart
Erforderliche Bibliotheken laden
Hier empfehlen wir die Verwendung von npm als Paketverwaltungstool. Wenn Sie npm noch nicht installiert haben oder mit npm nicht vertraut sind, können Sie sich unser Tutorial ansehen:NPM-Nutzungseinführung。
Erstellen Sie die Datei package.json, der Code lautet wie folgt:
package.json-Datei:
Da der Zugriff auf den offiziellen npm-Mirror in China zu langsam ist, habe ich hier den npm-Mirror von Taobao verwendet. Die Installationsmethode ist wie folgt:
$ npm install -g cnpm --registry=https://registry.npmmirror.com
Nach der Ausführung können wir den Befehl cnpm zum Installieren von Modulen verwenden:
$ cnpm install
Nach erfolgreicher Ausführung wird im Verzeichnis angular-quickstart ein Verzeichnis node_modules generiert, das die für dieses Beispiel benötigten Module enthält.
Angular-Komponenten erstellen
Komponenten sind die Grundlage und der Kern von Angular-Anwendungen. Eine Komponente kapselt eine bestimmte Funktion, und Komponenten arbeiten zusammen, um eine vollständige Anwendung zusammenzustellen.
Im Allgemeinen ist eine Komponente eine JavaScript-Klasse, die zur Steuerung der Ansichtsvorlage verwendet wird.
Als Nächstes erstellen wir ein app-Verzeichnis in angular-quickstart:
$ mkdir app $ cd app
Und fügen die Komponentendatei app.component.js mit folgendem Inhalt hinzu:
Datei app.component.js:
Als Nächstes analysieren wir den obigen Code:
Wir haben eine visuelle Komponente namens AppComponent erstellt, indem wir die Methoden Component und Class im globalen Angular-Core-Namensraum ng.core verkettet aufgerufen haben.
Die Methode Component akzeptiert ein Konfigurationsobjekt, das zwei Eigenschaften enthält. In der Methode Class implementieren wir die Komponente selbst. In der Methode Class fügen wir der Komponente Eigenschaften und Methoden hinzu, die an die entsprechenden Ansichten und Verhaltensweisen gebunden sind.
Module
Angular-Anwendungen sind modular. ES5 verfügt über kein integriertes Modulsystem, daher kann ein Modulsystem von Drittanbietern verwendet werden. Anschließend erstellen wir einen unabhängigen Namensraum app für die Anwendung, und der Dateicode kann in ein IIFE (Immediately Invoked Function Expression) eingeschlossen werden:
(function(app) {
})(window.app || (window.app = {}));
Wir übergeben das globale app-Namensraumobjekt an das IIFE, und falls es nicht existiert, initialisieren wir es mit einem leeren Objekt.
Die meisten Anwendungsdateien exportieren Code, indem sie Dinge zum app-Namensraum hinzufügen. Wir haben AppComponent in der Datei app.component.js exportiert.
app.AppComponent =
Klassendefinitionsobjekt
In diesem Beispiel hat die AppComponent-Klasse nur einen leeren Konstruktor:
.Class({
constructor: function() {}
});
Wenn wir eine sinnvolle Anwendung erstellen möchten, können wir dieses Objekt um Eigenschaften und Anwendungslogik erweitern.
Komponentendefinitionsobjekt
ng.core.Component() teilt Angular mit, dass das Klassendefinitionsobjekt eine Angular-Komponente ist. Das an ng.core.Component() übergebene Konfigurationsobjekt hat zwei Felder: selector und template.
selector definiert einen einfachen CSS-Selector my-app für ein Host-HTML-Element. Wenn Angular im Host-HTML auf ein my-app-Element stößt, erstellt und zeigt es eine AppComponent-Instanz an.
Die Eigenschaft template enthält das Template der Komponente.
NgModule hinzufügen
Angular-Anwendungen bestehen aus Angular-Modulen, die die Komponenten und alles andere enthalten, was für die Angular-Anwendung benötigt wird.
Erstellen Sie als Nächstes die Datei app/app.module.js mit dem folgenden Inhalt:
Datei app.module.js:
Anwendung starten
Fügen Sie die Datei app/main.js hinzu:
Datei app/main.js:
Wir benötigen zwei Dinge, um die Anwendung zu starten:
- Die Funktion platformBrowserDynamic().bootstrapModule von Angular.
- Das oben erwähnte Anwendungsstammmodul AppModule.
Erstellen Sie als Nächstes index.html mit folgendem Code:
Datei index.html:
index.html Analyse
- 1. Laden Sie die benötigten JavaScript-Bibliotheken;
- 2. Laden Sie unsere eigenen JavaScript-Dateien, achten Sie auf die Reihenfolge;
- 3. Wir fügen das <my-app>-Tag innerhalb des <body>-Tags hinzu.
Der Ausführungsprozess ist: Wenn Angular die Funktion bootstrapModule in main.js aufruft, liest es die Metadaten von AppModule, findet AppComponent in den Bootstrap-Komponenten, findet den my-app-Selektor, lokalisiert ein Element namens my-app und lädt dann den Inhalt zwischen diesen Tags.
Fügen Sie einige Styles hinzu
Der Code der Datei styles.css lautet:
styles.css Datei:
Öffnen Sie ein Terminal und geben Sie den folgenden Befehl ein:
$ npm start
Besuchen Sie http://localhost:3000/, der Browser zeigt an:
Auf diese Weise ist unsere erste Angular 2-Anwendung vollständig. Der Quellcode, der in diesem Artikel verwendet wird, kann über die folgende Methode heruntergeladen werden, ausgenommen node_modules.
Quellcode-Download
Weitere Erweiterungen