web-dev-qa-db-fra.com

Comment utiliser Ionic Framework pour le développement d'applications Web?

Est-il possible d’utiliser le framework ionic pour les applications Web classiques plutôt que de l’envelopper dans Cordova?

mobileweb-applicationsionic-frameworkhybrid-mobile-app
74
xivo

Ceci est possible si vous incluez les composants de www/lib/- Ce dossier contient le noyau de ionic (le ionic framework + angularjs)) et vous pouvez continuer à partir de là.

Cependant, il est important de noter que ionic a été construit sur les angularjs, en particulier pour les appareils mobiles.) (pour l'interface utilisateur).

28
Orane

V2

Ionic prend désormais en charge les applications Web (PWA) et le support pour les ordinateurs de bureau arrive trop tôt

Ionic build browser

V1

Ionic peut être utilisé pour le développement Web régulier. Si tout ce dont vous avez besoin est web dev, arrêtez-vous ici. Mais si vous souhaitez que votre application et votre site Web soient diffusés à partir du même code, lisez plus loin.

étape 1

Créez une copie de index.html dans merges/browser/(la fusion est au niveau racine i.e myApp)

<script>
    var is_browser = true
</script>

Et

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

étape 2

Supprimez les fichiers js inutiles tels que cordova.js de index.html

étape

ajouter dans app.js

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

Maintenant, utilisez css masquer/afficher ou angular masquer/afficher en utilisant ces

13
aWebDeveloper

Bien que je ne pense pas qu’il y ait beaucoup d’assistance pour Ion, hormis les applications Web hybrides dans Ionic, vous pouvez consulter Mobile Angular UI) pour une alternative très similaire avec prise en charge de le web mobile.

6
user456584

Orane a raison.

Lorsque vous "node app.js" votre application exécute un serveur. Nous devons fournir à ce serveur tous les fichiers que nous voulons. Avec Application ionique c'est en gros le dossier www. Dans l'exemple suivant, je mets tout le contenu du dossier www dans mon dossier public.

Mon dossier racine contient le fichier app.js et le dossier public. Voilà comment app.js ressemble à:

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'));

Dans public dossier, j'ai tous les css et js frontend. Nous avons inclus le dossier entier public dans le code ci-dessus. Maintenant dans index.html de public Vous devriez inclure les fichiers avec public /, comme ceci:

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

Tout le meilleur, n'importe qui, n'hésitez pas à poser des questions sur Node.js + Ionic Framework

4
markkillah

En fonction de la complexité de l'application, il est absolument possible d'utiliser le cadre Ionic) pour les applications Web classiques!

Lorsque vous créez votre application, il y a un /www dossier contenant tous vos fichiers HTML, JS et CSS. C'est le front-end de votre application web.

La plupart des applications Web sont de simples interfaces qui accèdent aux données avec un peu de logique entre elles. Dans la plupart des cas, vous pouvez insérer cette logique dans votre JS et laisser les clients gérer la charge de travail.

Les données peuvent être gérées par une solution Backa-as-a-Service (BaaS) telle que Firebase ou Parse . J'aime Firebase car il se lie bien avec Angular et Ionic.

Si vous devez vous connecter à des services qui exigent le secret, tels que les paiements par carte de crédit, vous pouvez vous connecter à un service tel que Zapier .

Pour l'hébergement, de nombreux hébergeurs d'applications statiques ont été créés spécifiquement pour les applications sans serveur. Je préfère divshot même s'ils ne semblent plus activement proposer de nouvelles fonctionnalités.

Les solutions que je viens d'esquisser vous aideront à maintenir la cohérence sur toutes les plateformes, ce qui rend Ionic génial!

1
leetheguy

Notre choix pour les applications hybrides mobiles est le cadre ionic), cependant, pour la partie frontale des applications Web, il ne figure pas dans le cadre ionic.

Par exemple, nous réalisons des applications Web dans pure Angular ou Kendo UI pour Angular AngularJS UI .

Il est plus efficace que la même équipe puisse être productive sur les deux plates-formes (mobile et Web).

J'espère que ça aide.

0
ivan