UnderscoreJs with AngularJs

UnderscoreJs is a JavaScript Libraries which have several functions which extend functionality without extending any built-in objects. It is comparable to features provided by Prototype.js and the Ruby language but opts for a functional programming design instead of extending object prototypes. For example, Underscore.js each function delegates to the host environment’s native for each implementation when present or a compatible version when absent. The documentation refers to Underscore.js as “the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.” Underscore.js was created by Jeremy Ashkenas, who is also known for Backbone.js and Coffee Script.

UnderscoreJS have several categories for functions that is-

Collections

Arrays

Objects

Function

Utility

These functions can be directly used on Java Script variables, and provide desired results.

“Simple answer is that by using this we can speed up our coding by avoiding lots of loops and checks.”

Lets have a look on AngularJS-

AngularJS (commonly referred to as “Angular” or “Angular.js“) is a complete JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing Single Page Application. The framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model-view-controller (MVC) and model-view-view model (MVVM) architectures, along with components commonly used in a rich internet application.

The AngularJS framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

Steps For WebApp with AngularJs and UnderscoreJS…

Step 1-Initializing App- first we make an empty web project in Visual Studios. Select Asp.net Web Application after that select an empty template.

Step 2-Including Libraries- Now we include a library, which we needed in the project.

Angularjs

JQuery

Bootstrap

Underscorejs

Json-formatter

How we can insert the library in our project?

After initializing project we have to insert library, there are several ways, some are following-

Via Manage Nuget Package Manager

Via Node js command prompt

Via Git

Download Script file and put it in the scripts folder

In this app, I am using the fourth method after downloading the .js file put it in script tag in index.html file.

Step 3- Create index.html file –

Include all libraries in index file.

Index file will look like this

Step4- Create app.js-

Create app.js and include it into index.js file script tag.

Now make Angularjs app and module as following-

var app = angular.module(‘myApp’, [‘jsonFormatter’]);

app.controller(‘myCtrl’, function($scope) {

})

*remember do not forgot to include ‘jsonFormatter’ dependency in to angular app. Because it is third party tool which is in our app.