AngularJS code hangs browser

Question

I am calling a Web Service which returns around 3000 records as data entries as HTML response & i am trying to read this response using angularJS.

Below is my AngularJS code i am using to call the service

angular.module('tabApp', ['ngSanitize'])
  .controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
        $scope.tab = 0;

        $scope.setTab = function(newTab){
              $scope.tab = newTab;

            $scope.loading = true;
            HttpService.CallService('Service.php?id='+newTab,newTab, function (data) {
                             $scope.myText = data;
                             $('.count').show();
                             $("[id^=searchg]").show();
                             $('.results').show();
            });
        };


        $scope.isSet = function(tabNum){
          return $scope.tab === tabNum;

        };

        $scope.setTab1 = function(newTab1){
            $scope.tab = newTab1;
            $('.loaderImage').hide();
      };



        $scope.isSet1 = function(tabNum){
            return $scope.tab === tabNum;
          };
}])

.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) {
        $rootScope.loading = true;
        return {
            CallService: function (url,tabnum, callback) {                   
                $http({
                method: "POST",
                url: url,
                data: {id: tabnum}})
                    .success(function (data, status) {                            
                        $('.loaderImage').hide();
                        callback(data, status);
                    }).error(function (data, status) {
                    $('.loaderImage').hide();
                        callback(status);
                    });                 
            } 
        }
    }]);

My problem is the browser hangs if the returned records are more than 1500. Please advise on how i can improve this.

Update:

My html code looks like this

<div ng-show="isSet(1)">
        <div id=matches  style="display:none"></div>
        <input type=text id=searchg placeholder="Type to search..." style="display:none" />
          <p class="preload" ng-bind-html="myText"></p>
            </div>

add pagination to your client, and fetch 10 or 20 records from your api. Or you can lazy load, fetch 10 records when user scroll page. — Gitesh Purbia, Jan 09 '18 at 05:15
You may try to precede the binding with `::` to encourage one-way binding. This may help reducing the number of watchers, making your HTML faster. — 31piy, Jan 09 '18 at 05:16
@GiteshPurbia , Where do i need to add this pagination. Can you give me an example for this?.thanks — serverliving.com, Jan 09 '18 at 05:16
first you add skip and limit to your fetch query, where you send only 10 record at a time and then pass skip and limit in every call which you call at the every scroll. — Gitesh Purbia, Jan 09 '18 at 05:17
look at this example, you will get idea, https://sroze.github.io/ngInfiniteScroll/demo_basic.html — Gitesh Purbia, Jan 09 '18 at 05:19
@GiteshPurbia, The above example looks different from my case. In my case the webservice is returning all records at once. — serverliving.com, Jan 09 '18 at 05:21
yes, so in you select query add skip and limit, check this https://stackoverflow.com/questions/2827029/mysql-skip-first-10-results — Gitesh Purbia, Jan 09 '18 at 05:24
I tried the limit solution & it worked fine. I thought there may be a solution available in angularJS for this — serverliving.com, Jan 09 '18 at 05:26
Fetching 3000 records is going to take time no matter what your implementation is. It takes time at the database level, so why won't it take time at the application level? You must reduce the records fetched, or fetch in batches. — cst1992, Jan 09 '18 at 05:37

score 2 · Answer 1 · answered Jan 09 '18 at 05:56

As we can see it is the bulky data which you are trying to bind. In Future, it could be more bulky. You should use the server side pagination and get only the number of records, what your pagination is.

Here is the JSFiddle link for the reference.

http://jsfiddle.net/dwahlin/3Kewg/

Hope this helps! CHEERS TO CODE! :)

score 0 · Answer 2 · answered Jan 09 '18 at 06:26

As @Mohit Dixit suggested, you should prefer to do server side paging and request only active page records.

I would advise you to use smart table library for this. Here is the official website for same. They support paging(both server side and client side), filter and sorting in one go.

Please note that there are many library available for this purpose but I am suggesting this as I am using it from past few years.

AngularJS code hangs browser

2 Answers2