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 visitunderscorejs.org to view all the methods that are available in underscore.

_.isUndefined:

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.

    _.isUndefined(value)

_.defaults:

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"}

_.where:

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});
//output
[{model:fiesta, manufacturer:ford},{model:T, manufacturer: ford}]
view rawgistfile1.js hosted with ❤ by GitHub

_.uniq:

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
_.uniq(data);
//Ouput
[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
_.uniq(objs);
//output
[{name:Samsung}, {name: LG}, {name:Sony}]
view rawgistfile1.js hosted with ❤ by GitHub

_.pluck:

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);
//output
[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 *