Loading data from AngularJS server
I have the following scenario - a page that will display different widgets with different data, and for the second one - ASp.NET Web API 2 with SQL Server and EF + Repository Pattern + Unit of Work.
If I need to show quite some data, including user profile and other information on top of the widget information, what would you recommend:
- make one big request $ http.get which will return big json and bind it to the UI
or
- each controller (service), when loaded, will make it a unique call for internal use and will receive the data it needs to display, which means that each widget will make a call to complete and get its values.
I just want to know what you recommend as best practice.
source to share
IMHO the best way is to split each request into separate service methods in such a way that you can only reuse a part of it and not force the server requests to load the whole data, check the angular-resource $resource
for a clean reusable server call service, not a bunch of $ https around your code:
Example: Service that specifies some URL of your backend server
.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' } }
})
}])
Using in a controller (Injecting ClientService
as a dependency)
// 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) })
As you can see this way, you can only access the things you want from the backend server, which doesn't have to execute the whole callback response unless you need and in a reusable way
Angular Information Resource Docs
source to share
I guess it depends ...
If performance might be an issue, you should consider what is best for your user ... Will the overhead of making 4 HTTP requests affect the user experience? Also, would one big query take too long to retrieve information from the database?
However, if you just want to use the developer's perspective of the problem, I would rather make 1 generic API call and then call it 4 times in Angular with different parameters for each widget.
source to share
Probably 4 queries will be faster. Not to mention, data might start filling up on the screen when it comes back, instead of waiting for the slowest service.
Maximum concurrent AJAX requests http://www.coderanch.com/t/631345/blogs/Maximum-concurrent-connection-domain-browsers
source to share