nggrid - 错误: [$injector:unpr] 未知提供程序: 网格服务提供程序 <- 网格服务<- 家庭控

nggrid - Error: [$injector:unpr] Unknown provider: GridServiceProvider <- GridService <- HomeController

本文关键字：服务网格程序家庭未知错误 injector unpr nggrid 更新时间：2023-09-26

我正在 http://blog.backand.com/ng-grid-and-a-simple-rest-api/

当我按照所有步骤操作时，它在控制台中显示以下错误

 Error: [$injector:unpr] Unknown provider: gridServiceProvider <- gridService <- homeController
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=gridServiceProvider%20%3C-%20gridService%20%3C-%20homeController
    at http://localhost:9000/js/libs.min.js:9269:12
    at http://localhost:9000/js/libs.min.js:13200:19
    at Object.getService [as get] (http://localhost:9000/js/libs.min.js:13347:39)
    at http://localhost:9000/js/libs.min.js:13205:45
    at getService (http://localhost:9000/js/libs.min.js:13347:39)
    at invoke (http://localhost:9000/js/libs.min.js:13379:13)
    at Object.instantiate (http://localhost:9000/js/libs.min.js:13396:27)
    at http://localhost:9000/js/libs.min.js:17655:28
    at link (http://localhost:9000/js/libs.min.js:39064:26)
    at invokeLinkFn (http://localhost:9000/js/libs.min.js:17419:9) <div ng-view="" class="ng-scope">libs.min.js:20800 
    (anonymous function)libs.min.js:17750 
    (anonymous function)libs.min.js:17421 
    invokeLinkFn   libs.min.js:16928 
    nodeLinkFn      libs.min.js:16281 
    compositeLinkFn libs.min.js:16160 
    publicLinkFn    libs.min.js:16299 
    boundTranscludeFn libs.min.js:16955 
    controllersBoundTransclude   libs.min.js:39022 
    update   libs.min.js:23908 
    Scope.$broadcast    libs.min.js:38705 
    (anonymous function)libs.min.js:22376 
    processQueuelibs.min.js:22392 
    (anonymous function)libs.min.js:23589 
    Scope.$evallibs.min.js:23405 
    Scope.$digestlibs.min.js:23694 
    Scope.$applylibs.min.js:18852 
    donelibs.min.js:19042 
    completeRequestlibs.min.js:18983 requestLoaded

为什么会显示此错误？我的网格服务.js是

'use strict';
angular.module('angularGruntSeed')
  .factory('GridService', ['$http', '$q',
    function($http, $q) {
      var contributorsFile = 'json/contributors.json';
      var contributors = [];
      function getContributors() {
         var deferred = $q.defer();
         $http.get(contributorsFile)
            .then(function(result) {
               contributors = result.data;
               deferred.resolve(contributors);
            }, function(error) {
               deferred.reject(error);
            });
         return deferred.promise;
       }
       return {
          getContributors: getContributors
       };
     }
  ]);

首页控制器.js是

angular.module('angularGruntSeed')
.controller('HomeController', ['$scope', 'GridService',
   function($scope, gridService) {
      gridService.getContributors().then(function(data) {
         $scope.myData = data;
      });
      $scope.gridOptions = {
         data: 'myData'
      };
   }
]);

应用.js

'use strict';
// Declare core application module which pulls all the components together
angular.module('angularGruntSeed', [
    'ngAnimate',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngGrid',
]);

应用路由.js

'use strict';
angular.module('angularGruntSeed')
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/templates/home.html',
        controller: 'homeController'
    })
    .otherwise({ redirectTo: '/' });
}]);
<!doctype html>
<html lang="en" ng-app="angularGruntSeed">
<head>
    <title>Angular Grunt Seed Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link   href="../bower_components/ng-grid/ng-grid.css" rel="stylesheet">
    <link href="css/starter-template.css" rel="stylesheet">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Angular Seed</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <div ng-view></div>
    <!-- build:js js/libs.min.js -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-animate/angular-animate.js"></script>
    <script src="../bower_components/angular-resource/angular-resource.js"></script>
    <script src="../bower_components/angular-route/angular-route.js"></script>
    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="../bower_components/angular-touch/angular-touch.js"></script>
    <script src="../bower_components/fastclick/lib/fastclick.js"></script>
    <script src="../bower_components/ng-grid/ng-grid-2.0.14.debug.js"></script>>
    <!-- endbuild -->
    <!-- build:js js/app.min.js -->
    <script src="js/app.js"></script>
    <script src="js/app-routes.js"></script>
    <script src="js/homeController.js"></script>
    <!-- endbuild -->
</body>
</html>

将 HomeController，js 放在其他 js 文件之前：

<!-- build:js js/app.min.js -->
    <script src="js/app.js"></script>
    <script src="js/gridService.js"></script>
    <script src="js/homeController.js"></script>
    <script src="js/app-routes.js"></script>

顺序很重要，它找不到控制器，因为它尚未声明。