CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangular-servicesangularjs-factory
Jack Slingerland
Jack Slingerland

Reputation: 2801

Service will not inject into controller

I've made a handful of Angular applications in the past, but have never really made use of modules. I'm creating an Ionic app right now (which uses Angular) and for some reason I cannot get my services to inject into the controllers.

controllers.js

angular.module('myapp.controllers', [])
.controller('StreamCtrl', ['$scope', 'StreamService',
function($scope, StreamService) {
    $scope.playlists = [1,2,3,4];
}]);

services.js

angular.module('myapp.services', [])
.factory('StreamService', ['$scope', function($scope) {
    var self = {
        'fetching' : false,
        'streamItems' : []
    };
    return self;
]);

app.js

angular.module('myapp', ['ionic',
                        'myapp.services',
                        'myapp.controllers',
                        'ngCordova',
                        'LocalStorageModule'])
// And lots of other code that isn't needed for this question.

So when I try and load the StreamCtrl I end up getting the following error:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <-StreamService
http://errors.angularjs.org/1.3.6/$injector/unpr?p0=<ion-nav-view name="menuContent" class="view-container" nav-view-transition="ios">copeProvider%20%3C-%20%24scope%20%3C-%20StreamService
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7888:12)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11806:19
at Object.getService [as get] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11953:39)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11811:45
at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11953:39)
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11985:13)
at Object.enforcedReturnValue [as $get] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11847:37)
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11812:37
at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11953:39)

Upvotes: 3

Views: 2981

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

Your error clearly says there is problem inside StreamService factory.

You could never inject $scope inside factory. Removing $scope dependency will solve your issue.

Factory basically used to expose singleton methods, common and sharable data. Usually we write any service call or method which can be accessible by any module who inject it using its dependancy.

Factory

angular.module('myapp.services', [])
.factory('StreamService', [function() {
    var self = {
        'fetching': false,
        'streamItems': []
    };
    return self;
}]);

Working fiddle.

Hope this could help you. Thanks.

Upvotes: 2

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

See this working fiddle ,

You are treating service as if it was a controller, never inject a $scope into service, its not there

var myApp = angular.module('myApp',['myapp.services','myapp.controllers']);

angular.module('myapp.controllers', [])
.controller('StreamCtrl', ['$scope', 'StreamService',
function($scope, StreamService) {
    $scope.playlists = [1,2,3,4];
}]);

angular.module('myapp.services', []).factory('StreamService',  function() {
    var self = {
        'fetching' : false,
        'streamItems' : []
    };
    return self;}
);

Upvotes: 5

Related Questions