Yeo ionic generator & cordova?

1

Hey!

First of all: thanks for making this awesome framework. Secondly: unfortunately I am all quite new to the whole Angular/PhoneGap/Cordova scene, and that’s why I am asking the following question.

I am using the Yeoman ionic generator to streamline my development process. However, now I want to add some of Cordova’s plugins. I know that this can be done by running the following command:
grunt plugin:add:<plugin name>

However, my question is: how do I use these plugins? Since Cordova is not loaded when running grunt serve (right?), because index.html tells you that Cordova.js will not run during development sessions.

In conclusion: what is the right approach to this? I also read some thing about not being able to use deviceReady when using Angular, unless you bootstrap it manually…? Once again: fairly new to the scene, so any help is greatly appreciated :)!

Have a great (coding) weekend!

2

@Diego, maybe you shine your light on this :)?

3

see this post Ionic.Platform.ready is not ready

basically you can use the Ionic Platform ready call

1 Like
4

You should still be able to use all the Cordova events listed here, even within Angular.

EX: document.addEventListener("deviceready", yourCallbackFunction, false);

But, depending on the plugin and where it’s needed during your application’s workflow, you may be able to make some assumptions.

For instance, I used this NFC Plugin for an app I developed during a hackathon (which we won :)), and since the need to access the NFC capabilities was only available a few views in, I could safely assume Cordova had finished loading and the plugins were ready to be used. In this case, I wrapped the plugin inside an AngularJS Service that could be injected into my controllers that needed to read/write NFC tags - check out the code.

I like this paradigm of wrapping Cordova plugins inside AngularJS services, but it might not make sense in every situation. Note that the only way to “use” these plugins is to run your app on a device. If you have the org.apache.cordova.console plugin enabled (which generator-ionic has checked by default) you can look at the output of your JavaScript console.log statements inside Xcode for iOS or via the command line for Android using adb logcat CordovaLog:D *:S

Hope this helps!

5

Thank you both for your response!

Diego: thank you for the example of how to do a deviceready check. This already helped me quite a lot :).
However, I do not think I fully understand how to effectively code with these plugin if the only way is to build & run it in Xcode all the time (think of how cumbersome this is if you have a small syntax error somewhere).

For example, I want to include the plugin that checks if the device is connected to the internet (https://github.com/apache/cordova-plugin-network-information), is there no way to test this without having to go through this tedious process?

By the way: what would be a better approach? Using a plugin for this, or just connecting to my API and if its a faulty response, message the user about that? Regardless, I would also like to use the storage plugin (http://cordova.apache.org/docs/en/3.0.0/cordova_storage_storage.md.html#Storage), so the question still stands :).

Furthermore: congrats on winning the Hackathon contest, and awesome that you share the code. Really helps others (like me) with improving their skills :).

By the way: thanks for the help! Really appreciate it guys!

6

@Diederik Thanks for the support, glad the example helped you out!

You should be using an editor that has JSHint syntax validation support. Here is a list of JSHint plugins for various editors. It truly would be cumbersome if you were waiting to discover small syntax errors only after running your app on a device!

The Ripple Emulator that is bundled with the Ionic Generator aims at emulating some of the device specific hardware that the plugins communicate with seems promising and might work for a handful of Cordova plugins, but it’s not fully operational just yet.

The Cordova plugins contain Objective C, Java, C#, etc, code that runs on a mobile device, and a glue layer that provides JavaScript interfaces for communicating with the hardware. This means that in the absence of full hardware emulation, you have no choice but to run your application on a physical device and monitor logs just like you would with the Chrome DevTools, etc, console.

If this is your first time developing mobile apps, I can understand how it might seem like a tedious task at first, but if at the end of the day you’re needing to use device specific hardware, the Ionic Generator provides a few helpful tasks to make launching your app on a device less of a pain.

For instance, when I was building an NFC enabled Android application, I had to test it out on a physical device that had NFC support. Running grunt cordova && grunt run:android from the command line took about 30 seconds on my machine and allowed me to quickly test new NFC plugin related code. All grunt cordova does is skip the build process and copy over all your app/ assets as they are (no minification, obfuscation, concatenation). This should hopefully speed up your workflow.

In your question about network connectivity above, it would definitely be a good idea to handle faulty responses from your API regardless. Using the plugin could give you supplemental information on why the response might have failed, allowing you to better communicate to the user what might have gone wrong.

Happy hacking!