How to create and use services in angular-boilerplate (AngularJS + RequireJS)

Question

In use angular-boilerplate project I can't figure it out how to create new service and call inside controllers. I've declared service app/services/first.js like this:

define(function (require) {
require("services/_module");

var angular = require("angular");
angular.module("App.services").service("AppFirstService", function ($scope) {

    return {
        sayHello: function() {
            return "Hello, World!"
        }
    };
});
});

add its requirement to _package.js file:

define(function (require) {
require("services/_module");
require("services/first");
});

and finally injected it to controller app/controllers/first.js:

define(function (require) { require("controllers/_module"); require("services/first");

var angular = require("angular");

angular.module("App.controllers").controller("AppFirstCtrl", ['$scope', 'AppFirstService', function ($scope) {

}]);
});

but got the error:

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

What is wrong with this?

Answer 1

You can't use $scope as service dependency:

angular.module("App.services").service("AppFirstService", function ($scope) {

$scope for controllers only.