AngularJS HTTP Get Scope

Question

I'm new to AngularJS and I'm trying to modify this code to wrap my head around the conventions:

https://github.com/flatlogic/angular-material-dashboard/blob/master/src/app/components/services/MessagesService.js

I'm modifying it to use a REST service to fetch messages instead of using the messages array.

Here's the MessageService code:

(function(){
  'use strict';

  angular.module('app')
        .service('messagesService', [
        '$scope', '$http',
        messagesService
  ]);

  function messagesService($scope,$http){
    return {
      loadAllItems : function() {
        //return $q.when(messages);
        return $http({
            method: 'GET',
            url: 'http://localhost:3000/messages',
        })
                .then(function(data) {
                    console.log(data);
                    return data;
                })
      }
    };
  }


})();

But I'm getting an error about the scope:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- messagesService

matt · Accepted Answer · 2017-02-12 02:18:59Z

As Matthew Cawley said, services cannot access scope. Nor can you return data from loadAllItems() the way you are.

This is probably what you want with a controller example:

(function() {
  'use strict';

  var app = angular.module('app');

  app.service('messagesService', ['$http', messagesService]);

  function messagesService($http) {
    return {
      loadAllItems: function() {
        //This will make the get request and return the promise that $http sends back.
        return $http({
          method: 'GET',
          url: 'http://localhost:3000/messages',
        });
      }
    };
  };

  app.controller('testCtrl', ['$scope', "messagesService", function($scope, messagesService) {
    //Onload
    messagesService.loadAllItems().then(function(data) {
      console.log(data); //Your data from the messageService
    }, function(err) {
      console.log(err); //Error from the messageService
    });
  }]);


}());

$http returns a promise that can be accessed in your controller. You can then set your variable in scope and make the data accessible to the view.

Ex:

$scope.items = data; within testCtrl.

Matthew Cawley · Accepted Answer · 2017-02-12 02:09:27Z

0

Take all of your references to $scope out, you can't inject scope into a service.

answered Feb 12, 2017 at 2:09

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS HTTP Get Scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related