angularjs未捕获错误：未知提供者：答案

【问题标题】：angularjs Uncaught Error: Unknown provider:angularjs未捕获错误：未知提供者：
【发布时间】：2013-08-16 14:52:44
【问题描述】：

我需要一些帮助。我正在学习 Angularjs 并尝试创建服务。目前我正在尝试将其模块中的所有内容分开。当我创建一个名为 (bac.route-manager) 的新模块并尝试将其作为 RouterService 注入应用程序配置时，我收到一个错误，我不明白其含义或如何修复它。我所有其他的东西似乎都可以工作，除了当我尝试添加这个模块时，这个未知的提供者只有在我尝试注入它之后才开始出现。请提供任何帮助。

我的错误

Uncaught Error: Unknown provider: RouterService from bac

我的 app.js 文件

angular.module('bac', [
   'bac.route-manager'
])

.config( function bacAppConfig( $routeProvider, RouterService ) {

     //I dont knwo if i can do this but right now it doesnt matter because of error
     console.log(RouterService.getRoutes());
});

我的 route-manager.js 文件

angular.module('bac.route-manager', [])

.service('RouterService', function() {

    this.getRoutes = function() {
        return {
                "/login": {
            templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
             requiredLogin: false
         },

        "/dashboard": {
            templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
            controller: 'DashboardController',
            requiredLogin: true
         }

        };

};

});

我使用 grunt 生成 js 包含在我的 html 文件中，但是为了简洁起见，删除了很多东西后的样子。

我的 index.html

<html lang="en" class="no-js" ng-app="bac">
    <body>
        <ng-view></ng-view>

     <script type="text/javascript" src="vendor/angular/angular.js"></script>
     <script type="text/javascript" src="app/app.js"></script>
     <script type="text/javascript" src="app/modules/dashboard-manager/dashboard-manager.js"></script>
     <script type="text/javascript" src="app/modules/route-manager/route-manager.js"></script>

    </body>
</html>

【问题讨论】：

尝试在app.js之前加载route-manager.js
我刚试过。我用 grunt 生成了 index.html 文件，然后进入并手动将 route-manager.js 文件移动到除了 app.js 文件之外的所有文件之上。还是一样的错误。未捕获的错误：未知的提供者：来自 bac 的 RouterService
@Codezilla 配置和运行阶段推迟到整个文档加载完毕。在这种情况下，它们出现的顺序无关紧要。
stackoverflow.com/questions/15244272/…
@STARTRUNCMD 不是那个问题的重复，因为bac 模块已经将bac.route-manager 定义为依赖项。

标签： javascript angularjs gruntjs

【解决方案1】：

在config 阶段，声明的服务尚不可用。只有那些使用provide 声明的人才能通过serviceNameProvider（在您定义的名称后添加Provider）。例如：

.provide('RouterService', function() {
  var service = { };
  var routes = {
    "/login": {
      templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
      requiredLogin: false
    }, 
    "/dashboard": {
        templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
        controller: 'DashboardController',
        requiredLogin: true
     }};

  service.getRoutes = function() { return routes; };

  this.$get = function() { return service; }

  this.setupRoute = function(data) { /* something here */ };
};

当您获得提供者时，this 上定义的所有方法都将可用。当你访问正常的服务时，注入的是$get函数的返回。根据您的需要，您要么需要将服务更改为使用provide，要么要求在run 方法中注入服务：

angular.module('bac', ['bac.route-manager'])
  .config(function ($routeProvider, RouterServiceProvider) {
    // Here, only RouterServiceProvider.setupRoute will be available
  }).run(function (RouterService) {
    // Here, the service singleton return with the $get function will
    // be injected
    console.log(RouterService.getRoutes());
});

编辑

附带说明，我相信即使您将RouterService 定义为service，请求RouterServiceProvider 仍然有效，但不会出现任何方法，因为service 本质上是@ 的包装987654335@ 只返回$get 中的函数

【讨论】：

感谢您的回复。我将重新考虑，然后将其标记为答案。
将服务转换为提供者有效。但是我对如何实现 $get 方法感到困惑。在提供程序中，我添加了一个 this.getRoutes() 方法，以便接下来我可以遍历对象以在 $routeProvider 中配置路由。在这个阶段我真的不需要 $get 方法，也许稍后，但我不能只在控制器中注入 RouterServiceProvider 来使用 this.getRoutes() 方法。