Hello Friend’s, Here we will see “How to use UnderscoreJs cdn in AngularJs”. So first we will see (JS) JavaScript. A JavaScript is the programming language of HTML any the web. A JavaScript is very easy to learn. JavaSCript and Java are completely different languages in concept and design. There are so many specifications are available In JavaScript like (ECMA - 262). A JavaScript should be included in or referenced by an HTML document for the code to be interpreted by the browser. It means that a webpage need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content. You can use JavaScript to check if the user has entered a valid e-mail address in a from field. By JavaScript, you can validate user input before sending the page off to the server. It is Increased the user interactivity and richer interfaces. JavaScript doesn’t have any multithreading or multiprocessor capabilities. Now, we got some knowledge about JavaScript, So we can easy to learn UnderscoreJs in AngularJs. Let’s Start.
What is underscorejs ?
Underscorejs is a javascript library, that provides useful functional programming helpers without any built-in objects. Underscore provides over 100 functions that support both your favorite workday functional helpers: map, filter, invoke as well as more specialized goodies : function binding, javascript templating, creating quick indexes, deep equality testing, and so on.
You can install UnderscoreJs using Node.js, Meteor.js, Require.js, Bower, Component or download it by link of https://underscorejs.org/underscore-min.js. go to this link page and right click on page and click on saveAs and the underscore.js file is download.For this post we have install UnderscoreJs by bower component. The command is below
Installation
bower install underscore
Open visual studio which version you have, you can use visual studio code for make this post solution. Create new empty project and make required folders; we will add required files in that folders, we create script, controller, view, bower_component folders. We must create folders structure because of there are different files we have create like (.html), (.js), components and etc. In Angularjs, we must create a module file for web application and in this module file we can inject all the components, packages or etc. you can say module file is an entry point of Angularjs project. Create moduler file (app.js) in scripts folder.
var app = angular.module('underscoreDemo', []);
UnderscoreDemo is a name of module and we have store module in app variable, this app variable we can use to create controller, service, directive or component.
What Is Controller
A Controller is defined by a javascript constructor function that is used to augment the AngularJs Scope. When a Controller is attached to the DOM via the ng-controller directive, AngularJs will instantiate a new Controller object, using the specified Controller’s constructor function.
Create Controller file (.Js) in controller folder, In controller file we have to create controller using name of controller by module name (app). We have to inject ($scope) global variable in controller function. A $scope global variable use to bind data in view (.html) side. You can add more injector in the controller.
app.controller('underscoreController', ['$scope',function ($scope)
{
}]);
For binding controller data to view(.html) side we have to create (.html) file in view folder. In HTML file we have to inject modular name by directive of (ng-app) or data-ng-app and second is inject the controller by ng-controller or data-ng-controller. First we have to inject AngualrJs file link, second inject the UnderscoreJs file, If you want to create responsive design then inject bootstrap cdn link or manually download bootstrap and add bootstrap files in project and then inject the (.css) and (.js) path in HTML page. The fourth is inject the moduler file link and then inject controller file link.
<!DOCTYPE html>
<html data-ng-app="underscoreDemo">
<head>
<title>UnderscoreExample</title>
</head>
<body data-ng-controller="underscoreController">
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Angular scripts-->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<!-- Anglar App Script -->
<script src="../script/app.js"></script>
<!-- endbuild -->
<!-- Angular Controllers -->
<script src="../controller/underscoreController.js"></script>
</div>
</body>
</html>
Now, we have to bind to data in HTML page from controller, first bind controller in tag or
tag in HTML page using data-ng-controller = “underscoreController”.
Now create table for bind data in div tags and use some bootstrap classes for designing purpose.
<!DOCTYPE html>
<html data-ng-app="underscoreDemo">
<head>
<title>UnderscoreExample</title>
</head>
<body data-ng-controller="underscoreController">
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Angular scripts-->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!--<script src="../bower_components/jqueri-ui/jquery-ui.js"></script>-->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<!-- Anglar App Script -->
<script src="../script/app.js"></script>
<!-- endbuild -->
<!-- Angular Controllers -->
<script src="../controller/underscoreController.js"></script>
<div class="row" style="padding:10px">
<div class="col-md-3">
</div>
<div class="col-md-6">
<table class="table table-bordered active">
<th>ID</th>
<th>Name</th>
<tr data-ng-repeat="array in MyArray">
<td>{{$index + 1}}</td>
<td>{{array}}</td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</body>
</html>
You can see above use angular (data-ng-repeat=’array in MyArray’) for getting data from array and bind it as in expression. We have bind array in expression like {{array}}. You can bind data using {{}} expression or use ng-bind = “array”. The expression is better than ng-bind because we can do calculation in expression. {{ array + 1}}. By ng-bind you can’t do calculation.
In controller file, we have use one function that is underscore.js function that one is _.each() function. You can call it replace forloop. For use this function must download the Underscore.js file and that is downloaded in our project and injected it in HTML page
You can get guideline to how to use UnderscoreJS functions in controller, service or any other files. Now we will see how to use _.each() function in the controller. _.each() function reduce the long code and very easy code and understandable.
app.controller('underscoreController', ['$scope',function ($scope)
{
$scope.MyData = ['abc','def','ghi','jkl','mno','pqr','stu','vw','xyz'];
$scope.MyArray = [];
_.each($scope.MyData, function (data) {
$scope.MyArray.push(data);
});
}]);
In above controller we have created one array like $scope.MyData and in this array we have add some static values. The second array is $scope.MyArray that is empty array because we bind the $scope.MyData array values in $scope.MyArray using _.each() function.
Use, _.each() function, $scope.MyData array have multiple data that is you can called lists. This function get one value from lists like that (data).A data get single value from lists and push in $scope.MyArray using javascript push() function.
For use any more functions of underscoreJs, Go to UnderscoreJS site
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
Thanks a lot for explain each and every state in blog
ReplyDeleteThanks..Akshay..
DeleteIt is nice.
ReplyDeleteI have question.
What is different _each and foreach.?