Imagine wanting to develop a ToDo list using angular. You have a REST API that stores items in a database and provides basic operations. As you strive to connect your angular app to the REST API, you come across two different approaches from various online tutorials:
1. Backend Data Handling: A service is created with a function called getAllTodos which is directly attached to the scope for use in ng-repeat:
var getAllTodos = function() {
//Todo: Cache http request
return $http...;
}
var addTodo = function(todo) {
//Todo: Clear cache of getAllTodos
$http...
}
2. Frontend Data Handling: An init function initializes the todo variable in the service.
var todos = [];
var init = function() {
$http...
todos = //result of $http;
};
var getAllTodos = function() {
return todos;
};
var addTodo = function(todo) {
$http...
todos.push(todo);
}
I have noticed both methods in various tutorials and I can't help but wonder which approach would be considered the best. The first method is commonly used when authors initially intend to connect to a REST API from the start. On the other hand, the second method is often chosen by those who focus on building frontend functionality before incorporating backend storage later on.
Each approach has its own set of advantages and disadvantages. The first method reduces code duplication between frontend and backend, while the second method allows for faster operations since changes can be handled in the frontend initially before informing the backend afterwards.
//EDIT: In my context, the frontend refers to an Angular.JS client, and the backend consists of the REST API on the server.