Prerequisite Libraries :

1. UnderscoreJs
2. Bootstrap CSS
3. AngularJs

This post used “Custom Service”, so please read this article to understand Dependency Injection in AngularJs.

Live Demo :

Complete HTML Code :

<br />
<br />
<div ng-app="myApp">
    <div ng-controller="TableCtrl">
        <div class="input-group">
            <input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" /> <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
</span>
        </div>
        <table class="table  table-hover data-table myTable">
            <thead>
                <tr>
                    <th class="EmpId"> <a href="#" ng-click="sort('EmpId',$event)">EmpId
                         <span class="{{Header[0]}}"></span>
                         </a>

                    </th>
                    <th class="name"> <a ng-click="sort('name')" href="#"> Name
                         <span class="{{Header[1]}}"></span></a>
                    </th>
                    <th class="Email"> <a ng-click="sort('Email')" href="#"> Email
                     <span class="{{Header[2]}}"></span></a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in ItemsByPage[currentPage] | orderBy:columnToOrder:reverse">
                    <td>{{item.EmpId}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.Email}}</td>
                </tr>
            </tbody>
        </table>
        <ul class="pagination pagination-sm">
            <li ng-class="{active:0}"><a href="#" ng-click="firstPage()">First</a>

            </li>
            <li ng-repeat="n in range(ItemsByPage.length)"> <a href="#" ng-click="setPage()" ng-bind="n+1">1</a>

            </li>
            <li><a href="#" ng-click="lastPage()">Last</a>

            </li>
        </ul>
        <div class="row">
            <div class="col-xs-3">
                <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">
            </div>
            <div class="col-xs-3">
                <input type="text" ng-model="newName" class="form-control" placeholder="Name">
            </div>
            <div class="col-xs-4">
                <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">
            </div>
            <div class="col-xs-1">
                <button ng-click="add()" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"></span>

                </button>
            </div>
        </div>
    </div>
    <!-- Ends Controller -->
</div>

Complete JavaScript Code :

//Demo of Searching Sorting and Pagination of Table with AngularJS - Advance Example

var myApp = angular.module('myApp', []);

//Not Necessary to Create Service, Same can be done in COntroller also as method like add() method
myApp.service('filteredListService', function () {

    this.searched = function (valLists, toSearch) {
        return _.filter(valLists,

        function (i) {
            /* Search Text in all 3 fields */
            return searchUtil(i, toSearch);
        });
    };

    this.paged = function (valLists, pageSize) {
        retVal = [];
        for (var i = 0; i < valLists.length; i++) {
            if (i % pageSize === 0) {
                retVal[Math.floor(i / pageSize)] = [valLists[i]];
            } else {
                retVal[Math.floor(i / pageSize)].push(valLists[i]);
            }
        }
        return retVal;
    };

});

//Inject Custom Service Created by us and Global service $filter. This is one way of specifying dependency Injection
var TableCtrl = myApp.controller('TableCtrl', function ($scope, $filter, filteredListService) {

    $scope.pageSize = 4;
    $scope.allItems = getDummyData();
    $scope.reverse = false;

    $scope.resetAll = function () {
        $scope.filteredList = $scope.allItems;
        $scope.newEmpId = '';
        $scope.newName = '';
        $scope.newEmail = '';
        $scope.searchText = '';
        $scope.currentPage = 0;
        $scope.Header = ['', '', ''];
    }

    $scope.add = function () {
        $scope.allItems.push({
            EmpId: $scope.newEmpId,
            name: $scope.newName,
            Email: $scope.newEmail
        });
        $scope.resetAll();
    }

    $scope.search = function () {
        $scope.filteredList = filteredListService.searched($scope.allItems, $scope.searchText);

        if ($scope.searchText == '') {
            $scope.filteredList = $scope.allItems;
        }
        $scope.pagination();
    }

    // Calculate Total Number of Pages based on Search Result
    $scope.pagination = function () {
        $scope.ItemsByPage = filteredListService.paged($scope.filteredList, $scope.pageSize);
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    $scope.firstPage = function () {
        $scope.currentPage = 0;
    };

    $scope.lastPage = function () {
        $scope.currentPage = $scope.ItemsByPage.length - 1;
    };

    $scope.range = function (input, total) {
        var ret = [];
        if (!total) {
            total = input;
            input = 0;
        }
        for (var i = input; i < total; i++) {
            if (i != 0 && i != total - 1) {
                ret.push(i);
            }
        }
        return ret;
    };

    $scope.sort = function (sortBy) {
        $scope.resetAll();

        $scope.columnToOrder = sortBy;

        //$Filter - Standard Service
        $scope.filteredList = $filter('orderBy')($scope.filteredList, $scope.columnToOrder, $scope.reverse);

        if ($scope.reverse) iconName = 'glyphicon glyphicon-chevron-up';
        else iconName = 'glyphicon glyphicon-chevron-down';

        if (sortBy === 'EmpId') {
            $scope.Header[0] = iconName;
        } else if (sortBy === 'name') {
            $scope.Header[1] = iconName;
        } else {
            $scope.Header[2] = iconName;
        }

        $scope.reverse = !$scope.reverse;

        $scope.pagination();
    };

    //By Default sort ny Name
    $scope.sort('name');

});

function searchUtil(item, toSearch) {
    /* Search Text in all 3 fields */
    return (item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.EmpId == toSearch) ? true : false;
}

/*Get Dummy Data for Example*/
function getDummyData() {
    return [{
        EmpId: 2,
        name: 'Jitendra',
        Email: 'jz@gmail.com'
    }, {
        EmpId: 1,
        name: 'Minal',
        Email: 'amz@gmail.com'
    }, {
        EmpId: 3,
        name: 'Rudra',
        Email: 'ruz@gmail.com'
    }, {
        EmpId: 21,
        name: 'Jitendra1',
        Email: 'jz@gmail.com'
    }, {
        EmpId: 11,
        name: 'Minal1',
        Email: 'amz@gmail.com'
    }, {
        EmpId: 31,
        name: 'Rudra1',
        Email: 'ruz@gmail.com'
    }, {
        EmpId: 22,
        name: 'Jitendra2',
        Email: 'jz@gmail.com'
    }, {
        EmpId: 12,
        name: 'Minal2',
        Email: 'amz@gmail.com'
    }, {
        EmpId: 32,
        name: 'Rudra2',
        Email: 'ruz@gmail.com'
    }, {
        EmpId: 23,
        name: 'Jitendra3',
        Email: 'jz@gmail.com'
    }, {
        EmpId: 13,
        name: 'Minal3',
        Email: 'amz@gmail.com'
    }, {
        EmpId: 33,
        name: 'Rudra3',
        Email: 'ruz@gmail.com'
    }];
}

JSON data is input to table, which can be replaced by any server side JSON response. So, in case if you need to use this example in Salesforce, You simply have to change “getDummyData()“ method and get response using REST API. This article will be helpful if you are looking on how to generate JSON output in Visualforce page.

Why do we need Service in above example ?

It is always better to separate concern from Controller. So instead of writing methods or logics inside Controller, we have created Service and passed service as a parameter while declaring controller.

Now we just have to call methods declared in service from Controller.

If you are looking for same kind of Example in Salesforce then this is very Good Article written by Harshit and Mohit Srivastav.

Live Demo of this example

AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so if you are stucked somewhere while using this library, you will have tons of supporters.

So what is so special about this framework, other than its developed by Google ?

• Unlike Backbone and Ember, You don’t have to spend time on Event Handling (Bind, UnBind Events etc).
• It Works on principal of Dirty Checking.
• Automatically fires event if something gets changed.

What ? Dirty checking ? wouldn’t it be performance impact on my web application?

You are correct. But Google team has answer for this.

• AngularJS performance mainly linked to your computer (Client’s Computer) performance.
• Ergonomical point of view, an HTML page should not have more than 200 fields. More fields will just distract users.

In this article, I will demonstrate how to use AngularJs framework to create simple application.

Application will look like :

We have already discussed about using underscore library for javascript collection related utilities and templating in previous article. In this demo also, I have used this library to clear list of items which are checked using method “filter“.

Live Demo of application

HTML Code :

<body ng-app>
    <h2> Angular Demo with BootStrap and Underscore.js</h2>

    <div ng-controller="ItemCtrl">
          Total Items -  {{items.length}}
        <ul class="unstyled">
            <li ng-repeat="item in items">
                <input type="checkbox" ng-model="item.done">
                    <span class="done-{{item.done}}"> {{item.txt}} </span>
            </li>
        </ul>

            <form class="form-horizontal">
                 <div class="form-group">
                    <input type="text" ng-model="itemToAdd"   placeHolder="Add Item"/>
                    <button   class="btn" ng-click="add()">
                        <i class="icon-plus-sign"></i>  Add
                    </button>
                </div>
                <button class="btn" ng-click="clear()">
                    <i class="icon-trash"></i> Clear Completed Items
                </button>
            </form>
    </div>
</body>

JavaScript code :

function ItemCtrl($scope)
{

  $scope.items = [
    {txt:"Angular is Awsome", done:false},
    {txt:"Next is Node.js", done:false}
  ];

  $scope.add = function() {
  $scope.items.push({txt:$scope.itemToAdd,done:false});
		$scope.itemToAdd = "";
  }

  $scope.clear = function(){
    //Here we will use Underscore as simplest library to work with Collections
    $scope.items = _.filter($scope.items, function(item){
    return !item.done;
  });
}
}

For look and Feel we are using Tweeter’s Bootstrap library.

Additional CSS :

.done-true {
    text-decoration:line-through;
    color:grey;
}

Output of above code is already shown above.

Now Lets understand above code and few basics of AngularJs.

How to define variables ?

Variable can be used in HTML as well as javascript part of your application. Inside Javascript, you can use it normally, however if you want to use any variable inside HTML (View) then your variable has to be enclosed between double curly bracket.

Lets take other example to understand this.

<body ng-app>
  <p>Hello {{name}}</p>
  <input type="text" ng-model="name">
</body>

As shown in above code, “name” is variable. Without single line of javascript code, your angularJs will understand that whatever entered inside text box has to be updated in <p> tag. If you see, we have not added any onchange event on textbox. It all works automatically on principal of dirty checking, Isn’t it so cool ? 🙂

Working demo of above example.

Lets come back to our original code. If you see HTML part, we have used many variables like {{item.length}} and it is defined in JavaScript code.

What is Angular application or “ng-app” ?

Your web page can have one or many application defined by tag “ng-app”. This represents one unit of application which will have its own controller. In order to use AngularJs, you must need to have atleast one ng-app.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.

What is Controller ?

Controller will decide that what action has to perform on part of your web application. It Controls flow of execution and logic.

This is defined with help of attribute “ng-controller“. This is actually Engine Directive used to define Controller. $scope variables can be accessed only between its definition. In our Example, we have defined controller by name “ItemCtrl”. In Simple words you can say that Controller is plain javaScript function where you define your data to visible in scope and operations to be performed.

There are many ways to define controller. One of the simplest way, which I followed in this example is to define normal javaScript function and supply $scope argument.

Inside Controller “ItemCtrl”, we have defined items available for List , also we have defined two methods named add() and clear().

What is Scope ?

Scope is object in Angular which is used to bind data and other information between Controller and View. $scope defines that which data and which method can be accessed by controller. It is represented as $scope. If you see our javascript part of code, we have supplied $scope to controller method “ItemCtrl”.

Model or directive “ng-model”:

This is defined using directive “ng-model“. This is Engine Directive used to perform two way Binding of variable between View and Controller.

As shown in above code ; When we click on Checkbox, “ng-modal” directive will make sure that “done” attribute of item also set accordingly both side (Controller and View). In Same way When any value is added in Text Box, ng-model “itemToAdd” makes sure that it is available to Controller.

How to iterate over List ? “ng-repeat” is savior.

If you check our javascript part of code, you might be amazed that how list of items are iterated and added in UI? This magic is happen because of “ng-repeat” directive. One of the most used directives, it comes handy while iterating through list of items. In our case we iterated through items to create checkbox and “ng-modal” is used to make sure there is two way binding between View (HTML Components) and Controller.

Last but not least, “ng-click”.
Used to invoke Javascript function defined in $Scope of Controller on click event. In Our case, we have defined two methods, add() and clear().

I hope this article will give you start with Javascript framework AngularJs. Feedback and suggestions are welcome !!!