Question

我用 Yeoman AngularJS 生成器生成了一个 AngularJS 应用，当运行原始源代码时，它运行良好。

但是当我尝试从 Grunt build 生成的dist文件夹中运行应用程序时我收到以下错误：

vendor.972e9c35.js：5错误：[$ injector：unpr]未知提供者：aProvider <-a https://errors.angularjs.org/1.7.2/ $ injector / unpr？p0 = aProvider％20％3C-％20a 在vendor.972e9c35.js：3 在vendor.972e9c35.js：4 在Object.d [获得]（vendor.972e9c35.js：4）在vendor.972e9c35.js：4 在d（vendor.972e9c35.js：4）在e（vendor.972e9c35.js：4）在Object.g [作为调用]（vendor.972e9c35.js：4）在l.instance（vendor.972e9c35.js：5）在vendor.972e9c35.js：26 在我（vendor.972e9c35.js：6）上，“可能未处理的拒绝：{}”

我看到这是一个常见错误，解决方案应该是在数组中声明所有服务（您可以使用ng注释的npm模块自动执行此操作）-我这样做了，但仍然遇到相同的错误。

这是我带有所有控制器和服务的原始.js文件：

var routerApp = angular.module('routerApp', ['ui.router','ui.grid','ui.bootstrap']);


routerApp.controller('expensesListCtrl',["$http", "gridService", function ($http,gridService) {
    var vm = this;
    vm.recievedData = false;
    vm.searchInput;
    vm.gridOptions = gridService.getOption();
    //vm.gridOptions.columnDefs = [{field:"name"},{field:"amount"},{field:"type"},{field:"time",type:'date'}];

    $http.get("http://localhost:8080/expenses").then(function(response){

      gridService.setData(response.data.expenses);
      gridService.setUnfilteredData(response.data.expenses);
      vm.recievedData = true;
    }).catch(function (error) {
        console.log(error);
    });
}]);

routerApp.factory('gridService',function () {


  var gridServiceInstance = {};
  gridServiceInstance.gridOptions = {};
  gridServiceInstance.gridOptions.columnDefs = [{field:"name"},{field:"amount"},{field:"type"},{field:"time",type:'date'}];
  gridServiceInstance.unfilteredData;

  gridServiceInstance.getData = function () {
    return gridServiceInstance.gridOptions.data;
  }

  gridServiceInstance.setData = function (data) {
    gridServiceInstance.gridOptions.data = data;
  }

  gridServiceInstance.getOption = function(){
    return gridServiceInstance.gridOptions;
  }

  gridServiceInstance.setUnfilteredData = function (data) {
    gridServiceInstance.unfilteredData = data;
  }

  gridServiceInstance.getUnfilteredData = function(){
    return gridServiceInstance.unfilteredData;
  }

  return gridServiceInstance;

})

routerApp.controller('mainPageNavCtrl',["$scope", "$uibModal", "$http", "gridService", function ($scope,$uibModal,$http,gridService) {

    var vm = this;
    $scope.check = "check str";


    $scope.addPath = function(){
        console.log("add path");
        $uibModal.open({
            templateUrl: 'addPathModal.html',
            controller: ["$scope", "$uibModalInstance", function ($scope, $uibModalInstance) {

                $scope.addExpenseForm = {};

                $scope.ok = function () {
                    $http.post("http://localhost:8080/expenses",$scope.addExpenseForm).then(function(response){
                        console.log(response);
                    })
                    $uibModalInstance.close();
                };

                $scope.cancel = function () {
                    $uibModalInstance.dismiss('cancel');
                };
            }]
        })
    }
    $scope.searchText = function () {
      console.log("inside search text");

      if($scope.searchInputText == null || $scope.searchInputText.length == 0)
      {
        gridService.setData(gridService.getUnfilteredData());
        return;
      }

      var filteredData = gridService.getUnfilteredData().filter(function (element) {
        if ( (element.name.indexOf($scope.searchInputText) != -1) || element.type.indexOf($scope.searchInputText) != -1) {
          return true;
        }
        return false;
      });
      gridService.setData(filteredData);
    }

}])


routerApp.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');
    $stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'expensesList.html',
            controller: 'expensesListCtrl as vm'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit
        });

}]);

我想念什么？谢谢您的帮助！

Answer 1

Angular会从参数名称到控制器的构造函数来推断控制器的依赖关系，如果您要缩减ExpenseListCtrl控制器的JavaScript代码，则其所有函数参数也会被缩减，并且依赖关系注入器将无法正确识别服务。定义services和factories的逻辑相同。

您可以通过以依赖项的名称（以字符串形式提供）来注释该函数来克服此问题，这些依赖项的名称不会缩小。

Angular通过注入器调用某些功能（例如服务工厂和控制器）。您需要注释这些功能，以便注入器知道要向该函数注入哪些服务。可以使用三种方法用服务名称信息来注释代码：

使用内联数组批注（首选）
使用$inject属性注释
从函数参数名称中隐式表示（有警告）因此，您已经使用了第一种方法，也需要将其用于工厂（即使不需要显式的依赖关系）。

因此，以下应解决此问题：

routerApp.factory('gridService', [ function () { /*factory code*/ }]);

Angularjs dependency annotation

declaring-angularjs-modules-for-minification

未知提供程序：Yeoman AngulajrJS生成的应用程序内部出现aProvider错误

1 个答案: