angularjs未捕获错误:未知提供程序:

angularjs Uncaught Error: Unknown provider:

本文关键字：未知 程序 错误 angularjs      更新时间：2023-09-26

我需要一些帮助。我正在学习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-include，但为了简洁起见，这里是删除了很多内容后的样子。

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

在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 中的函数

相关文章：