Ionic-Installation

Die Beispiele dieser Website verwenden ionic v1.3.2, und die verwendete CDN-Bibliotheksadresse ist:

<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>

Download-Adresse der neuesten ionic-Version:http://ionicframework.com/docs/overview/#download。

Nach dem Herunterladen und Entpacken des Archivs enthält es die folgenden Verzeichnisse:

css/               =>     样式文件
fonts/             =>     字体文件
js/                =>     Javascript文件
version.json       =>     版本更新说明

Sie können die folgenden Ressourcendateien auch auf GitHub herunterladen:https://github.com/driftyco/ionic(im Release-Verzeichnis).

Als Nächstes müssen wir nur die Dateien css/ionic.min.css und js/ionic.bundle.min.js aus den oben genannten Verzeichnissen in das Projekt einbinden, um eine Ionic-App zu erstellen.

Beispiele

<ion-header-bar class="bar-positive"> <h1 class="title">Hallo Welt!</h1> </ion-header-bar> <ion-content> <p>Meine erste Ionic-App.</p> </ion-content>

Ausprobieren »

Klicke auf die Schaltfläche „Try it“, um das Online-Beispiel anzuzeigen.

Dieses Tutorial konzentriert sich auf die Anwendung des Ionic-Frameworks. Die meisten Beispiele laufen in einem Browser. Das Ausführen auf mobilen Geräten kann im folgenden Tutorial zur Installation über die Kommandozeile ausführlich gelernt werden.

Hinweis:In mobilen Apps wie PhoneGap müssen wir nur die entsprechenden js- und css-Dateien zur Ressourcenbibliothek hinzufügen.

Kommandozeilen-Installation

Zuerst müssen SieNode.jsinstallieren, wir werden dessen NPM-Tool bei der folgenden Installation benötigen. Für weitere Informationen zu NPM können Sie unsereNPM-Nutzungseinführung ansehen。

Dann installieren Sie über dasKommandozeilen-Tooldie neueste Version von cordova und ionic. Unter Bezug auf dieAndroidundiOSoffizielle Dokumentation zur Installation.

Öffnen Sie unter Windows und Linux das Kommandozeilen-Tool und führen Sie die folgenden Befehle aus:

$ npm install -g cordova ionic

Verwenden Sie auf Mac-Systemen die folgenden Befehle:

sudo npm install -g cordova ionic

Tipp: iOS muss unter Mac OS X und in der Xcode-Umgebung installiert und verwendet werden.

Wenn Sie die oben genannte Umgebung bereits installiert haben, können Sie die folgenden Befehle ausführen, um die Version zu aktualisieren:

npm update -g cordova ionic

oder

sudo npm update -g cordova ionic

Eine App erstellen

Verwenden Sie die von Ionic offiziell bereitgestellten fertigen Anwendungsvorlagen oder ein leeres Projekt, um eine Ionic-App zu erstellen:

$ ionic start myApp tabs

Führen Sie das soeben erstellte Ionic-Projekt aus

Verwenden Sie das ionic-Tool, um Ihre Apps zu erstellen, zu testen und auszuführen (oder erstellen Sie direkt über Cordova).

Android-App erstellen

$ cd myApp
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android

Wenn alles gut geht, wird der Emulator angezeigt, die Oberfläche sieht wie folgt aus:

iOS-App erstellen

$ cd myApp
$ ionic cordova platform add ios
$ ionic cordova build ios
$ ionic cordova emulate ios

Wenn der Fehler "ios-sim was not found." auftritt, können Sie die folgenden Befehle ausführen:

npm install -g ios-sim

Wenn alles gut geht, wird der Emulator angezeigt, die Oberfläche sieht wie folgt aus:

Ionic Lab

Ionic Lab wird nicht mehr aktualisiert.

Ionic Lab ist eine Desktop-Entwicklungsumgebung. Wenn Sie die Befehlszeile nicht mögen, wird Ionic Lab Ihren Bedürfnissen gerecht.

Ionic Lab bietet Entwicklern eine einfachere Möglichkeit, Ionic-Anwendungen zu starten, zu kompilieren, auszuführen und zu emulieren.

Ionic Lab unterstützt folgende Plattformen: Windows, Mac OS X, Linux. Download-Adresse:http://lab.ionic.io/, nach dem Herunterladen installieren Sie es einfach direkt. Die gesamte Bedienoberfläche sieht wie folgt aus:

Über die oben genannte Oberfläche können Sie die folgenden Vorgänge ausführen:

  • App erstellen
  • App-Vorschau
  • App kompilieren
  • App ausführen
  • App hochladen
  • Ausführungsprotokolle anzeigen
    • ……

Es wird empfohlen, Sublime Text als Editor für Ionic-Projekte zu verwenden. Wir können das Projekt über Ionic Lab direkt in Sublime Text öffnen, wie unten gezeigt:

GIF-Vorführung der Bedienung

Andere Erweiterungen