ASP.Net MVC Infinite Scrolling With Angularjs

Today we are going to implement infinite/unlimited scrolling using AngularJS in MVC application.

Infinite/unlimited scroll worked while we scroll down the web page it’ll automatically load next paged data. Facebook has this type of News feed loading.

Let’s Get Started:

Let’s create a view with directive ‘when-scrolled’. AngularJS ‘when-scrolled’ directive is to implement infinite scrolling, which is suppose to detect the div scroll.

Here ‘loadData(1)’ callback function will get called while div/page is scrolled. In this method we have passed parameter value ‘1’ to detect, is it default data load or scroll load call.

This is where we passed the parameter in our ngController method.

Finally the View:

We have declare directive ‘when-scrolled’ in our view, now we have to add directive in our module. In this app which is:

The directive: This will detect the scroll position of page/div.

In out controller method we have pushed data into the array in scope to update the view.

As we know AngularJS will update the view when scope is changed/update.

Finally the Script:

Output:

sc

Happy Coding 🙂

7 Replies to “ASP.Net MVC Infinite Scrolling With Angularjs”

  1. Hi,I check your blogs named “ASP.Net MVC Infinite Scrolling With Angularjs | SHASHANGKA SHEKHAR’S BLOG” like every week.Your humoristic style is witty, keep up the good work! And you can look our website about free love spells cast for me.

Leave a Reply to VINAY GUPTA Cancel reply

Your email address will not be published. Required fields are marked *