Question

我正在尝试使用angularjs，依赖注入，工厂和signalR集线器，但是我收到错误未知提供者：personHubProvider＆lt; - personHub，我无法弄清楚导致它的原因。

我的代码是这样的：

首先我宣布模块：

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＆lt; - personHub。

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

Answer 1

正如我在评论中所述，我知道发生此错误是因为注入的$ 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，主要是本地文件，因此在生产场景中可能更明显）。

为什么我会收到错误：未知提供者：personHubProvider＆lt; - personHub

1 个答案:

为什么我会收到错误：未知提供者：personH​​ubProvider＆lt; - personH​​ub

1 个答案:

为什么我会收到错误：未知提供者：personHubProvider＆lt; - personHub