Want to Drive Innovation through Crowdsourcing? Learn the 5 Steps Get the eBook ×

Ionic – A Few of My Favorite Things

By wwwtc In Uncategorized

Posted July 16th, 2015

In Part 1 we got Ionic installed and created a template application.

In Part 2, we’ll add a few libraries and do a little customization.

This post is part of an ongoing series:

Before we get started, let’s talk about the Ionic web server. We aren’t going to fire up a full fledged iOS emulator every time we make a change. Instead, Ionic will serve up your application for easy consumption in a browser.

Starting the Web Server:

This will launch the web server, which will auto-update whenever you save a change to your application source files.


First up, since we’re going to essentially be developing in Angular anyways, let’s get lodash in there. Open up your www/index.html file and plug this in:

Next, grab the latest lodash.min.js and put it in www/lib/external/js/ (create the external directory if it’s not already there).

In order to be truely “Angular” we’ll need a service to inject lodash into our controllers.

Let’s create www/js/services.js, which will contain all our services – starting with this one:

Finally add your service to the Ionic module loader (www/js/controllers.js):

That’s it! Lodash is now available to your controllers, just be sure to inject it:

Local Storage

What good is an application that can’t store any data? We’ll use HTML5’s local storage facility for this – but the Angular way:

(adding to www/js/services.js)

This recipe is courtesy of http://learn.ionicframework.com/formulas/localstorage/

In this case, you’ll add ‘ionic.utils’ to your primary Angular module’s dependencies and inject $localstorage into your controllers. Details on using it are here.


ngCordova allows you to use Cordova plugins through Angular services. For our demo app, we’ll be using it to add a splash screen.

First the basic install:

Then add it to your www/index.html file:

That’s it.

Next up, part three: The API Service