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.

Lodash!

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

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