Question

我是AngularJs的新手。我无法将服务注入AngularJS中的控制器。我阅读了很多关于stackoverflow的教程和主题，但我无法解决我的问题，因为控制器＆amp;服务使用相同的模块：

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

myModule.service("myService", MyService);

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

我的项目在服务＆amp;控制器使用相同的模块，但我希望每个模块都使用自己的模块，因为许多控制器应该使用这个服务。

（我尽量减少代码）

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) {
      ...
   }
});

我尝试了很多组合，但都失败了，如：错误：[$ injector：modulerr] 错误：[$ injector：unpr] 但我没有看到它来自萤火虫（错误不给出一行或文件） 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">

感谢您的帮助，欢迎任何建议或评论。

Answer 1

非常感谢@jcubic你是对的!!! 它需要双“注入”，一个用于模块，一个用于服务名称：

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

...

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

谢谢

AngularJs，在控制器中注入服务

1 个答案: