AngularJS & Underscore The ultimate web-development toolkit

Using Underscore with Angular:

Combining angular and underscore is pretty straightforward, want you can do it add import underscore in your index.html, then add it as a service.

var underscore = angular.module(underscore, []);
underscore.factory(_, function() {
return window._; // assumes underscore has already been loaded on the page

view rawgistfile1.js hosted with ❤ by GitHub

And then we could inject it into our controllers:

//Now we can inject underscoreJS in the controllers
function MainCtrl($scope, _) {
//using underscoreJS method
_.max([1,2,3,4]); //It will return 4, which is the maximum value in the array
view rawgistfile1.js hosted with ❤ by GitHub

Useful Underscore methods:

I have compiled a list of my favourite underscoreJS methods, you can always to view all the methods that are available in underscore.


This method is used to determine weather the specified value is undefined or not, I know you could always do typeof value === “undefined” to check weather it is undefined or not, but I find this neater.



This is also a very useful method, it allows you define a default values for something if they are not present.

var data = {"model":"T", "manufacturer": "Ford", "price": "200"};
_.defaults(data, {"model":"N/A", "N/A": "Ford", "price": "0"})

output: ---> {"model":"T", "manufacturer": "Ford", "price": "200"}

_.defaults({},{"model":"N/A", "N/A": "Ford", "price": "0"}) 
output: ---> {"model":"N/A", "N/A": "Ford", "price": "0"}


This method comes handy when you want to search something in the array of objects using some attributes present in the object. consider the example below.

var data = [{model:T, manufacturer: ford},
{model:S, manufacturer:tesla},
{model:r8, manufacturer:audi},
{model:fiesta, manufacturer:ford}];
//Code to fetch all the ford cars
var fordCars = _.where(data, {manufacturer: ford});
[{model:fiesta, manufacturer:ford},{model:T, manufacturer: ford}]
view rawgistfile1.js hosted with ❤ by GitHub


This method operates on arrays, and it removes duplicates in the array. Consider the following example:

var data = [a,b,c,a,s,b]; //This array contains duplicates
[a,b,c,s,b] //duplicates removed
//Also works on array of objects
var objs = [{name:Samsung}, {name: LG}, {name:Sony}, {name:Samsung}]; //contains duplicate objects
[{name:Samsung}, {name: LG}, {name:Sony}]
view rawgistfile1.js hosted with ❤ by GitHub


if you ever wanted to extract some values from an array of objects, well the pluck method let’s to do that. Here is the example:

var data = [{tweet:hello world, id:1}, {tweet:this is awesome, id: 2}, {tweet: wow, this is nice, id: 3}];
_.pluck(data, id);
[1, 2, 3]
view rawgistfile1.js hosted with ❤ by GitHub

By merging these two awesome web development frameworks together we can get a pretty nice web development experience, as angular serves as an awesome MVC, and underscore provides a very useful collection of utility methods.

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *