CODEWITHSUNDEEP
javascriptangularjs
simbada
simbada

Reputation: 980

error when injecting service in controller

I am trying to consume Web API using AngularJs but getting struck angular side which is hard for me to figure out.

I created HTML, controller and service. Everything seems ok to me but when running the app i get the injection error.

html
<html >
<head>
    <title>Motors </title>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/View/motorController.js"></script>
</head>
<body ng-app="myApp" ng-controller="motorController">
    <div>
        <table class="table">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tr ng-repeat="m in motors">
                <td>{{m.Id}}</td>
                <td>{{m.Name}}</td>
                <td>{{m.Country}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

AngularJs controller

var module = angular.module('myApp', [])
    .controller('motorController', ['$scope', '$motorService',function ($scope, motorService) {

    getMotors();
    function getMotors() {
        motorService.GetAllMotors()
            .success(function (motors) {
                $scope.motors = motors;
            })
            .error(function (error) {
                $scope.status = 'Unable to load motor data: ' + error.message;
            });
    }
}]);

angular service

motorApp.factory('motorService', function ($http) {
    var urlBase = 'http://localhost:40738/api';
    var motorService = {};

    motorService.GetAllMotors = function () {
        return $http.get(urlBase + '/GetAllMotors');
    };

    return motorService;
});

Error i am getting on chrmoe browser console

Error: [$injector:unpr] Unknown provider: $motorServiceProvider <- $motorService <- motorController

Upvotes: 1

Views: 666

Answers (2)

sahil gupta
sahil gupta

Reputation: 2349

The problem with your code is that the factory is given a different module name "motorApp" instead of module name "module".

Use 

module.factory('motorService', function ($http) { //change here 
    var urlBase = 'http://localhost:40738/api';
    var motorService = {};

    motorService.GetAllMotors = function () {
        return $http.get(urlBase + '/GetAllMotors');
    };

    return motorService;
});

Also in your controller you should remove the "$" from injected service name "motorService"

var module = angular.module('myApp', [])
    .controller('motorController', ['$scope', 'motorService',function ($scope, motorService) {

    getMotors();
    function getMotors() {
        motorService.GetAllMotors()
            .success(function (motors) {
                $scope.motors = motors;
            })
            .error(function (error) {
                $scope.status = 'Unable to load motor data: ' + error.message;
            });
    }
}]);

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

You have a extra $ infront of MotorService, change

From:

 .controller('motorController', ['$scope', '$motorService',function ($scope, motorService)

To:

 .controller('motorController', ['$scope', 'motorService',function ($scope, motorService)

Upvotes: 3

Related Questions