Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?
-
I'm curious too. I agree that this should be possible (about to go try), but wondering why there are no Ionic mobile websites. Perhaps because it only supports webkit and devs are worried it won't work with Firefox for Android?Kyle Cureau– Kyle Cureau2014-09-19 19:12:03 +00:00Commented Sep 19, 2014 at 19:12
-
Their direction of Ionic is only made for Hybrid Web Apps that are going into the App store. There are issues that will not be resolved for a pure web solution.xivo– xivo2014-09-20 00:04:53 +00:00Commented Sep 20, 2014 at 0:04
-
@xivo Do you already know such issues? We had an idea that ionic`s components will look same in mobile browser (comparing to "wrapped" mode).the_ghost– the_ghost2015-01-28 15:28:55 +00:00Commented Jan 28, 2015 at 15:28
-
@the_ghost we had our issues with them because translate was not supported or worked improperly for many cases in mobile browsers and Ionic uses that quite often and caused issues. I don't know if this the case anymore.xivo– xivo2015-01-28 20:20:21 +00:00Commented Jan 28, 2015 at 20:20
-
1It looks like the newer versions of Ionic are aiming to work with true web browsers in addition to webview containers. "Ionic 2 is focused on building both native/hybrid apps though Cordova, as well as adding the ability for Progressive Web Apps and Electron ." sourcegiraffe.guru– giraffe.guru2016-09-29 21:29:43 +00:00Commented Sep 29, 2016 at 21:29
|
Show 2 more comments
5 Answers
This is possible if you include the components of www/lib/ - This folder contains the core of ionic(the ionic framework + angularjs) and you can proceed from there.
However it's important to note that ionic was built on top of angularjs, specifically with mobile in mind. To get better results for web app development, you should consider using core angularjs(for functionality) and bootstrap3 (for UI).
5 Comments
hgoebl
Unfortunately support for Bootstrap 3 and AngularJS 1.3 is not optimal currently (Dec-2014). There are at least 2 projects wrapping Bootstrap for AngularJS: Bootstrap UI has no official support for AngularJS 1.3 and AngularStrap seams to have less "official" support from Angular team. I wouldn't know which of both I should choose. Of course most of Bootstrap can be used without JavaScript so it's a big gain to use this awesome CSS framework.
Orane
Though there is no official support, Anguar is used for logic while bootstrap is used for design. I have used both in several projects. There is no need to serve bootstrap js through angulars dependency injection. Keep bootstrap files in a separate "media" folder and load them once in a base.html template (which extends all templates) and there will be absolutely no issues.
Sándor Tóth
I use angular-bootstrap which is quite compatible and performs well. angular-ui.github.io/bootstrap
Mrk Fldig
For AngularJS and bootstrap simply use the bootstrap.css and then angular UI - it works seamlessly - For clarity sake DO NOT use bootstrap.js with angular
Balazs Nemeth
is is possible to keep the business login in common (like in common Angular services) and user Ionic on mobile but Bootstrap for web?
V2
Ionic now supports PWA(web apps) and support for desktop is coming too soon
Ionic build browser
V1
Ionic can be used for regular web development. If all you need is web dev stop here. But if you want your app & web to serve from the same codebase read further
Step 1
Create a copy of index.html inside merges/browser/ (merges is at the root level i.e myApp) include
<script>
var is_browser = true
</script>
&
<body ng-app="myApp" class="platform-website">
Step 2
Remove unnecessary js files like cordova.js from index.html
Step 3
add in app.js
var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
&& ionic.Platform.isWebView());
Now use css hide/show or angular hide/show using these
Comments
While I don't believe there is much support for anything but hybrid web apps in Ionic, you can check out Mobile Angular UI for a very similar alternative with support for the mobile web.
Comments
Orane is right.
When You "node app.js" your app runs a server. We need to provide this server with all files we want. With Ionic Application it's basically www folder. In following example i put all contents of www folder to my public folder.
My root folder has app.js file and public folder. That's how app.js looks like:
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 folder i have all frontend css and js. We included the whole folder public in code above. Now in index.html of public You should include files with public/, like this:
<script src="public/lalala.js"></script>
All the best, anybody, feel free to ask anything about Node.js+Ionic Framework
Comments
Depending on the complexity of the app it is absolutely possible to use the Ionic Framework for regular web applications!
When you create your app there is a /www folder that contains all your HTML, JS, and CSS. That's the front end for your web app.
Most web apps are simple interfaces that access data with only a little bit of logic in between. In most cases you can put that logic in your JS and let the clients handle the workload.
Data can be handled by a Backend-as-a-Service (BaaS) solution like Firebase or Parse. I like Firebase because it ties in nicely with Angular and Ionic.
If you need to connect to services that require secrecy, like credit card payments, you can hook in to a service like Zapier.
For hosting there are a number of static app hosters that have popped up specifically for serverless apps. I prefer divshot even though they don't seem to be actively pushing out new features anymore.
The solutions I've outlined here will help you maintain the consistency across platforms that makes Ionic great!
