Wie verwende ich Ionic Framework für die Entwicklung von Webanwendungen?

75

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

mobile web-applications ionic-framework hybrid-mobile-app xivo
quelle
Ich bin auch neugierig. Ich bin damit einverstanden, dass dies möglich sein sollte (ich werde es versuchen), frage mich aber, warum es keine mobilen Websites von Ionic gibt. Vielleicht, weil es nur Webkit unterstützt und Entwickler befürchten, dass es mit Firefox für Android nicht funktioniert?
Kyle
Die Richtung von Ionic gilt nur für Hybrid-Web-Apps, die in den App Store gelangen. Es gibt Probleme, die für eine reine Weblösung nicht gelöst werden können.
Xivo
@xivo Kennen Sie solche Probleme bereits? Wir hatten die Idee, dass die Komponenten von ionic im mobilen Browser gleich aussehen (im Vergleich zum "Wrapped" -Modus).
the_ghost
@the_ghost Wir hatten unsere Probleme mit ihnen, weil die Übersetzung in vielen Fällen in mobilen Browsern nicht unterstützt wurde oder nicht richtig funktionierte und Ionic dies ziemlich oft verwendet und Probleme verursachte. Ich weiß nicht mehr, ob das der Fall ist.
Xivo
1
Es sieht so aus, als ob die neueren Versionen von Ionic darauf abzielen, neben Webview-Containern auch mit echten Webbrowsern zu arbeiten. "Ionic 2 konzentriert sich darauf, sowohl native / hybride Apps über Cordova zu erstellen als auch die Funktionen für Progressive Web Apps und Electron hinzuzufügen ." source
giraffe.guru

Antworten:

29

Dies ist möglich, wenn Sie die Komponenten von www / lib / - einschließen. Dieser Ordner enthält den Kern von ionic (das ionische Gerüst + anglejs) und Sie können von dort aus fortfahren.

Es ist jedoch wichtig zu beachten, dass ionic auf Angularjs aufgebaut wurde, insbesondere für mobile Geräte. Um bessere Ergebnisse für die Entwicklung von Web-Apps zu erzielen, sollten Sie die Verwendung von Core AngularJs (für die Funktionalität) und Bootstrap3 (für die Benutzeroberfläche) in Betracht ziehen.

Orane
quelle
Leider ist die Unterstützung für Bootstrap 3 und AngularJS 1.3 derzeit nicht optimal (Dezember 2014). Es gibt mindestens zwei Projekte, die Bootstrap für AngularJS umschließen : Die Bootstrap-Benutzeroberfläche unterstützt AngularJS 1.3 und AngularStrap nicht offiziell, da das Angular-Team weniger "offizielle" Unterstützung bietet . Ich würde nicht wissen, welches von beiden ich wählen sollte. Natürlich kann der größte Teil von Bootstrap ohne JavaScript verwendet werden, daher ist es ein großer Vorteil, dieses fantastische CSS-Framework zu verwenden.
Hgoebl
1
Obwohl es keine offizielle Unterstützung gibt, wird Anguar für die Logik verwendet, während Bootstrap für das Design verwendet wird. Ich habe beide in mehreren Projekten verwendet. Es ist nicht erforderlich, Bootstrap-Js durch Winkelabhängigkeitsinjektion zu bedienen. Bewahren Sie Bootstrap-Dateien in einem separaten "Medien" -Ordner auf und laden Sie sie einmal in eine base.html-Vorlage (die alle Vorlagen erweitert). Es treten absolut keine Probleme auf.
Orane
Ich benutze Angular-Bootstrap, der ziemlich kompatibel ist und eine gute Leistung erbringt. angle-ui.github.io/bootstrap
Sándor Tóth
1
Für AngularJS und Bootstrap verwenden Sie einfach die Datei bootstrap.css und dann die eckige Benutzeroberfläche - sie funktioniert nahtlos - Aus Gründen der Übersichtlichkeit verwenden Sie bootstrap.js NICHT mit eckigen
Mrk Fldig
Ist es möglich, die Geschäftsanmeldung gemeinsam zu halten (wie bei allgemeinen Angular-Diensten) und den Benutzer Ionic auf Mobilgeräten, aber Bootstrap für das Web?
Ingaham
13

V2

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

Ionic build browser

V1

Ionic kann für die regelmäßige Webentwicklung verwendet werden. Wenn Sie nur einen Webentwickler benötigen, hören Sie hier auf. Wenn Sie jedoch möchten, dass Ihre App und Ihr Web von derselben Codebasis aus bereitgestellt werden, lesen Sie weiter

Schritt 1

Erstellen Sie eine Kopie von index.html in merges / browser / (Zusammenführungen befinden sich auf der Stammebene, dh 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

in app.js hinzufügen

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

Verwenden Sie nun CSS Hide / Show oder Angular Hide / Show mit diesen

aWebDeveloper
quelle
6

Obwohl ich nicht glaube, dass es in Ionic viel Unterstützung für etwas anderes als hybride Web-Apps gibt, können Sie in der Mobile Angular-Benutzeroberfläche nach einer sehr ähnlichen Alternative mit Unterstützung für das mobile Web suchen.

user456584
quelle
4

Orane hat recht.

Wenn Sie "node app.js" verwenden, führt Ihre App einen Server aus. Wir müssen diesem Server alle gewünschten Dateien zur Verfügung stellen. Bei Ionic Application handelt es sich im Grunde genommen um einen WWW- Ordner. Im folgenden Beispiel habe ich den gesamten Inhalt des WWW- Ordners in meinen öffentlichen Ordner verschoben.

Mein Stammordner enthält die Datei app.js und den öffentlichen Ordner. 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'));

Im öffentlichen Ordner habe ich alle Frontend CSS und JS. Wir haben den gesamten Ordner public in den obigen Code aufgenommen. Jetzt in index.html von public Sie sollten Dateien mit public / wie folgt einfügen :

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

Alles Gute, jeder kann sich gerne nach Node.js + Ionic Framework erkundigen

Markkillah
quelle
1

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, gibt es einen /wwwOrdner, der alle 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 mit nur wenig Logik dazwischen auf Daten zugreifen. In den meisten Fällen können Sie diese Logik in Ihr JS einfügen und die Clients die Arbeitslast übernehmen lassen.

Daten können von einer Backend-as-a-Service-Lösung (BaaS) 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 statischer App-Hoster, die speziell für serverlose Apps aufgetaucht sind. Ich bevorzuge Divshot , obwohl sie scheinbar nicht mehr aktiv neue Funktionen herausbringen.

Die hier beschriebenen Lösungen helfen Ihnen dabei, die plattformübergreifende Konsistenz aufrechtzuerhalten, die Ionic großartig macht!

leetheguy
quelle
0

Unsere Wahl für mobile Hybrid-Apps ist das ionische Framework, für die Webanwendungen befindet sich der Front-End-Teil jedoch nicht im ionischen Framework.

Zum Beispiel machen wir einen Webanwendungsteil in der reinen Angular- oder Kendo-Benutzeroberfläche für die Angular AngularJS-Benutzeroberfläche .

Es ist effizienter, wenn dasselbe Team auf beiden Plattformen (mobil und im Web) produktiv sein kann.

Ich hoffe es hilft.

ivan
quelle