0

我正在尝试使用 angularjs、依赖注入、工厂和 signalR 集线器来解决问题，但我收到错误 Unknown provider: personH​​ubProvider <- personH​​ub，我无法弄清楚是什么原因造成的。

我的代码是这样的：

首先我声明模块：

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

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

然后我在 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) {

    };
}]);

当我打开网页时，我收到之前提到的错误：错误：未知提供者：personH​​ubProvider <- personH​​ub。

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

4

1 回答 1

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，而且大部分是本地文件，所以在生产场景中可能更明显）。

于 2013-08-21T22:07:58.580 回答