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:
- Part 1: Dip Your Toe In
- Part 2: A Few of My Favorite Things
- Part 3: The API Service
- Part 4: Application Layout
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:
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:
Next up, part three: The API Service