Question

我收到angular.js:14362 Error: [$injector:unpr] Unknown provider: reportTypeServiceProvider <- reportTypeService <- ReportTypeController错误。

我发现了很多关于此的内容，但我仍然无法弄清楚代码中的问题。这是：

pitchviz.js：

(function () {
  'use strict';

  angular
    .module('pitchviz', [
      'pitchviz.config',
      'pitchviz.routes',
      'pitchviz.report-types'
    ]);

  angular
    .module('pitchviz.config', []);

  angular
    .module('pitchviz.routes', ['ngRoute']);

  angular
    .module('pitchviz')
    .run(run);

  run.$inject = ['$http'];

  function run($http) {
    $http.defaults.xsrfHeaderName = 'X-CSRFToken';
    $http.defaults.xsrfCookieName = 'csrftoken';
  }
})();

pitchviz.config.js：

(function () {
'use strict';

  angular
    .module('pitchviz.config')
    .config(config);

  config.$inject = ['$locationProvider'];

  function config($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
  }
})();

pitchviz.routes.js：

(function () {
  'use strict';

  angular
    .module('pitchviz.routes')
    .config(config);

  config.$inject = ['$routeProvider'];

  function config($routeProvider) {
    $routeProvider.when('/', {
      controller: 'ReportTypeController',
      controllerAs: 'vm',
      templateUrl: '/static/templates/report-types/report-types.html'
    }).otherwise('/');
  }
})();

报告类型/报告-types.modules.js：

(function () {
  'use strict';

  angular
    .module('pitchviz.report-types', [
      'pitchviz.report-types.controllers',
      'pitchviz.report-types.services'
    ]);

  angular
    .module('pitchviz.report-types.controllers', []);

  angular
    .module('pitchviz.report-types.services', []);
})();

报告类型/控制器/报告-type.controller.js：

(function () {
  'use strict';

  angular
    .module('pitchviz.report-types.controllers')
    .controller('ReportTypeController', ['reportTypeService', ReportTypeController]);

  ReportTypeController.$inject = ['reportTypeService'];

  function ReportTypeController(reportTypeService) {
    var vm = this;

    vm.reportType = undefined;

    activate();

    function activate() {

      reportTypeService.get().then(reportTypeSuccess, reportTypeError);

      function accountSuccess(data, status, headers, config) {
        console.log(data);
        vm.reportType = data.data;
      }

      function reportTypeError(data, status, headers, config) {
        console.log(data);
        console.log(status);
      }
    }
  }
})();

报告型/服务/报告-type.service.js：

(function () {
  'use strict';

  angular
    .module('pitchviz.report-types.services')
    .service('reportTypeService', ['reportTypeService', reportTypeService]);

  reportTypeService.$inject = ['$http'];

  function reportTypeService($http) {
    var reportTypeService = {
      get: get
    };

    return reportTypeService;

    function get() {
      console.log("service");
      return $http.get('/api/report-types/');
    }
  }
})();

这里发生了什么？谢谢！

Answer 1

每个文件一个模块是实体模式，但这里的问题是它在这里使用不正确。子模块应该在他们的文件中定义，例如报告-type.controller.js：

  angular
    .module('pitchviz.report-types.controllers', [])
    .controller('ReportTypeController', ...)

不在父模块文件中，report-types.modules.js。

只有这样才能保证模块单元在那里，如果有模块，模块文件可以按任意顺序加载。

Answer 2

reportTypeService模块中的

pitchviz.report-types.services。但是ReportTypeController模块中的pitchviz.report-types.controllers。我认为pitchviz.report-types.controllers无法识别reportTypeService，因为它位于单独的模块中。如果您想访问reportTypeService模块中的pitchviz.report-types.controllers。您必须将reportTypeService添加到pitchviz.report-types.controllers模块或将pitchviz.report-types.services模块注入pitchviz.report-types.controllers模块。

angular.module("pitchviz.report-types.controllers", ["pitchviz.report-types.services"]);

Answer 3

观察：此问题出现在report-types/controllers/report-type.controller.js，因为您在那里制作confusable语法。

无需使用$inject注入服务，因为您已经使用数组注入了该服务。

删除此内容： ReportTypeController.$inject = ['reportTypeService'];

只需使用：

.controller('ReportTypeController', ['reportTypeService', ReportTypeController]);

function ReportTypeController(reportTypeService) {
  ....
  ....
  ....
}

如何修复错误：[$ injector：unpr]未知提供商？

3 个答案: