How to deploy an AngularJS app to PlayStore etc - angularjs

I built a web-app using AngularJS + Angular Material and now want to deploy it to the AppStore (using Cordova I guess?)
What are the steps that I need to do to achieve this?

Install cordova
npm install -g cordova
Create a new cordova project.
cordova create hello com.example.hello HelloWorld
This will create new directory - hello and inside hello you will have your new cordova project - HelloWord, package name - com.example.hello
Add your angularjs app code to 'www' folder inside hello directory.
Now add iOS as a platform to your cordova project.
cordova platform add ios --save
If you need to access gallery, camera, or any other device feature, you will have to add a cordova-plugin for same.
For example to get access to device camera.
cordova plugin add cordova-plugin-camera
Read more about how you will handle events associated with camera inside your angular app. Go through that plugin's documentation.
I would recommend you to use ng-cordova for using cordova-plugins. Read more about ng-cordova here.
Now you will build your cordova project to generate .ipa file for iOS device.
cordova build ios
Inside your hello directory you will have a xcodeproj file -hello/platforms/ios/hello.xcodeproj open it in Xcode and run on an emulator to test.
Purchase your apple developer account and sign into your xcode with your apple account.
From Xcode you will get option to Archive And Publish your app to Appstore.
Few links to get started
App store documentation to know detailed publishing process here
Cordova documentation here

Related

Cordova + react with hot reload while development mode

I found this question Cordova with Create-react-app.
Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.
Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?
Let's say that I want to achieve something like this:
create cordova project.
create react project inside of /www folder (or any other folder that will work with my use-case...).
run cordova run android from root to run application in Android Simulator and npm start from /www directory.
cordova should be able to listen for changes and live-reload react app inside Android emulator.
I need to able to access cordova instance inside react code to use plugins, etc.
I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode
So is really npm build followed by cordova run android only way to develop cordova + react app??
Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?
Note 2: I can't use react-native as I need to use openlayers maps lib.
Thanks you so much for your answers!
Run webpack-dev-server with --host 0.0.0.0 to make it accessible from outside
Change your config.xml and make <content src="..." /> point to your local-IP address and your dev-port, e.g. <content src="http://192.168.0.2:3000/" />
Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g. <allow-navigation href="http://192.168.0.2:3000/*" />
If you need native functionalities via cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339

Is there any way to convert an AngularJS web application to a mobile application?

I'm new to AngularJS. Is there any way to convert a whole AngularJS application to a mobile native App (Android and iOS) or AngularJS itself. Is there a way to create a mobile app?
I have referred the xdk and phonegap.
Another solution that worked for me in android :
1. Create a plain native app in android.
2. Keep the angular app in resources folder.
3. Call the app in webview.
Similar solution may be possible in ios also, I haven't tried yet.
You can use Apache Cordova or PhoneGap. The use of cross platform libs is very comfortable while you are able to create different native apps by using one sourcecode. With phonegap/cordova you need node.js.
These are the default CLI commands for setup your application. You should create a new hybrid app by using the following commands. You could migrate your AngularJS application by copy-past your files into the new app directory.
Install cordova via NPM
npm install -g cordova.
Create your app (You could put your AngularJS App in your app directory and make it work)
cordova create <path>
Add a platform e.g. iOS or Android (The following command need to be run in the app <path> directory cordova create <path> has been configured.
cordova platform add android --save
Run your app in emulator
cordova run android
Build a native App like:
cordova build android

How to convert an existing AngularJS 2 web app to a Cordova 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

angular js working perfect in phoneGap or browser but not woking in apk

i downloaded the source code from internet of a sign in application using angular, its working perfect with phonegap or in browser but is not displaying anything when i have created an APK.I have created apk using cordova as well as ionic from win7 CLI.
Steps i followed:
1.installed Git
2.installed node
3. installed ionic
4. JRE
5. SDK
and then following commands
1.ionic start myApp
2. cd myApp
3. ionic platform android
4. ionic emulate android
5. ionic run android
i replaced the index file and js file in www with my file.
please tell me where am i doing wrong?

is there is any way to build hybrid app (Ionic, AngularJs, Cordova) in android studio

I am native android application developer working on java and android api's with android studio, recently i got a requirement to build a hybrid app with ionic, cordova and angularJs, i spent 5-6 hours and dig google to get some tutorail to setup a project structure of hybrid app in andorid studio, but haven't found anything.
I know how to use ionic, angular and cordova but don't know about the project structure and setup compiling and how to run.
so, i want you guys to post links of such tutorails (If you have any).
Have a look over cordova CLI mode. In this see specific for Android Platform for that you first need following pre-requirement to use:
Android Studio.
Android SDK.
Node.js
Git Client
After installing Node.js Open it's terminal and follow command to create Cordova project with different platform. These steps are already mentioned in official documentation.
Once you have created executed cordova build androidcommand then browse to your project directory. In that you will find that there's a directory named platforms in that you will see Android, now open your Android Studio in that select Select Import Project (Eclipse ADT, Gradle, etc). when you create a new project from there browse to Android directory. That's all you need to do for cordova
Official documentation and referrals links:
http://ionicframework.com/docs/overview/#download
https://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html
https://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html
https://docs.angularjs.org/misc/started
Hello try to reefer this articles on mcgivery blog.
http://mcgivery.com/100-ionic-framework-resources/
I'm ionic dev and if you want to use good IDE use WebStorm :)
I'm using it on EAP version.
first of all you have to install 1)node.js 2)apache ANT 3) Java JDK &
JRE 4) Android SDk & Eclipse and then after all installation you have
to set this all software path into environmental- variable. and then
fire your npm install -g ionic. without this all software
installation and there path setup your ionic application will not
created. and still you have any confusion and any question related
software installation and there path setup then again tell me i will
help you.

Resources