为什么我会收到错误消息：未知提供者：personHubProvider <- personHub答案

【问题标题】：Why do I get the error: Unknown provider: personHubProvider <- personHub为什么我会收到错误消息：未知提供者：personHubProvider <- personHub
【发布时间】：2013-08-21 14:30:41
【问题描述】：

我正在尝试使用 angularjs、依赖注入、工厂和 signalR 集线器来解决问题，但我收到错误 Unknown provider: personHubProvider

我的代码是这样的：

首先我声明模块：

var ucp = angular.module('UCP', []);

ng-app="UCP"在html标签中使用。

然后我在 ucp 模块上为集线器设置进行一些配置，并创建一个 signalRHub 工厂来获取集线器，而无需输入很多相同的代码：

ucp.config(function($routeProvider) {

    //Declaring routes, removed this part of code cause I think it hasn't to do
    //with the problem I got    

    $.support.cors = true;
    $.connection.hub.url = config.signalR.connectionURL;
    $.connection.hub.logging = config.signalR.logging;
    $.connection.hub.start();

}).factory('signalRHub', [function() {
      return {
          person: $.connection.Persons.server
      };
}]);

然后，我创建另一个工厂，负责从服务器获取数据：

ucp.factory('personHub', ['signalRHub', function(signalRHub) {
    return {
        get: function(onsuccess, onerror) {
            signalRHub.person.get()
                .done(function(persons) {
                    onsuccess(persons);
                })
                .fail(function(error) {
                    onerror(error);
                });
        }
    }
}]);

我将这个工厂注入到我的控制器中，这样我就可以执行调用以从服务器获取数据并将其放入提供在浏览器中显示数据的范围内：

ucp.controller('personController', ['$scope', 'personHub', function($scope, personHub){
    var self = this;

    $scope.init = function() {
        personHub.get(self.ongetsuccess, self.ongeterror);
    }

    self.ongetsuccess = function(persons) {
        $scope.persons = persons;
    };

    self.ongeterror = function(error) {

    };
}]);

当我打开网页时，我收到了我之前提到的错误：错误：未知提供者：personHubProvider

我认为创建 personHub 工厂服务出了点问题，这反过来又会导致控制器出现依赖注入错误。我的问题是，是什么导致了错误，我在创建 personHub 工厂时做错了什么，如果是，我做错了什么？

【问题讨论】：

确保在可能使用控制器之前设置您的工厂，我已经亲自将我的服务与我的控制器一起使用，以便每个文件首先是一个服务的功能组，然后是通常依赖的控制器这些服务（可能还有其他服务）。我在工厂定义中没有看到任何错误，如果您在控制台中没有看到除了您在此处显示的错误之外的任何内容，我不会太怀疑它。您是对的，尽管这通常是您注入的某些服务无法找到服务提供商的错误。
似乎在使用控制器之前工厂还没有设置，我没有得到。在我的 index.html 文件中，加载包含工厂的 js 文件高于加载包含控制器的 js 文件，但运行时的加载顺序似乎相反？这是为什么。当我将工厂代码添加到与控制器代码相同的文件中时，我不再收到错误消息。这是否意味着我不能通过放入 2 个不同的文件来分隔这段代码？如果我做不到，我会觉得很奇怪。
我相信如果你在头部放置一个脚本标签，它会异步加载，但在正文中它们会按顺序加载。我个人一直把我的脚本放在头脑中（这里的缺点是它们会在页面呈现之前加载，我已经在项目中改变了这个，优点是脚本可以在页面呈现之前运行，这是一个折腾） .我将代码分成文件，但每个文件也有一个模块，然后我的主模块依赖于所有部分，我不确定它是如何真实加载的，但它可以工作。
更多关于stackoverflow.com/questions/496646/… 的主题以及关于手动启动 Angular 而不是使用 ng-app 指令 docs.angularjs.org/guide/bootstrap 使用 CDN（云托管 js）也有帮助，因为域会赢不一样，这意味着每个域规则的两个文件不是什么大问题，最后你可以设置一个构建脚本来合并 js 文件和缩小等。gruntjs.com

标签： javascript angularjs signalr.client

【解决方案1】：

正如我在 cmets 中所说的，我知道会发生此错误，因为注入的 $provider 未定义，因此它报告说没有任何东西可以提供所述 $provider。 $provider 可能是工厂、服务、控制器或值（可能还有其他我忘记了），并且必须在引用它以进行注入之前定义。

更多关于提供者和注入的信息：https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

我一直在处理组织代码的方式是将给定视图所需的大部分部分封装到一个 js 文件中。在那个 JS 文件中，我从服务部分开始，在其中定义了一个新模块，例如：

angular.module("loginModule.services",[/*dependencies*/]).service("loginService", [/*dependencies*/function(){ return {get:function(){return "what up!"}};}]);

然后在文件的下方我定义我的控制器，例如

angular.module("loginModule.controllers",[/*dependencies*/]).controller("LoginCtrl" ,["$scope", function($scope) { /* code here* /}]);

然后在文件的底部

angular.module("loginModule", ["loginModule.services", "loginModule.controllers"]);

最后在我的 mainApp.js 中（带有主 ng-app 模块）

angular.module("mainApp", ["loginModule"]);

我现在已经在头脑中定义了我的脚本块。

    <script type="text/javascript" src="components/loginModule.js"></script>
    <script type="text/javascript" src="mainApp.js"></script>

还要注意我的 loginModule 实际上依赖于 javascript 文件随后出现的其他服务。这似乎不是问题，因为 mainApp.js 被推迟到最后。

我刚刚在 Chrome 中检查了其中的一些内容，我的计算机中的 JS 文件似乎是按顺序和成对加载的（每个域一次只有两个，然后当响应返回时，会触发下一个请求）。我还尝试将脚本块从 HTML 的头部移动到底部，但我看不出有什么区别（我的笔记本电脑有一个 SSD，而且大部分是本地文件，所以在生产场景中可能更明显）。

【讨论】：