When loading data using limit offset, controller functions going to crash and data is jammed in AngularJS

316
February 21, 2017, at 11:20 PM

I created a video gallery application like Youtube using AngularJS. There's a REST API and I am calling that REST URLs via Angular services. Here's are two controller files and they have most probably same functionality, but calling different URL to get different videos.

This is BoxsetCtrl.js file and it get all the Boxset videos(a category name). This is the full controller file.

angular.module('data_visualize') .controller('BoxsetCtrl', function ($scope, boxsetService) {

    $('html,body').scrollTop(0);
    $scope.allBoxsets = [];
    $scope.count2 = parseInt(0);
    $scope.scene = {
        sort2: "most_recent"
    };
    /**
     * Loading all the box sets with limit and offset.
     */
    boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
        $scope.allBoxsets = data;
    });
    $scope.getSceneSortByValue = function () {
        $scope.count2 = parseInt(0);
        $scope.sort2Value = $scope.scene.sort2;
        console.log($scope.scene.sort2);
        if ($scope.sort2Value == 'most_recent') {
            boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
                $scope.allBoxsets = data;
            });
        } else if ($scope.sort2Value == 'popularity') {
            boxsetService.viewAllBoxSetsByPopularity(0).then(function (data) {
                $scope.allBoxsets = data;
            });
        } else if ($scope.sort2Value == 'name') {
            boxsetService.viewAllBoxSetsByName(0).then(function (data) {
                $scope.allBoxsets = data;
            });
        } else if ($scope.sort2Value == 'number_of_scenes') {
            boxsetService.viewAllBoxSetsByScenes(0).then(function (data) {
                $scope.allBoxsets = data;
            });
        } else {
            boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
                $scope.allBoxsets = data;
            });
        }
    };
    $scope.getSelectedLetter = function (letter) {
        $scope.count2 = parseInt(0);
        $scope.scene.sort2 = "by_letter";
        $scope.selectedLetter = letter;
        console.log($scope.selectedLetter);
        boxsetService.viewAllBoxSetsByLetter(letter, 0).then(function (data) {
            $scope.allBoxsets = data;
        });
    };
    $scope.resetLetterFilter = function () {
        $scope.scene.sort2 = 'most_recent';
        boxsetService.viewAllBoxSetsByDate(0).then(function (data) {
            $scope.allBoxsets = data;
        });
    };
    $scope.loadByNumbers = function () {
        $scope.scene.sort2 = 'by_numbers';
        boxsetService.viewAllBoxSetsByNumber(0).then(function (data) {
            $scope.allBoxsets = data;
        });
    };
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - scrollZise) {
            $scope.count2 = $scope.count2 + 8;
            console.log("New count box set : ", $scope.count2);
            if ($scope.scene.sort2 == 'most_recent') {
                boxsetService.viewAllBoxSetsByDate($scope.count2).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allBoxsets.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort2 == 'popularity') {
                boxsetService.viewAllBoxSetsByPopularity($scope.count2).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allBoxsets.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort2 == 'name') {
                boxsetService.viewAllBoxSetsByName($scope.count2).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allBoxsets.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort2 == 'number_of_scenes') {
                boxsetService.viewAllBoxSetsByScenes($scope.count2).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allBoxsets.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort2 == 'by_letter') {
                boxsetService.viewAllBoxSetsByLetter($scope.selectedLetter, $scope.count2).then(function (data) {
                    console.log("Sekected letter : ", $scope.selectedLetter);
                    for (var i = 0; i < data.length; i++) {
                        $scope.allBoxsets.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort2 == 'by_numbers') {
                boxsetService.viewAllBoxSetsByNumber($scope.count2).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allBoxsets.push(data[i]);
                    }
                });
            }
        }
    });
});

This is a controller which loading Boxsets. And also there's another controller which uses to get some other scenes. Here's that controller.

angular.module('data_visualize')
.controller('SceneCtrl', function ($scope, sceneService) {
    $('html,body').scrollTop(0);
    /**
     * Initializing and defining all the
     * arrays and variables.
     * @type {Array}
     */
    $scope.allScenes = [];
    $scope.count = parseInt(0);
    $scope.scene = {
        sort: "most_recent"
    };
    /**
     * Loading all the scenes with limit and offset.
     * Default page load invoke method for data set.
     */
    sceneService.viewAllScenesByDate(0).then(function (data) {
        $scope.allScenes = data;
    });
    $scope.getVideosByLetter = function (event) {
        console.log("Filter : ", $scope.filter);
        if ($scope.filter == "" || $scope.filter == null) {
            sceneService.viewAllScenesByDate(0).then(function (data) {
                $scope.allScenes = data;
            });
        } else {
            $scope.scene = {
                sort: "by_letter"
            };
            sceneService.viewAllScenesByLetter($scope.filter, 0).then(function (data) {
                $scope.allScenes = data;
                console.log(data);
            });
        }
    };
    /**
     * Get drop down value and send to server
     * in order to get the response.
     */
    $scope.getSceneSortByValue = function () {
        $scope.count = parseInt(0);
        $scope.sortValue = $scope.scene.sort;
        console.log($scope.sortValue);
        if ($scope.sortValue == 'most_recent') {
            sceneService.viewAllScenesByDate(0).then(function (data) {
                $scope.allScenes = data;
            });
        } else if ($scope.sortValue == 'popularity') {
            sceneService.viewAllScenesByPopularity(0).then(function (data) {
                $scope.allScenes = data;
            });
        } else if ($scope.sortValue == 'name') {
            sceneService.viewAllScenesByName(0).then(function (data) {
                $scope.allScenes = data;
            });
        } else {
            sceneService.viewAllScenesByDate(0).then(function (data) {
                $scope.allScenes = data;
            });
        }
    };
    /**
     * Detect window scroll and send request
     * to sever to get the real time pagination.
     */
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - scrollZise) {
            $scope.count = $scope.count + 8;
            console.log("NEW Count scene: ", $scope.count);
            if ($scope.scene.sort == 'most_recent') {
                sceneService.viewAllScenesByDate($scope.count).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allScenes.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort == 'popularity') {
                sceneService.viewAllScenesByPopularity($scope.count).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allScenes.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort == 'name') {
                sceneService.viewAllScenesByName($scope.count).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allScenes.push(data[i]);
                    }
                });
            } else if ($scope.scene.sort == 'by_letter') {
                sceneService.viewAllScenesByLetter($scope.filter, $scope.count).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $scope.allScenes.push(data[i]);
                    }
                });
            }
        }
    });
});

These are two controllers which has two different views. When those views are scrolling, data is loading as Pagination. Here's a sample HTML code of HTML view. Data is loading with ng-repeat.

<div ng-repeat="data in allBoxsets">
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a class="thumbnail" href="#/boxset/{{data.seriesid}}">
            <img class="img-responsive" src="lib/images/banner_selection/films/gallery/{{data.imagepath}}"
                 alt="">
            <div class="row">
                <div class="col-lg-12">
                    {{data.seriesname}}
                </div>
                <div class="col-lg-12">
                    Views : {{data.views}}
                </div>
                <div class="col-lg-12">
                    Scenes : {{data.scenes}}
                </div>
            </div>
        </a>
    </div>
</div>

But here's the problem, when I'm viewing Scenes using SceneCtrl, they are loading, but the problem is Boxset controller is also getting activated and when the page scrolls, those boxset requests are going to the server too. So it's really slow to load data. What's the problem for this? Is there any way to make this working properly.

When I'm using Scenes, I only need to activate SceneCtrl and when I'm using Boxsets, I only need to use BoxsetCtrl.

Any suggestions are welcome.

Answer 1

Basically, the easy way for you is to make use of either ng-route or ui-router. I suggest the latter one. This way you can clearly mention the view and the controller associated with that view, you can also make use of other advance features which are provided by the 'ui-router'.

For example look at below code:

angular.module('app', ['ui.router']) 
  .config(function($stateProvider, $urlRouterProvider) { 
 
    // State definitions 
    $stateProvider 
      .state('homeState', { 
        url: '/home', 
        template: '<div> {{ title }} ' + 
          '<button data-ng-click="gotoState(\'homeState.stateA\')" >GoTo A</button>' + 
          '<button data-ng-click="gotoState(\'homeState.stateB\')" >GoTo B</button>' + 
          '<div ui-view><div>' + 
          '</div>', 
        controller: 'HomeController' 
      }) 
 
      .state('homeState.stateA', { 
        url: '/stateA', 
        template: '<div> {{ data }} </div>', 
        controller: 'StateAController' 
      }) 
 
      .state('homeState.stateB', { 
        url: '/stateB', 
        template: '<div> {{ data }} </div>', 
        controller: 'StateBController' 
      }); 
 
    // Default to stateA 
    $urlRouterProvider.otherwise('/home'); 
  }) 
  .controller('HomeController', function($scope, $state) { 
    // homeState data 
    $scope.title = 'State example'; 
 
    $scope.gotoState = function(stateName) { 
      $state.go(stateName); 
    }; 
  }) 
  .controller('StateAController', function($scope) { 
    // StateA data 
    $scope.data = 'Hi State A'; 
  }) 
  .controller('StateBController', function($scope) { 
    // StateB data 
    $scope.data = 'Hi State B'; 
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 
 
<div data-ng-app="app"> 
 
  <!-- This is the ui-view, marks the area where the content should        be rendered --> 
  <div ui-view></div> 
</div>

Rent Charter Buses Company
READ ALSO
Get the last two positions of an array [duplicate]

Get the last two positions of an array [duplicate]

This question already has an answer here:

423
Dockable Components in Web Application

Dockable Components in Web Application

Is it possible to create dock-able widgets in Web application? Where dock-able widget can be moved out of the window and placed in extended display, and it remain in sync with application state

350
How to show vertical TEXT using plotly js?

How to show vertical TEXT using plotly js?

Using plotly, how can I show this text vertically?

714
Safest online tool for minifiying Javascript [on hold]

Safest online tool for minifiying Javascript [on hold]

I can see that there are a lot of websites that offer to minify your javascriptBut I wanted to ask the community which one feels the safest to use

435