リミットオフセットを使用してデータをロードすると、コントローラ機能がクラッシュし、AngularJSでデータが詰まる

Question

私はAngularJSを使用してYoutubeのようなビデオギャラリーアプリケーションを作成しました。 REST APIがあり、Angularサービスを介してREST URLを呼び出しています。 ここには2つのコントローラファイルがあり、それらはほとんど同じ機能を持っていますが、異なるURLを呼び出して異なる動画を取得します。

これはBoxsetCtrl.jsファイルで、すべてのBoxsetビデオ（カテゴリ名）を取得します。これは完全なコントローラファイルです。

angular.module（ 'data_visualize'） .controller（ 'BoxsetCtrl'、関数（$スコープ、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]); 
        } 
       }); 
      } 
     } 
    }); 

}); 

これはBoxsetsをロードするコントローラである。また、使用する別のコントローラがあります他のいくつかのシーンを取得します。ここでは、そのコントローラです。

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]); 
        } 
       }); 
      } 
     } 
    }); 

}); 

をこれらの2つの異なるビューを持っている二つのコントローラは、これらのビューがスクロールされている場合、データはページネーションとしてロードしています。です。ここではHTMLビューのサンプルHTMLコードです。データがありますロードィ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> 

しかし、ここでは、私は、彼らがロードされ、SceneCtrlを使用してシーンを見てんだけど、問題はボックスセットコントローラはまた、活性化したときにページをスクロール取得されている、これらのボックスセットの要求があまりにサーバーしようとしている問題で、です。だから、データをロードするのが本当に遅いです。これには何が問題なのですか？これを適切に機能させる方法はありますか？

シーンを使用しているときはSceneCtrlを有効にする必要があります。ボックスセットを使用している場合は、BoxsetCtrlを使用する必要があります。

ご提案は大歓迎です。

Answer 1

基本的に、簡単な方法は、ng-routeまたはui-routerのいずれかを使用することです。私は後者をお勧めします。このようにして、ビューとそのビューに関連付けられたコントローラを明確に記述することができます。また、 'ui-router'によって提供される他の先進機能を利用することもできます。例えば

はコードの下を見て：

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>