Category Archives: Javascript

Getting started with Hybrid development with Ionic – Part 1: System Setup

So, let’s just dive in and get the dev machine setup. We are going to be using Apache Cordova, Ionic, and AngularJS frameworks. And we’ll get Jasmine and Karma setup for testing. We will also use npm (node package manager) to install these libraries, so let’s get that installed first.

Install nodejs using the install link at nodejs.org. Then let’s ensure we have the latest version by running this as administrator.

npm install npm -g

We also need the Java JDK (not just JRE). That can be downloaded and installed from here. Just follow the instructions, and ensure it’s in your PATH when complete.

Now let’s get Apache ANT from here, and install it.

Also required is the Android SDK. Just follow the instructions, and run the Android SDK Manager to install the latest SDK Platform. Cordova requires the ANDROID_HOME environment variable. This should point to the android-sdk directory.

Now that we have npm, let’s install cordova and ionic as administrator.

npm install -g cordova
npm install -g ionic

Now, navigate to the location you want to create your application. And generate a blank ionic app with

cd c:\source\
ionic start helloworld blank

NOTE: I had a problem here, I received the following error: “Unable to add plugins. Perhaps your version of Cordova is too old. Try updating (npm install -g cordova), removing this project folder, and trying again. (CLI v1.3.2)”. However, nothing I did solved the problem. Turns out, for some reason, my helloworld/config.xml was blank. You can fetch a new config.xml here, replace the empty one, and things should start working.

Open the helloworld folder and let’s add the android platform, and run the blank app

cd helloworld 
ionic platform add android
ionic serve

ionic_serve

Or connect your android device by usb, and load the application on it with

ionic run android

You can also run it in the Android emulator, but I don’t recommend it, as it’s slooooooow.

ionic build android
ionic emulate android

Next we’ll start adding some code and tests.

TIL: The subtle difference between Keypress and Keydown (aside from the obvious)

The other day at work, an innocuous question was posed…

So, in javascript ‘ (apostrophe) and right arrow have the same event key code. What am I supposed to do with that?

This did not seem right to me, but, sure enough, a js fiddle showed this to be true…almost (go to result tab, and hit different keyboard keys, it will show the character code).

What appeared to be the same code (if you hit apostrophe then an arrow) was actually just that the arrow didn’t register as a keypress, and you were still seeing the last keys code. However, this was only true in some browsers, IE and Chrome, Firefox I believe worked as one would expect.

Changing to a keydown event works, and shows the right arrow as 39, like it should.

Quirksmode clears up a bit of the confusion, and has a nice little tester at the bottom of the page.