Question

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

的ng-grid教程

当我按照控制台

中显示以下错误的所有步骤时

 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

为什么会显示此错误？我的gridService.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
       };
     }
  ]);

homeController.js是

angular.module('angularGruntSeed')

.controller('HomeController', ['$scope', 'GridService',
   function($scope, gridService) {

      gridService.getContributors().then(function(data) {
         $scope.myData = data;
      });

      $scope.gridOptions = {
         data: 'myData'
      };
   }
]);

app.js

'use strict';

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

APP-routes.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>

Answer 1

将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>

订单很重要，它无法找到控制器，因为它尚未声明。

nggrid - 错误：[$ injector：unpr]未知提供者：GridServiceProvider＆lt; - GridService＆lt; - HomeController

1 个答案: