Search code examples
angularjsservicedependency-injectioncontrollers

AngularJs, inject service in controller

I'm new on AngularJs. I have trouble injecting a service into a controller in AngularJS. I read many tutorials and topics on stackoverflow, but I can't fix my issues because the controller & service use the same module like this:

var myModule = angular.module("myModule", []);

myModule.service("myService", MyService);

myModule.controller("MyController", function($scope, myService) {
    myService.doIt();
});

My project works when the service & controller use the same module, but I want each one to use its own module because many controllers should use this service.

(I try to minimize the code)

index.html :

<!doctype html>
<html lang="en" ng-app="interfaceApp">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<head>
    <meta charset="utf-8">
    <title>Interface de consulation</title>
    <link rel="stylesheet" href="resources/css/bootstrap.css">
    <link rel="stylesheet" href="resources/css/app.css">
    <link rel="stylesheet" href="resources/css/animations.css">

    <script src="resources/vendors/jquery/jquery.js"></script>
    <script src="resources/vendors/angular/angular.min.js"></script>
    <script src="resources/vendors/angular/angular-animate.js"></script>
    <script src="resources/vendors/angular/angular-route.js"></script>
    <script src="resources/vendors/angular/angular-resource.js"></script>
    <!--personal script-->
    <script src="js/controllers/router.js"></script>
    <script src="js/animations/animations.js"></script>
    <script src="js/filters/filters.js"></script>
    <script src="js/services/services.js"></script>
    <script src="js/services/deserializer.js"></script>
    <script src="js/directives/directives.js"></script>

    <!-- load my controller -->
    <script src="js/controllers/phoneController.js"></script>
    <script src="js/controllers/specimenController.js"></script>
    <script src="js/controllers/localisationController.js"></script>
</head>
<body>
     <!-- MAIN CONTENT AND INJECTED VIEWS -->
  <div class="view-container">
    <div ng-view class="view-frame"></div>
  </div>
</body>
</html>

router.js:

'use strict';

/* App Module */
var interfaceApp = angular.module('interfaceApp', [
  'ngRoute',
  'phoneModules',
  'localisationModules',
  'specimenModules',
  'interfaceFilters',
  'interfaceDirectives',
  'interfaceAnimations',
  'interfaceServices',
  // 'DeserializerService' //  Error: [$injector:modulerr]
]);

interfaceApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'partials/home.html',
          controller: 'MainCtrl'
        }).
      when('/specimens', {
        templateUrl: 'partials/specimen/list.html',
        controller: 'specimenListeCtrl'
      }).
      when('/specimens/:specimensId', {
        templateUrl: 'partials/specimen/detail.html',
        controller: 'specimenDetailCtrl'
      }).

      otherwise({
        redirectTo: '/'
      });
 }]);

js/controllers/specimenController.js :

'use strict';

/* Controllers */
var specimenModules = angular.module('specimenModules', ['ngRoute']);

...

var referencedTag={"mediasSet":"@mediasSet","determinations":"@determinationID"};

specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService',
   function ($scope,$http,DeserializerService) {
      var request = 'http://localhost:8888/ui/specimens?limit=10&r_medias=false&orderby=d_determinationid';
      $http.get(request).success(function(data) {
         DeserializerService.startDeserializer(data,referencedTag);
         $scope.specimens=data;
      });
   }
]);

js/services/deserializer.js : 

var deserializerModule = angular.module('DeserializerModule', []);
deserializerModule.service('DeserializerService', function() {
***//specimenModules.service('deserializerService', function() {  // work but i dont want to use specimenModules her***
   this.referencedTag= [];
   this.startDeserializer= function(data,refTag) {
      this.referencedTag=refTag;
      this.deserializer(data);
   }

   this.deserializer= function(data) {
      ...
   }
});

I tried many combinations, but all failed giving error like : Error: [$injector:modulerr] Error: [$injector:unpr] but i don't see where it come from on firebug ( the error dont give a line or file ) ERROR:

    Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=DeserializerServiceProvider%20%3C-%20DeserializerService
u/<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:6:443
ec/l.$injector<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:139
c@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
ec/p.$injector<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:209
c@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
d@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:409
f/<.instantiate@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:35:101
Od/this.$get</<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:66:463
ngViewFillContentFactory/<.link@http://localhost/rec-interface/resources/vendors/angular/angular-route.js:913:1
N@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:54:85
g@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:55
v/<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:46:253
O/<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:485
x@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:51:245
update@http://localhost/rec-interface/resources/vendors/angular/angular-route.js:871:1
Yd/this.$get</h.prototype.$broadcast@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:113:355
updateRoute/<@http://localhost/rec-interface/resources/vendors/angular/angular-route.js:552:15
ze/e/l.promise.then/D@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/e/l.promise.then/D@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/f/<.then/<@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:100:407
Yd/this.$get</h.prototype.$eval@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:110
Yd/this.$get</h.prototype.$digest@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:108:180
Yd/this.$get</h.prototype.$apply@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:449
g@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:72:113
x@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:76:463
ve/</v.onreadystatechange@http://localhost/rec-interface/resources/vendors/angular/angular.min.js:78:1

<div ng-view="" class="view-frame ng-scope">

Thanks for your help, any advice or critics are welcomed.

Solution

  • many thank @jcubic you are right it work !!! it need double "injection", one for module and one for service name:

    var specimenModules = angular.module('specimenModules', ['ngRoute','DeserializerModule']);

    ... 

    specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService', function ($scope,$http,DeserializerService) { ... }])

    thanks