CODEWITHSUNDEEP
javascriptangularjshtml
serverliving.com
serverliving.com

Reputation: 457

AngularJS code hangs browser

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>

Upvotes: 0

Views: 583

Answers (2)

J-D
J-D

Reputation: 1575

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.

Upvotes: 0

Mohit Dixit
Mohit Dixit

Reputation: 329

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! :)

Upvotes: 2

Related Questions