Use Underscore Library In Ionic

If we take a quick look into the official AngularJS API Docs, we can see that AngularJS provides already a few excellent little helper functions, but at some stage, they aren’t enough.

To extend the ionic application with Underscore, it’s necessary to check out the Underscore website first. The left part of the site will hit you hard in your face with trillions of functions for almost everything what you need. That’s the reason I love Underscore so much!

Let’s Start To Install Underscore

Go into the ionic application folder and use bower to install Underscore:

rschulz@MacBook-Pro:~/www/ionic-app/$ bower install underscore --save-dev
bower underscore#*              cached git://
bower underscore#*            validate 1.8.3 against git://*
bower underscore#~1.8.3        install underscore#1.8.3

underscore#1.8.3 www/lib/underscore

The –save-dev argument is important to save the installed package information into the application’s bower.json development dependencies. With --save you save the installed package information for the production mode of the ionic application.

Bower installed Underscore in the www/lib/underscore folder which contains the following files:

rschulz@MacBook-Pro:~/www/ionic-app/www$ tree lib/underscore
├── bower.json
├── underscore-min.js
└── underscore.js

0 directories, 6 files

But wait! We need a bridge connector between the Underscore library and ionic first. Otherwise, we can’t use Underscore in ionic how we want it.

Let’s install yet another shit. This is called angular-underscore-module and you can check it out on Github.
By the way, you can install it with bower too:

rschulz@MacBook-Pro:~/www/ionic-app/www$ bower install angular-underscore-module --save-dev
bower angular-underscore-module#*           cached git://
bower angular-underscore-module#*         validate 1.0.1 against git://*
bower angular-underscore-module#~1.0.1     install angular-underscore-module#1.0.1
bower                                      no-json No bower.json file to save to, use bower init to create one

angular-underscore-module#1.0.1 www/lib/angular-underscore-module

Include And Load Underscore In Ionic Application

First we have to open index.html in which we put the Underscore Library and the Angular Underscore Module like that:

<script src="lib/underscore/underscore-min.js"></script>
<script src="lib/angular-underscore-module/angular-underscore-module.js"></script>

It’s very important in which order you add the files – they rely on each other!

Until now, ionic doesn’t know anything about Underscore. This is what we want to change by putting the Underscore dependency in our ionic app: js/app.js:

angular.module('ionicApp', [ 'ionic', 'underscore' ]);

Now we can use Underscore in our ionic application. Here’s a short example how to use Underscore in a controller:

angular.module('appController', [])

.controller('AppTestCtrl', function ($scope, $log, _) {
  'use strict';

  var arrayList    = [5, 4, 3, 2, 1],
      firstElement = _.first(arrayList);

  // the firstElement variable spits out: 5

Pretty cool, huh?

With Underscore, you can save loads of time, and I would recommend to use it in a combination with Node.js or pure JavaScript applications too!

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn