prasadmsvs prasadmsvs - 5 months ago 28
AngularJS Question

angularjs shows injector error even though all dependencies are mentioned

I am new angular. I am writing a simple angular application. I have created a module and a controller for that module and a factory. I added the dependencies to the controller but, I am getting an injector error. I just don't understand where I am going wrong.

This is my angular code :

var app = angular.module("bookApp",[]);
app.config(['$interpolateProvider',function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
}]);;app.controller("mainController",["$scope", "$http", "titles",function($scope, $http, titles){
$scope.titles = [{}];
titles.getTitles();
}]);
app.factory("titles",["$scope","$http",function($scope, $http){
var getTitles = function(){
$http.get("http://localhost:8000/getTitles")
.then(function(response) {
$scope.titles = response.data;
});
}

var addTitle = function(){
var data = $.param({
json: JSON.stringify({
title: $scope.book.bookname
})
});
$http.post("http://localhost:8000/addTitle",data).success(function(response, status){
$scope.titles = response.data;
});
}
return{
getTitles: getTitles
}

}]);


My html:

<body ng-app="bookApp">
<div class="container">
<div>
<table id="recordTable" ng-controller="mainController">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="title in titles">
<td>{[{title.id}]}</td>
<td>{[{title.bookname}]}</td>
</tr>
</tbody>
</table>
</div>

</div>
</body>


I get the following error:

http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20titles


I don't understand the problem here. The "titles" service is there but it still gives injector error.

Answer

Basically you had injected $scope inside a factory, which isn't available to inject inside a factory. You have to remove to the $scope dependency from the factory Dependency array an factory code.

If you look at the definition of factory/service, they are sigletone object which are applicable throughout the application to provide common functionality between different components of angular application.

You should remove the scope from factory thoroughly like below, and the major change I made in factory is returned promise object of $http.get method.

Factory

app.factory("titles",["$scope","$http",function($scope, $http){
    var getTitles = function(){
        return $http.get("http://localhost:8000/getTitles")
        .then(function(response) {
            return response.data;
        });
    }

    var addTitle = function(book){
        var data = $.param({
            json: JSON.stringify({
                title: book.bookname
            })
        });
        return $http.post("http://localhost:8000/addTitle",data).success(function(response, status){
            return response.data;
        });
    }
    return{
        getTitles: getTitles,
        addTitle: addTitle
    }

}]);

Controller

app.controller("mainController",["$scope", "$http","titles",
   function($scope, $http, titles){
     //$scope.titles = [{}];
     titles.getTitles().then(function(data){
        $scope.titles = data;
     });
   }
]);
Comments