Add iOS pods and Android dependencies in Ionic/Cordova - angularjs

I need to add an image resizer library in my ionic project (pod and dependency for iOS/Android respectively). How should I integrate this?
First, create a Cordova plugin and then add the plugin to my project?
Is there any examples I can follow to achieve this.

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

How to integrate a new ionic theme to an existing ionic app?

i'm working on an ionic v1 (and angular 1) project which is completed using basic ionic UI. I came across various themes on ionic marketplace. How do i integrate a new ionic theme to my existing app.
I'm assuming you have Ionic setup in your local machine.
Once you've purchased and downloaded the files of the theme you want to use, create an ionic1 project. Note this will work only with Ionic1, and not Ionic2. Use the following command to create an ionic1 project:
ionic start myApp blank --type ionic1
When your project has been created, go to the /www folder in your project directory, delete all files in here, and copy the theme's files you've downloaded here.
Run ionic serve and your project should have integrated with the theme.
PS. you might have to replace the project scss folder with that of the theme's if available.

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 deploy an AngularJS app to PlayStore etc

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

Can you used ng-Cordova with the PhoneGap Build service?

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?

Resources