在來自Codeigniter Restful API的AngularJS中處理大量數據？

我目前是PHP和AngularJS的新手（儘管我的主要焦點是AngularJS），反正我選擇了一個我在網上找到的開源音樂項目（使用Codeigniter），僅用於學習目的。該項目基本上設置爲讓用戶註冊，上傳音樂，然後將其顯示在他們的個人資料中，以及可以瀏覽每個人的音樂的部分。在來自Codeigniter Restful API的AngularJS中處理大量數據？

因此，我使用項目附帶的API庫構建/構建了一個angularJS應用程序。我幾乎得到了一切工作，加載用戶信息，顯示/播放音樂的所有正確的意見，等等。

只有一個問題，基於AngularJS的APP，我一直在努力尋找解決方案。爲「發現」部分檢索每個人音樂的API將從數據庫發送所有音樂。起初我沒有注意到這個問題，因爲我只有兩個虛構的用戶註冊了，總共有20首歌，所以發現部分沒有花很長時間加載。但經過進一步的測試，我決定複製更多的用戶，總共有500個用戶和1000首歌曲。這是我注意到加載時間巨大差異的地方。

所以基本上我的問題是什麼將是處理這個建議的方法？ AngularJS有沒有辦法限制它一次讀入的數據量？（例如，最初只加載20首歌曲，然後單擊「查看更多」後再加載20首歌曲），還是應該由PHP處理？

這是在此項目中預定義的簡單API函數。

function discovery_get(){ 
    $result = $this->db->query("select * from user_songs ORDER BY song_views DESC")->result(); 
    $this->response($result, 200); 
}

範例片段API是如何調用：

$http.jsonp('http://myapi.dev/api/discovery/?callback=JSON_CALLBACK').then(function (data) { 
    $scope.discovery = data.data; 
    //console.log(data); 
    // some more code here.... 
});

謝謝你的任何反應，我提前如果我的問題是，所有的地方表示歉意。祝你有美好的一天！

來源

2014-04-21 user3555373

當數據量很大時，需要從服務器中分頁數據。然後，客戶端需要以每頁爲基礎請求數據。

在角度方面，如果您使用網格或使用類似infinite scoll plugin的數據滾動到視圖中時加載數據，您可以顯示傳呼。

來源

2014-04-21 06:09:18 Chandermani

感謝您對這篇文章更容易無限滾動！昨天晚上我的腦子想起來了，掀起了一些東西！ – user3555373

我明白了，感謝@Chandermani，他讓我的大腦思考了他的答案。

所以我修改了我的API來獲取參數（可能不是最好的方法，但是我是新手）這些參數是在angularjs裏面動態生成的。

function discover_get(){ 
    $offset = $this->get('offset'); 
    $songs =$this->get('songs'); 
    $artists = $this->db->query("select * from user_songs ORDER BY song_views LIMIT $offset, $songs")->result(); 

    $result = array(
     "test" => "awesome", 
     "artists" => $artists 
     ); 

    $this->response($result, 200); 
}

我創建了具有「discovery」服務，調用API，然後在控制器內我已呼籲其他功能的控制器「loadmore()」，這再次調用API，一個新的偏移方式的老數據不會重複。我也參加了Chandermani的進步和使用其稱之爲「loadmore()」這只是使得它比擁有一個ng-click

controllers.controller('DiscoverCtrl' , function ($scope, discovery, $http) { 
$scope.discover; 
var offset = 0; 
var songs = 2; 
discovery.list(offset, songs).then(function (data) { 
    $scope.discover = data.data; 
    console.log(data); 
}); 



$scope.loadmore = function() { 
offset += 2; 
discovery.list(offset, songs).then(function (data) { 
    console.log(data); 
$scope.discover.artists = $scope.discover.artists.concat(data.data.artists); 
//$scope.discover = data.data 




}); 


};

來源

2014-04-22 01:39:45 user3555373

在來自Codeigniter Restful API的AngularJS中處理大量數據？

回答

相關問題