CODEWITHSUNDEEP
javascriptangularjsangularjs-factory
prasadmsvs
prasadmsvs

Reputation: 1739

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.

Upvotes: 2

Views: 531

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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",["$http",function($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;
     });
   }
]);

Upvotes: 1

Related Questions