Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?
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).
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
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.
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
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!
Our choice for hybrid mobile apps is the ionic framework, however for the web applications front-end part is not in the ionic framework.
For example, we do web application part in pure Angular or Kendo UI for Angular AngularJS UI.
It is more efficient when the same team can be productive on both platforms (mobile and web).
Hope it helps.
Related
I'm trying to create web using AngularJs framework, and I want to watch my changes on sass, js and html file (auto refreshing browser).
How can I do that?
You can use Yeoman generator for your Angular projects. This will provide
Provides a directory structure geared towards large Angular projects.
livereload for your project etc
cg-angular documention
i just want to know that is it possible to run angularjs app on mobile directly means without using web browser??
I search google and it seems i can't but my client want to do that.
you could also use Ionic Framework (ionicframework.com) for this as it is heavily using Angular and encapsulating everything in real mobile apps that are capable of being deployed via App Stores (Play Store, iTunes, ...).
Best regards,
Steviee
You can use Cordova Framework Which generates mobile application in android and ios also for that you can refer -https://cordova.apache.org/docs/en/latest/
Follow this documentation step and you get all files with proper structure in that you can write your application code.
Try angular bundler for cordova.
abc framework - https://github.com/thruthesky/abcframework which gives you a great convenient building mobile apps using Angular.
abc is Angular Bundler for Cordova which helps you building mobile apps with Angular.
I'm currently learning Angular JS and plan on creating a website using RESTFul to communicate with the server (which will be in Node.js).
I would like to know how to proceed to "convert" this website into a mobile app.
I saw tools like Apache Cordova but I have no mobile developing experience so I don't really know how all of this works.
I saw other tools like Ionic and ngCordova (created by Ionic) but I don't get the point, Angular is just a JS script to insert in my HTML page right ?
So why would I need something like Ionic ? Isn't Apache Cordova enough ?
Ionic is a webframework that makes use of apache cordova in the back.
Cordova is used for mobile app programming in javascript and will compile your javascript code to native code for android, iOS, ...
AngularJS is used for making development of Single Page Web Applications more delightful by offering many nice code features for programming MVC apps.
Ionic now at the end, puts it all together by offering you user interface components that will look native on all mobile devices + the browser. And on top offers you angular js modules that make working with webapps easier (e.g. navigationHistory ...)
If you start new and want to create a nifty mobile application, I would start with ionic. It comes with a lot of css or sass that makes it feel / look native and of course you can change everything to your needs. To access phone features (e.g. location, camera ...) cordova steps in. I suggest doing this guide, that will take you through your first ionic app.
I have an AngularJS app (myApp) currently used only by my own ASP.NET MVC app. The AngularJS is working well in my app. Now other MVC apps also want this as an add-on (plugin). Is this possible to do without modifying my original AngularJS app, and been too intrusive to other apps?
I thought is like this:
distribute the myApp.js to an in-house CDN to be included the BundleConfig.cs by other apps
add a <DIV data-ng-app="myApp"> in pages of other apps so that my original AngularJS can be injected.
Far too many unknowns about how your app is configured for a precise answer but any module can be dependency injected into another module.
For simplicity sake assume that you have all the templates needed to run your app converted to javascript strings and use $templateCache() to register them and all the code for your app is in one file then anyone would be able to inject your module into theirs and use whatever components you have available.
All they would need would be a script tag that points at location for your app file ... and that location could be any server, cdn or local download directory
I have an existing webapp built on Laravel. I am moving to an Ionic build to create the native version.
How would you suggest I separate my views, and how do I call the routes? Has anyone any example.
Here is what I am about to do:
1. move all my views to the public folder
2. install Ionic in the public folder,
3. Using UI-route & Angular make $http calls to the backend.
Thanks for your input :-)
You can't simply do that.
If you have a "classic" Laravel app with blade templates, what you need to do is to expose an API from it.
Then you create an ionic app in a different directory (they are not related, so you don't have to mix them). You just need to develop your ionic app like any other ionic app. Then in your factories where you do the request to your API, you do something like:
$http.get('https://example.com/api/foo')
Where example.com is the domain of your Laravel application (You are going to need to activate CORS in it).
You just can't simply create an ionic app inside laravel, because that application will be built into an .apk to be installed on the phone and you can't add Laravel inside the package.
So the TL;DR is having your normal Laravel app where it lives, add it some public API so your ionic app can access it and then build an Ionic app from zero that will use that API.
It depends on you, but I prefer to keep the ionic project nested in /public, since I want a single-project app, the sources are clearly separated by being or not in the subfolder, but it helps your productivity, benefits are:
Single source control: Single source set for source version control (GIT, SVN, ...), so when I work I can do a single pull/checkout and push/checkin
Single app to deploy: Single domain, no cross-domain problems, single deploy via FTP is available, any standard php server can handle it with a single and standard account to handle
Coherent project without interdipendencies: I do not want to split logic dependencies of the same model between many projects, when I change something in backend or frontend that involve the other side, I want to have in the same project all the sources to update. It make not sense to have to go to a different project to adjust compatibility, it would be uselessy messy