Question

我目前是PHP和AngularJS的新手（尽管我的主要关注点是AngularJS），无论如何我选择了一个我在网上找到的开源音乐项目（使用Codeigniter），仅用于学习目的。该项目基本上设置为让用户注册，上传音乐，然后将其显示在他们的个人资料中，以及可以浏览每个人音乐的部分。

所以我使用项目附带的API库从这个项目构建/构建了一个angularJS应用程序。我几乎把一切都搞定了，加载用户信息，在所有正确的视图中显示/播放音乐等等。

基于AngularJS的APP只有一个问题，我一直在努力寻找解决方案。用于检索＆＃34;发现＆＃34;的每个人音乐的API section，从数据库发送所有。起初我没有注意到这个问题，因为我只注册了两个虚构用户，总共有20首歌曲，因此发现部分没有花费很长时间来加载。但是经过进一步的测试，我决定复制更多用户，总共500个用户和总共1000首歌曲。这是我注意到加载时间的巨大差异。

所以基本上我的问题是推荐的处理方法是什么？ AngularJS中是否有办法限制它一次读取的数据量？（例如，最初只加载20首歌曲，然后在点击＆＃34后加载20首歌曲;查看更多＆＃34;）或者这是应该由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....
});

感谢您的回复，如果我的问题到处都是，我会提前道歉。祝你有美好的一天！

Answer 1

当数据很大时，需要从服务器中分页数据。然后，客户端需要在每页的基础上请求数据。

在Angular端，您可以显示寻呼机，以防您使用网格或使用infinite scoll plugin之类的内容，当数据滚动到视图中时会加载数据。

Answer 2

我想通了，感谢@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);
}

我创建了一个控制器，它有一个调用api的“discovery”服务，然后在控制器内部我有另一个名为“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




});


};

处理来自Codeigniter Restful API的AngularJS中的大量数据？

2 个答案: