Infinite-scroll for facebook like pagination in AngularJS



Introduction

In the previous article, I have shown you how to implement autocomplete textbox in angularjs application for build highly interactive web application. Today I will show you, how to implement Infinite-scroll for facebook like pagination in AngularJS for make our web application a little more attractive.

So, What is Infinite-scroll ?

Infinite-scroll is also known as "endless scrolling", "lazy loading" etc. Infinite scroll is a way to load more data using Ajax request while page goes to scroll down. You may have seen this technique on the Facebook timeline or on Twitter's homepage.

Here in this article, I will show some data in a table first and will load new data automatically each time you scroll to the end of the existing content.

If you have asp.net webforms application, you can follow this article  How to load gridview rows on demand from database through scrolling in ASP.NET .

Just follow the following steps in order to implement "Infinite-scroll for facebook like pagination in AngularJS".

Here In this article, I have used Visual Studio 2013

Step - 1: Create New Project.

Go to File > New > Project > ASP.NET  Web Application (under web) > Entry Application Name > Click OK > Select Empty template > Checked MVC (under "Add folders and core references for" option) > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table for store data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

Employees Table 

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Create a javascript file for angular components.

Here I have added a javascript file in the "Scripts" folder for add angular components (module, controller, directive etc).

Here I have added a folder "Scripts" in our solution. If you have not already added, you can follow the below steps for adding the folder.

Right click on your solution > Add > new folder ... > Rename to "Scripts".

Right click on your "Scripts" folder > Add > New Item > select "javascript" file > Enter name (here "myApp.js")> Ok.
Write following code
var app = angular.module('myApp', []);
app.controller('InfinityScrollController', ['$scope', '$http', function ($scope, $http) {
    $scope.CurrentPage = 1;
    $scope.TotalPage = 0;
    $scope.EmployeeList = [];

    function GetEmployeeData(page) {
        $scope.IsLoading = true;
        $http({
            method: 'GET',
            url: '/home/getEmployeeData',
            params: { 'page': page }
        }).then(function (response) {
            angular.forEach(response.data.List, function (value) {
                $scope.EmployeeList.push(value);
            });
            $scope.TotalPage = response.data.totalPage;
            $scope.IsLoading = false;
        }, function () {
            $scope.IsLoading = false;
        })
    }

    GetEmployeeData($scope.CurrentPage);

    $scope.NextPage = function () {
        if ($scope.CurrentPage < $scope.TotalPage) {
            $scope.CurrentPage += 1;
            GetEmployeeData($scope.CurrentPage);
        }
    }
}]);

//directive
app.directive('infinityscroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('scroll', function () {
                if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
                    //scroll reach to end
                    scope.$apply(attrs.infinityscroll)
                }
            });
        }
    }
});
you can see here I have added a directive (here "infinityscroll") for check the scroll position and fired an angular js method  for load new content (if available) while scroll reached to end of the existing content. 

Step-6: Create an MVC Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller named "HomeController"

Step-7: Add new action into your controller. 

Here I have added "Index" Action into "Home" Controller. Please write this following code
public ActionResult Index()
{
   return View();
}

Step-8: Add view for your Action and design.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
HTML Code
@{
    ViewBag.Title = "Index";
}
<div class="container">
    <h2>Infinity scroll in AngularJS</h2>
    <div ng-app="myApp" ng-controller="InfinityScrollController">
        <div style="position:relative">
            <span ng-show="IsLoading" class="loading">Loading...</span>
            <div infinityscroll="NextPage()" style="height:400px; overflow:auto;">
                <table class="table table-responsive table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Country</th>
                            <th>City</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="emp in EmployeeList">
                            <td>{{emp.FirstName}} {{emp.LastName}}</td>
                            <td>{{emp.EmailID}}</td>
                            <td>{{emp.Country}}</td>
                            <td>{{emp.City}}</td>
                        </tr>
                    </tbody>
                </table>  
            </div>
        </div>
    </div>
</div>

@* JS *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="~/Scripts/myApp.js"></script>
@* CSS *@
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
/*Loading panel css*/
    .loading{
        position:absolute;
        left:48%;
        top:48%;
        display:block;
        padding:5px;
        background-color:yellow;
        color:red;
        border:1px solid;
        margin:0 auto;
    }
</style>

Step-9: Add an another action in our MVC controller for fetch data from the database.

public JsonResult getEmployeeData(int page)
{
    List<Employee> list = new List<Employee>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        int totalPage = 0;
        int totalRecord = 0;
        int pageSize = 20;

        var v = dc.Employees.OrderBy(a => a.FirstName);
        totalRecord = v.Count();
        totalPage = (totalRecord / pageSize) + ((totalRecord%pageSize) > 0 ? 1: 0);

        list = v.Skip((page - 1) * pageSize).Take(pageSize).ToList();

        return new JsonResult { Data = new { List = list, currentPage = page, totalPage = totalPage }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

Step-10: Run Application.



Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.