angularjs get an error of injector

Question

hello i am new in angular and i am trying to build a simple program but i get an error.

Controller:

angular.module('myApp', []).controller('myCtrl', function ($scope ,HandleService) {

    $scope.AddCar = function () {

        HandleService.GetAll().then(function (result) {
            alert(result);
        });
    }

});

Service

angular.module('MyService', []).factory('HandleService',  function () {

    return {

        GetAll: function(){


            return "bbb";
        }
    };

});

index.html

<script src="libs/angular/angular.js"></script>
<script src='app.js'></script>

<div ng-app="myApp" ng-controller="myCtrl">


    <button ng-click="AddCar()" >Save</button>




</div>

i am trying to this in angular and i get an error of:

"angular.js:9778 Error: [$injector:unpr] Unknown provider: HandleServiceProvider <- HandleService http://errors.angularjs.org/1.2.16/$injector/unpr?p0=HandleServiceProvider%20%3C-%20HandleService at angular.js:78 at angular.js:3705 at Object.getService [as get] (angular.js:3832) at angular.js:3710 at getService (angular.js:3832) at invoke (angular.js:3859) at Object.instantiate (angular.js:3880) at angular.js:7134 at angular.js:6538 at forEach (angular.js:330)"

Answer 1

Your service lives in a separate universe. You need to declare dependency on MyService module from your myApp module.

angular.module('myApp', ['MyService']).controller('myCtrl', function ($scope, HandleService) {
    $scope.AddCar = function () {
        var result = HandleService.GetAll();
        console.log(result);
    }
});


angular.module('MyService', []).factory('HandleService', function () {
    return {
        GetAll: function () {
            return "bbb";
        }
    };
});

Answer 2

The error is because you are creating 3 different module. Either Inject one module to another module or just go with on module.

1. Inject service module to myApp module.

   angular.module('myApp', ['MyService']

2. Or,

   angular.module('myApp', []).controller('myCtrl', function ($scope ,HandleService) {
   
      $scope.AddCar = function () {
   
           HandleService.GetAll().then(function (result) {
               alert(result);
           });
      }
   
   });
   
   
   angular.module("myApp").factory('HandleService',  function () {
   
     return {
   
         GetAll: function(){
   
   
             return "bbb";
         }
     };
   
   });