How to use lodash cdn in AngularJS?

Hello Friend’s, months ago we have discussed “How to use underscorejs cdn in AngularJS”. Today we will see the similar thing is “How to use lodash cdn in AngularJS”. Both cdns works are similar but little things are different. Both are dependent on JavaScript. A JavaScript is the programming language of HTML and the web. 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 form 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.

What Is Lodash?

An AngularJS module adapting lodash. A fork of angular-underscore. This module exposes lodash’s API into angular app’s root scope and provides some filters from lodash. A modern JavaScript utility library delivering modularity, performance & extras.

Why Lodash?

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc. Lodash’s modular methods are great for the Iterating arrays, objects, & strings and Manipulating & testing values and Creating composite functions. A Lodash is the clear winner for the NodeJs users. A file size doesn’t matter on the server, and its use of semantic versioning matters a lot more for developers depending on npm for dependency management. So take the performance gains and extra capabilities and go with it.

Difference between Underscore and Lodash

Lodash began its life as a fork of Underscore and still tracks Underscore’s API enough to allow it to serve as a drop-in replacement. It’s also added a number of features and functions that Underscore does not provide. Lodash has improved the Usability like (shorthand syntaxes for chaining, custom builds to only use what you need, Semantic versioning and 100% code coverage) Extra functionality, Performance gains. Lodash also provides helper function for deep cloning, merging and extensions, operations that are not available in most libraries.

How to use Lodash

Now we create application for learn how to use Lodash, Open visual studio or visual studio code and create new empty project. After empty project is created then create required folders in project. Create new folders are scripts, modular, controller, view. In scripts folder install the angular.js and lodash.js and jquery.js, in modular folder we will create modular file and the controller folder create a controller and in the last folder of view we will create HTML page.

After install AngularJS

Install Lodash

- npm install angular-lodash

OR

- Reference

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js">
</script>

App.Js (Modular)

var app = angular.module ("LodashDemo", []);

Above we have created a modular file and here we do not inject the ‘angular-lodash’ because we will use the second option of Reference for use Lodash JavaScript. Using modular we will create controller, factory or etc.

LodashController.Js (Controller)

app.controller ("lodashController", function ($scope, _) {
 });

Using modular name we have created a controller and use the reference of global variable “$scope” and “_” for use Lodash functions. Now we will create run service using the modular name in the same controller file.

app.run (
    function (_) {
    });

It is so small code in the run service, here also we used the “_” because the controller connected with this run service and the next we will create service factory.

app.factory (
    "_",
    function ($window) {
        var _ = $window._;
        delete ($window._);
        return (_);
    });

Above we have created a factory of “_” and used the “$window” and the last we returned the “_”. Now we set the static data and use the Lodash functions on that data and get the actual result. There are two functions we will see in this example that one is “_.filter” and “._chunk”.

//…Static Data…

var persons = [
        {      id: 1,
            name: "ABC",
            is Employee: true,
            ableForManagerPost: false
        },
        {
            id: 2,
            name: "DEF",
            is Employee: false,
            ableForManagerPost: false
        },
        {
            id: 3,
            name: "PQR",
            is Employee: true,
            ableForManagerPost: true
        },
        {
            id: 4,
            name: "XYZ",
            is Employee: true,
            ableForManagerPost: false
        }
    ];
    $scope.employees = _.filter (persons, "is Employee");
    $scope.ableForManagerPost = _.filter ($scope.employees, "ableForManagerPost");
    var chunks = _.chunk (persons, 2);
    console.log (chunks);

Above, you can see filter and chunks functions are used for getting the actual result and both functions work differently. Using “._filter” function first we filter the “is employee” data and from that data, we have filtered the “ableForManagerPost” employee. Using “._chunk” function we divide the array in no of count that defines in second parameter (2), It means an array of the object is 4 and by “_.chunk” function we have divided in 2 arrays of an object and log it using console.log () function. If you want to see the logged data then run your application in the browser and press the F12 key or right click on the webpage and select “Inspect Element” from menu option and see “Inspect element” then click on console tab.

_.filter ()

Iterates over elements of a collection, returning an array of all elements predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection).

Syntax:

_.filter (collection, [predicate=.identity])

_.chunk ()

Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements.

Syntax:

_.chunk (array, [size = 1])

Finally

Lodash Controller

app. controller ("lodashController", function ($scope, _) {
    var persons = [
        {
            id: 1,
            name: "ABC",
            isEmployee: true,
            ableForManagerPost: false
        },
        {
            id: 2,
            name: "DEF",
            isEmployee: false,
            ableForManagerPost: false
        },
        {
            id: 3,
            name: "PQR",
            isEmployee: true,
            ableForManagerPost: true
        },
        {
            id: 4,
            name: "XYZ",
            isEmployee: true,
            ableForManagerPost: false
        }
    ];


    
    $scope.employees = _.filter(persons, "isEmployee");
    
    $scope.ableForManagerPost = _.filter ($scope.employees, "ableForManagerPost");
    
    var chunks = _.chunk (persons, 2);
    console.log (chunks);
} 
);
app.run (
    function (_) {
    }
);
app.factory ("_", function ($window) {
        var _ = $window._;
        delete ($window._);
        return (_);
    }
);

Now show the filtered data on HTML page of Lodash.html, we have filtered the data and store in two variables “$scope.employees” and “$scope.ableForManagerPost” and this variable objects show using the ng-repeat directive in HTML page, we show the data in table format.

In HTML page we must reference the modular name in tag by ng-app="LodashDemo" and reference the controller name in tag by ng-controller="lodashController" and put the reference of angular.js, online lodash.js, app.js (modular file) and the last one is lodashController.js (controller file).

Lodash.html

<! doctype html>
<html ng-app="LodashDemo">
<head>
    <meta charset="utf-8" />
    <title>
        How to use Lodash in AngularJs
    </title>
</head>
<body ng-controller="lodashController">
<script src="../scripts/angular.js"></script>
 <script     src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js">
</script>
    <script src="../modular/app.js"></script>
    <script src="../controller/lodashController.js"></script>
</body>
</html>

In above HTML page, we have referenced the modular, controller and online lodash JavaScript link. Now we will create one simple table in HTML page for show actual filtered data, if you want to design a table very well then you can create your custom CSS or use Bootstrap classes for the better user interface.

<table border="1" width="100 %">
            <tr>
                <th>
                    Employees
                </th>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>
                    {{employee.name}}
                </td>
            </tr>
            <tr>
                <th>
                    Able For the Manager Post
                </th>
            </tr>
            <tr ng-repeat="ableForManager in ableForManagerPost">
                <td>
                    {{ableForManager.name}}
                </td>
            </tr>
        </table>

In above HTML table code, we have used two times “ng-repeat” in two different rows because we have two different objects, that one is “employees” and second is “ableForManagerPost”. The first object shows only employees but the second object shows that employees who are able for manager post and the finally HTML page look like below.

Finally

Lodash.html

<! doctype html>
<html ng-app="LodashDemo">
<head>
    <meta charset="utf-8" />
    <title>
        How to use Lodash in AngularJs
    </title>
</head>
<body ng-controller="lodashController">    
        <table border="1" width="100 %">
            <tr>
                <th>
                    Employees
                </th>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>
                    {{employee.name}}
                </td>
            </tr>
            <tr>
                <th>
                    Able For the Manager Post
                </th>
            </tr>
            <tr ng-repeat="ableForManager in ableForManagerPost">
                <td>
                    {{ableForManager.name}}
                </td>

            </tr>
        </table>
    <script src="../scripts/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js">
</script>
    <script src="../modular/app.js"></script>
    <script src="../controller/lodashController.js"></script>
</body>
</html>

Here, we have seen two functions of lodash.js, if you want to use more functions in your application then visit the “Lodash.JS”.

Thanks’ a lot