个人中心
gpt4 book ai didi

javascript - nggrid - 错误 : [$injector:unpr] Unknown provider: GridServiceProvider <- GridService <- HomeController

转载 作者：行者123 更新时间：2023-11-28 00:43:05 25 4
gpt4 key购买 nike

我正在查看 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',
]);

应用程序路由.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>

顺序很重要，它无法找到 Controller ，因为它尚未声明。

关于javascript - nggrid - 错误 : [$injector:unpr] Unknown provider: GridServiceProvider <- GridService <- HomeController，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27725427/

25 4 0
文章推荐： javascript - 一个 HTML 表单，其中包含用于不同任务的多个提交按钮
文章推荐： javascript - 如何添加一个在 YouTube 视频播放完毕后执行的函数？
文章推荐： javascript - D3 - 为什么这个排序函数没有更新其选择中的所有元素？
文章推荐： c++ - 多路径继承和
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com