AngularJS 报错：未知的提供者：

Question

AngularJS 报错：未知的提供者：

4

我需要一些帮助。我正在学习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来生成我的HTML文件中的js包含，但是以下是为了简洁而删除了很多内容。

我的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>

- lumberjacked

尝试在加载app.js之前加载route-manager.js。 - AlwaysALearner

我刚试了一下。我使用grunt生成了index.html文件，然后手动将route-manager.js文件移动到除app.js文件之外的所有文件上方。仍然出现相同的错误。未捕获的错误：来自bac的未知提供者：RouterService - lumberjacked

@Codezilla 配置和运行阶段被推迟到整个文档加载完成之后。在这种情况下，它们出现的顺序是无关紧要的。 - Simon Belanger

https://dev59.com/yGUp5IYBdhLWcg3wf3kG - START RUN CMD

@STARTRUNCMD 这不是那个问题的重复，因为 bac 模块已经将 bac.route-manager 定义为依赖项。 - Simon Belanger

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Belanger · Accepted Answer

在config阶段中，申明的服务还不可用。只有那些使用provide声明过的服务会通过serviceNameProvider（在你定义的服务名后加上Provider）进行访问。例如：

在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本质上是一个围绕provider的封装器，只返回$get函数。