it-swarm.com.de

Wie verwende ich das Ionic Framework für die Web-App-Entwicklung?

Ist es möglich, das ionic Framework für reguläre Webanwendungen zu verwenden, anstatt es in Cordova zu verpacken?

74
xivo

Dies ist möglich, wenn Sie die Komponenten von www/lib/einbinden. Dieser Ordner enthält den Kern von ionic (das ionic framework + angularjs)) und Sie können von dort aus fortfahren.

Beachten Sie jedoch, dass ionic speziell für Mobilgeräte entwickelt wurde. Um bessere Ergebnisse für die Entwicklung von Webanwendungen zu erzielen, sollten Sie die Verwendung von core angularjs (für die Funktionalität) und bootstrap3 in Betracht ziehen (für die Benutzeroberfläche).

28
Orane

V2

Ionic unterstützt jetzt PWA (Web-Apps) und die Unterstützung für Desktops ist zu früh

Ionic build browser

V1

Ionic kann für die reguläre Webentwicklung verwendet werden. Wenn Sie nur einen Web-Entwickler brauchen, hören Sie hier auf. Wenn Sie jedoch möchten, dass Ihre App und Ihr Web auf derselben Codebasis bereitgestellt werden, lesen Sie weiter

Schritt 1

Erstellen Sie eine Kopie von index.html in merges/browser/(merges befindet sich auf Root-Ebene, d. H. MyApp) include

<script>
    var is_browser = true
</script>

&

<body ng-app="myApp" class="platform-website">

Schritt 2

Entfernen Sie unnötige JS-Dateien wie cordova.js aus index.html

Schritt 3

fügen Sie in app.js hinzu

var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
              && ionic.Platform.isWebView());

Verwenden Sie nun css hide/show oder angular hide/show, um diese zu verwenden

13
aWebDeveloper

Ich glaube zwar nicht, dass es in Ionic viel Unterstützung für alles andere als hybride Web-Apps gibt, aber Sie können unter Mobile Angular UI nach einer sehr ähnlichen Alternative mit Unterstützung für suchen das mobile Web.

6
user456584

Orane hat recht.

Wenn Sie "node app.js" Ihre App einen Server ausführt. Wir müssen diesen Server mit allen gewünschten Dateien versorgen. Mit Ionic Application ist es im Grunde www Ordner. Im folgenden Beispiel habe ich den gesamten Inhalt des Ordners www in meinen Ordner public gestellt.

Mein Stammordner hat app.js file und public folder. So sieht app.js aus:

var express = require('express');
var app = express();
var server = require('http').createServer(app);

app.get('/', function (request, response) {
    response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));

In public Ordner habe ich alle Frontend CSS und Js. Wir haben den gesamten Ordner public in den obigen Code eingefügt. Nun sollten Sie in index.html von public Dateien mit public / wie folgt einfügen:

<script src="public/lalala.js"></script>

Alles Gute, jeder kann etwas über Node.js + Ionic Framework fragen

4
markkillah

Abhängig von der Komplexität der App ist es absolut möglich, das Ionic Framework für reguläre Webanwendungen zu verwenden!

Wenn Sie Ihre App erstellen, wird ein /www Ordner, der all Ihre HTML-, JS- und CSS-Dateien enthält. Das ist das Frontend für Ihre Web-App.

Die meisten Web-Apps sind einfache Schnittstellen, die auf Daten zugreifen, zwischen denen nur wenig Logik liegt. In den meisten Fällen können Sie diese Logik in Ihre JS einfügen und die Clients die Arbeitslast verwalten lassen.

Daten können von einer Backend-as-a-Service (BaaS) -Lösung wie Firebase oder Parse verarbeitet werden. Ich mag Firebase , weil es gut zu Angular und Ionic passt.

Wenn Sie eine Verbindung zu Diensten herstellen müssen, die Geheimhaltung erfordern, z. B. Kreditkartenzahlungen, können Sie sich an einen Dienst wie Zapier anschließen.

Für das Hosting gibt es eine Reihe von statischen App-Hostern, die speziell für serverlose Apps aufgetaucht sind. Ich bevorzuge divshot , obwohl sie offenbar keine neuen Funktionen mehr anbieten.

Die Lösungen, die ich hier vorgestellt habe, helfen Ihnen dabei, die Konsistenz zwischen den Plattformen aufrechtzuerhalten, die Ionic großartig macht!

1
leetheguy

Für hybride mobile Apps haben wir uns für das ionic framework entschieden, für den Front-End-Teil für Webanwendungen jedoch nicht für das ionic framework.

Zum Beispiel machen wir einen Webanwendungsteil in reinem Angular oder Kendo UI für Angular AngularJS UI .

Effizienter ist es, wenn dasselbe Team auf beiden Plattformen (Mobil und Web) produktiv sein kann.

Ich hoffe es hilft.

0
ivan