AngularJS从服务器加载数据

时间:2014-11-19 17:34:29

标签: angularjs angularjs-ng-repeat angularjs-service

我有以下场景,一个页面将显示具有不同数据的不同小部件,后端是带有SQL Server的ASp.NET Web API 2和EF +存储库模式+工作单元。

如果我必须在小部件信息的基础上显示相当多的数据,包括用户个人资料和其他信息,您会推荐什么:

  • 制作一个大的$ http.get请求,它将返回一个大的json并将其绑定到UI

  • 每个控制器(服务)在加载时都会对后端进行独特的调用并得到它需要显示的数据,这意味着每个小部件都会调用后端并检索它的值。

我只是想知道你推荐什么作为最佳做法。

enter image description here

3 个答案:

答案 0 :(得分:1)

恕我直言,最好的方法是将每个请求分成单个服务方法,这样您只能重用其中的一部分,而不是让服务器调用加载到整个数据,检查角度资源$resource是否有清理服务器调用的可重用服务,而不是代码中的一堆$ https:

例如: 指向后端服务器的某个URL的服务

.factory('ClientService', ['$resource', function($resource){
        return $resource('http://some_url/:controller/:method', null, {
            "agents": { method: 'GET', params: { controller: 'agent', method: 'search' }, cache: false },
            "query": { method: 'GET', params: { controller: 'client', method: 'search' }, cache: false },
            "save": { method: 'POST', params: { controller: 'client', method: 'save' } },
            "delete": { method: 'POST', params: { controller: 'client', method: 'delete' } }
        })
}])

在控制器中的使用(注入ClientService作为依赖)

// If i want to query the agents into a scope element
// that will call the url = http://some_url/agent/search
$scope.agents = ClientService.agents(); 
// If i want to query a single client i cant send adtional params
// as is a get request it will call http://some_url/client/search?id=5
$scope.client = ClientService.query({id:5});
// and you can event manage callbacks if you want to
// This will send the client object to the url = http://some_url/client/save
ClientService.save($scope.client).$promise.then(function(response){ alert(response) })

正如你可以看到的那样,你可以从后端服务器访问你需要的东西,如果你不需要以一种可重复使用的清洁方式而不需要做所有的回调响应

信息Angular Resource Docs

答案 1 :(得分:0)

我认为这取决于......

如果性能可能有问题,您应该考虑什么对您的用户最有利...... 4个HTTP请求的开销是否会影响用户体验?另外,一个大的请求会花费太多时间从数据库中检索信息吗?

但是,如果您只想使用开发人员对该问题的看法,我更喜欢进行1次通用API调用,然后在Angular中调用它4次,每个Widget使用不同的参数。

答案 2 :(得分:0)

提出4个请求实际上可能会更快。更不用说数据可以在回来时开始在屏幕上填充,而不是需要等待最慢的服务。

对于并发AJAX reque的最大数量http://www.coderanch.com/t/631345/blogs/Maximum-concurrent-connection-domain-browsers