The optimal approach for AngularJS services and promises

I have a unique setup in my AngularJS application where I utilize services to make API calls using $http and handle promises in my controllers. Here's an example of my current approach:

app.service('Blog', function($http, $q) {
  var deferred = $q.defer();
  $http.get('http://blog.com/sampleblog')
    .then(function(res) {
        // perform data manipulation
      return deferred.resolve(res.data);
    }, function(err) {
        // handle error messages
      return deferred.reject(err);
    });
    // chain additional HTTP calls if needed
  return deferred.promise;
});

However, there is an alternative method that simplifies the process like this:

app.service('Blog', function($http) {
  return $http.get('http://blog.com/sampleblog');
});

This allows for validation, error handling, promise chaining, etc. to be done at the controller level. Now I'm wondering: What is considered the 'best practice' for ensuring code resilience and flexibility in this scenario? Or is there a completely different approach that could be better?

Answer №1

According to the principles of MVC, it is the controller's responsibility to determine how to handle a promise.

The service should be the one to initiate the promise.

app.service('Blog', function($http) {
  return $http.get('http://blog.com/sampleblog');
});

Then, it is up to the controller to decide what actions to take once the promise is resolved.

$scope.response = Blog;

$scope.response.then(function(response) {
    DataProcessor.processData(response.data)
})
.error(function(error){
    ErrorHandler.handle(error);
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement Material UI TextField to ensure all required fields are properly formatted

Looking to customize the underline border color of TextFields marked as mandatory within a form using react-hooks-form. I understand that I need to define a style for these fields, but I'm struggling with where to start... This is the current code s ...

The default choice vanishes once a non-empty option is chosen

Here is a simple example illustrating my issue: JSFiddle. Initially, I have an empty/default option, but when I select something else from the drop-down, this default option disappears. How can I keep this default option visible after making a selection? ...

Displaying elapsed time in JavaScript (Node.js)

Looking for a way to convert a date time or time-stamp format like 2015-12-18 07:10:54 into a relative time, such as "2 hours ago." I attempted the code provided, but it seems to consistently show an incorrect estimation of "8 days ago." function convert ...

Transferring variables from parent scope to the ui-view component

I'm currently utilizing angular-ui/ui-router and have directives/components with isolate scope declared for rendering on state change. $stateProvider .state('about', { url: '/about', template: '<about>&l ...

Using NextJs to track the position of a scrollbar

Incorporating NextJs for Server Side Rendering has been a game-changer for me. I've also implemented a navbar in my application that needs to adjust styles based on the scroll position. Is there a way to determine if the window has scrolled beyond 100 ...

Attempting to rename the "like" button in Django Ajax, however encountering difficulties

My button is currently functioning, but it's embedded within a Django for loop. I want to move the JavaScript logic to a separate file, but before that, I need to rename it appropriately. Check out this excerpt from my code: {% for post in posts %} ...

Automatically calculate the multiplication of a number by 10 in React JS within the State

In this scenario, I am looking for assistance in creating a functionality where the user can adjust numbers in an input box and see the result of that number multiplied by 10 in a nearby span element. However, I am encountering issues with fetching the des ...

Troubleshooting the issue of setting an Array as the scope in AngularJS and encountering

I'm currently utilizing AngularJS. Check out the Fiddle var myArray = [{firstName: 'Jane', lastName: 'Doe', age:29}, {firstName: 'John', lastName: 'Doe', age: 32}]; This is an example of HTML: <body ng-ap ...

What is the best method for distributing this array object?

I am faced with the task of spreading the following object: const info = [{ name: 'John', address: 'america', gender: 'Male', job: 'SE' }]; I want to spread this array object and achieve the following format: form:{ ...

Error in AJAX transmission

I am encountering an unusual issue with the jQuery ajax function in my script. The problem is specific to my friend's computer, as I am not experiencing any difficulties on my own computer. While attempting to utilize the error function property to ...

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

How to Handle CRUD Errors in NodeJS using Mongoose and Return a Custom Response to the Client

Setup NodeJS 10 MongoDB Client side app : Angular 9 About In my NodeJS application, I have a controller and service that work together to create an entity and return a promise. Here's how it looks: Controller async create(@Body() entityData: an ...

I am experiencing an issue where localhost is not displaying the JSON output for the Router and controller that I have

Recently delving into the world of NodeJS, I find myself facing a roadblock. While attempting to manage requests, my localhost appears to be endlessly loading or throwing an error. Error: cannot GET/ I aim to showcase the JSON data on my local site. Wh ...

Angular: promptly exit out of ngClick event handler

I have a selection menu on my webpage that is essentially an unordered list, with each item in the menu formatted like this: <li ng-click='doCalc(5)'>Five</li> The doCalc function that is triggered by clicking on these items may tak ...

Having difficulties creating an array due to identical id tags causing HTML to break in JavaScript

I've been grappling with this issue all day. Before delving into dynamic solutions, I'd like to create multiple divs with unique id tags or classnames rather than repeating ids. Whichever option proves simpler would be greatly appreciated. Curren ...

Using jQuery to strip inline styling from copied webpage content

When I copy content/paragraph from Wikipedia and try to paste it as code on my webpage dynamically, it ends up with a lot of inline styles. I want the code to be clean and properly formatted in HTML. I have tried several methods, but they remove all the ta ...

Unable to pass parameters using ViewBag in jQuery within a partial view

Currently, I am in the process of building an MVC3 application with razor syntax. My focus right now is on developing the partial class that will be responsible for handling comments. This is a snippet of my code: <script src="../../Scripts/jquery.js" ...

Is there a way to use JavaScript to import several custom fonts at once?

Is there a way to import a long list of custom fonts as icons using Javascript? I have been obtaining the font list from an API, but importing them one by one with pure CSS using @font-face is time-consuming and difficult to maintain. @font-face { fon ...

Bizarre Actions of a JavaScript Object

Currently, I am in the process of developing a Multiplayer game using Phaser and Eureca io. My main focus right now is on perfecting the authentication of players and their controls. To achieve this, I have implemented a method on the server that retrieves ...

What is the best way to retrieve the chosen option when clicking or changing using jQuery?

CSS <form name='category_filter' action='/jobseek/search_jobs/' method='get'> <select id="id_category" class="" name="category"> <option value="" selected="selected">All</option> <option v ...