Javascript 为什么会出现错误：未知提供程序：personHubProvider<；-personHub

我正试图解决angularjs、依赖注入、工厂和信号集线器的问题，但我得到了未知提供程序的错误：personHubProvider，正如我在评论中所述，我知道发生此错误是因为注入的$provider没有定义，因此它报告说没有提供所述的$provider。$provider可能是工厂、服务、控制器或值（我可能忘记了其他一些），必须在引用它进行注入之前进行定义

有关提供者和注入的更多信息，请点击此处：

我处理组织代码的方法是将给定视图所需的大部分部分封装到一个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应用程序模块）

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

    <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，大部分是本地文件，因此在生产场景中可能更容易察觉）。

确保在可能使用控制器之前已设置了工厂，我个人将我的服务与我的控制器结合在一起，这样每个文件首先是一个服务功能组，然后是通常依赖于这些服务的控制器（也可能是其他的）。我在工厂定义中没有看到任何错误，如果除了在这里显示的错误之外，您在控制台中没有看到任何东西，我也不会太怀疑它。你是对的，虽然这通常是你会遇到的错误，因为在你注入的某些服务中找不到服务提供商。在使用控制器之前，工厂似乎还没有建立，我不知道。在我的index.html文件中，加载包含工厂的js文件比加载包含控制器的js文件更重要，但运行时的加载顺序似乎与此相反？这是为什么。当我将工厂代码添加到与控制器代码相同的文件中时，我不再得到错误。这是否意味着我不能通过放入两个不同的文件来分离代码？如果我不能的话，听起来很奇怪。我相信如果你把一个脚本标记放在头上，它会异步加载，但在身体上，它们会按顺序加载。我个人一直将脚本保存在头脑中（缺点是它们会在页面呈现之前加载，我在项目中对此进行了更改，优点是脚本可以在页面呈现之前运行，这是一个难题）。我把我的代码分为几个文件，但每个文件都有一个模块，然后我的主模块取决于所有部分，我不确定它到底是如何加载的，但它是如何工作的。这里有更多关于手动启动angular的主题，而不是使用CDN（云托管js）的ng应用程序指令也很有帮助，因为域不一样，这意味着每个域的两个文件规则没有那么大的问题，最后你还可以设置一个用于合并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"]);

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

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