无法将 angularjs 服务附加到控制器

Question

当我尝试将服务附加到控制器时出现此错误： [$injector:unpr] ... webSocketServiceProvider <- webSocketService <- videoMenuCtrl

我有一个 plunker 定义了一个相当小的设置重现了这个问题：

http://plnkr.co/edit/ptaIaOhzOIG1mSi4bPyF?p=preview

以下是主要的罪魁祸首文件：

index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>
  <body ng-app="videoApp">
    <section class="menu" ng-controller="videoMenuCtrl">
    </section>
    <script src="webSocketService.js"></script>
    <script src="videoMenu.js"></script>
    <script src="ngDialog.min.js"></script>
    <script src="ngPopup.min.js"></script>
</body>
</html>

webSocketService.js:

(function(angular) { 
    'use strict';

angular.module('videoApp')
    .factory('webSocketService', function($q) {
    return{};
});
});

videoMenu.js:

'use strict';

var app = angular.module('videoApp', ['ngDialog', 'ngPopup']);

app.controller('videoMenuCtrl', function($scope, $window, $location, ngDialog, webSocketService) {

});

如果我从控制器中删除 webSocketService，我不会收到错误，但重点是让控制器能够访问 webSocketService。有任何想法吗？谢谢！

编辑：更改了文件名拼写错误。

Answer 1

我让你的代码正常工作。我注意到两件事：

在您 webSocketService.js 中，您重新声明了 videoApp 模块。
您在未被调用的函数表达式中声明模块。

我在正确命名空间的模块中重新声明了您的服务，并将其包装在 immediately invoked function expression.

中

我还从您的 videoMenuCtrl 中删除了您的 var app = 声明，并将其包装在 IIFE 中。这是为了避免弄乱全局命名空间。这是一个有效的插件：

http://plnkr.co/edit/A8BcATiaqhXCA7BZDXWx?p=preview

EDIT (clarification) IIFEs 在我的示例中不是绝对必要的，因为 var app = 声明已从代码。这是原始示例中在全局命名空间上声明的唯一变量。但是，据我所知，将代码包装在 IIFE 中没有负面影响。

无法将 angularjs 服务附加到控制器

Can't attach angularjs service to controller

angularjs

angularjs-service