We will develop application in Angular (separated from server), and most likely we will need to use PhoneGap to create same application for mobile devices.
PhoneGap requires that the application has index.html file as entry file in order to be compiled. I made minor project in Angular that has index file, and it did compile ok in PhoneGap.
There is something that I cant get my mind on. Server side will be in C#/MVC, and as I said already Client will be in Angular. Question is how to keep the project in Angular in "index.html" format ready for PhoneGap and at the same time have it available for normal web application.
We do plan to use AMD (require.js) for Angular application, but if we do that then we cant have Index.html file which is required for Phonegap.
What would be best approach. Goal is to if possible have one code base.
Well you don't have to specifically have an index.html page, you can use any HTML page as the landing page (See the content tag in the Config.xml page.) You should be able to just build your Angular app like you normally would - you can even test on the browser. When you go to actually create the Cordova/Phonegap apps, you'll just have to add the cordova.js to the file and then run the commands to build and package the app binaries.
I'm also building a PhoneGap 3 app using AngularJS connected to back-end APIs.
The PhoneGap / Cordova part is only added later in the /platforms folder, so in the root /www folder you should build just a regular mobile web app.
This app I'm working on uses a hash for the AngularJS routing. In iOS / Android runs from index.html (eg: ./index.html#/start) while on desktop browsers runs from the root folder (eg: /#/start).
Related
How to use the production version of a react or angular project and run without a local server?
( like opening from index.html or something similar)
I want to make a static web application that uses react or angular 2 as a starting point. Eventually, this will be dynamic so it make sense to take advantage of either.
I don't mind using local http-serve to serve the html and css pages in development but due to some restrictions i won't be able to set up a local server or run npm start from the terminal.
I did a lot of research but never found a definitive answer as to
So like How to use the production version of a react or angular project and run without a local server?
( like opening from index.html or something similar
React (same as Angular) is a client-side library/framework. So all you have to do is to bundle your application to a single .js file. That file will probably include React/Angular and you may just load it in your HTML file. You definitely don't need a http-serve for that. It is possible to deploy your index.html and your bundle.js file to a shared hosting and just load the app.
I have a webapp which I build with Angularjs 2.0, I want to convert it to android apk and install it on android phone and test.
I dont have any experience in building mobile native app or converting webapp to native app.
I have gone through How to convert an existing AngularJS web app to a Cordova app?
Any suggestion/guidance will be helpful.
The most simple explanation is you will need to put your angular files in the www folder, setup your configuration file, make sure the android platform is installed, then run the Android emulate and/or build command to see if it works. That's a very oversimplified version.
Once you've got it working there's a process to go through to prepare the apk to be uploaded to the Google Play Store. You have to be a registered developer for the play store, which is $25/year.
https://scotch.io/#vijayk036/building-hybrid-mobile-apps-using-cordova-and-angularjs-for-android
https://thebhwgroup.com/blog/converting-angularjs-website-cordova-app-ios-and-android
I have a gulp angular project with the following structure. To serve it as a web app, I use the command gulp serve. Gulp then does some magic that rearranges all the files in the .tmp directory. I would like to take the web app and convert it to an ionic app. I attempted to follow the steps here (How to convert an existing Angular1 web app to a Cordova app?), but it seems that due to gulp I have a few additional steps.
To attempt this on my own, I:
Setup an empty ionic project,
Copied the contents of my src folder to the ionic apps www folder, and
Ran ionic serve.
The gulp setup was done by a coworker, so the inner workings of it are something of an enigma.
You cannot do it that easily. Ionic works with it's specific angular directives, like ion-nav-views, ion-views, ion-content, etc. you need to wrap all your states/views inside this directives and transform your navigation system into tabs or side menu (mobile app navigation systems) to make it work. There's a lot of workaround to do!
We have written an angularjs web site/app - optimised for mobile
and are using cordova to make an html5 based mobile app.
The code (html, css, js) will be the same for both the web app and cordova app
but there will be some files that will be different.
How do we set up our git repo to share (only) common files between the web-app repos and the cordova-app repos ?
Obviously any .gitignore files are tracked and are common to all repos. We could add all files we don't want in the cordova repo to .gitignore but that will reduce the usability of 3+ web app repos for the one cordova repo.
We've tried:
Having a local repo of the project for the cordova app with .git/info/excludes on that repo instead of .gitignore files - but this only solves the problem for pushes from that repo, not pulls from the origin (which will cause errors with untracked files)
Setting up a different branch - and use a git flow style approach for intermediate branch for merges - but it's (apparently) not possible to have an .git/info/excludes specific to a branch - so everything will get overwritten on each merge
I would need more informations about the project because it could depend of a variety of factors: goals, time, budget, etc... But in my opinion there are much more differences than only "some files" between a web and mobile projects.
For example:
a mobile hybrid app need some plugins to do some specific mobile tasks and behave as a mobile app
a well optimized web app could be too heavy for a mobile app
web app need support also IE but a mobile app not
a good responsive web app interface is not a mobile interface and vice versa
For this I would create three separate repositories: an AngularJS Web project and an Ionic Mobile project. And the third repo with an AngularJS module that will be imported as a git submodule. This third module could be as a Core module with all functionalities (services, directives, filters and so on) that will be shared between the two applications.
I am building a hybrid mobile app using the Ionic Framework library (including Angular JS) and have found that they've made a wrapper for a number of the cordova plugins so that they work with Angular.
I have downloaded the ng-cordova.js file and referenced it in my index.html
As as test I have used the cordova device plugin just to display the device name in a popup. It works fine in the ripple emulator just running the html in my browser, however when I build the app using Phonegap Build it no longer works.
Is it not possible to use the ng-cordova.js file to access native device features when using Phonegap Build? (i.e. Can you literally only use the plugins from the list on the build website?)
As another user of PhoneGap Build, you are limited to whatever plugins can be found here:
https://build.phonegap.com/plugins
That being said, if the plugin is not in their repository already (most of the popular ones are), you can always submit it yourself or try to get the author to submit it.
Other than that, it should work fine.
This is ngCordova contributor.
It should be possible to use ngCordova with PhoneGap, but are you using the same plugins repos as they are mentioned in ngCordova documentation?
I can imagine that PhoneGap plugins my have different API than Cordova plugins.
And what is here the reason to use PhoneGap Build, if I may ask?
Can you specify which plugins are not working and how could I simply replicate your errors?