ngGrid를 사용 할 수 없습니다 - 알 수없는 제공 : ngGridProvider

내 응용 프로그램에 ngGrid을 포함하려고 노력하지만,이 오류 받고 있어요 : 여기ngGrid를 사용 할 수 없습니다 - 알 수없는 제공 : ngGridProvider

<!doctype html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="styles/main.css"> 

    </head> 
    <body ng-app="wizardApp"> 

    <div class="container" ng-view=""></div> 
    <script src="bower_components/jquery/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/underscore/underscore.js"></script> 

    <!-- Breeze: --> 
    <script src="http://sampleservice.breezejs.com/scripts/q.min.js"></script> 
    <script src="https://rawgithub.com/IdeaBlade/Breeze/master/Breeze.Client/Scripts/breeze.min.js"></script> 
    <script src="https://rawgithub.com/IdeaBlade/Breeze/master/Breeze.Client/Scripts/Labs/breeze.angular.js"></script> 
    <script src="https://rawgithub.com/IdeaBlade/Breeze/master/Breeze.Client/Scripts/Labs/breeze.metadata-helper.js"></script> 

    <!-- ng-grid: --> 

    <script src="bower_components/ng-grid/build/ng-grid.debug.js"></script> 
    <link rel="stylesheet" href="bower_components/ng-grid/ng-grid.css" /> 
    <link rel="stylesheet" href="styles/style.css" /> 

    <!-- the actual app: --> 

     <script src="scripts/app.js"></script> 
     <script src="scripts/model.js"></script> 
     <script src="scripts/datacontext.js"></script> 
     <script src="scripts/metadataFactory.js"></script> 

     <script src="scripts/controllers/introductionWizard.js"></script> 
     <script src="scripts/controllers/applicationGeneralWizard.js"></script> 
     <script src="scripts/controllers/applicationTable.js"></script> 


     <script src="http://sampleservice.breezejs.com/scripts/ngLogger.js"></script> 
     <script src="bower_components/angular-wizard/dist/angular-wizard.js"></script> 
     <link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css"> 
</body> 
</html>

: 여기

Error: [$injector:unpr] Unknown provider: ngGridProvider <- ngGrid 
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=ngGridProvider%20%3C-%20ngGrid 
    at http://localhost:63342/wizard/app/bower_components/angular/angular.js:78:12 
    at http://localhost:63342/wizard/app/bower_components/angular/angular.js:3538:19 
    at Object.getService [as get] (http://localhost:63342/wizard/app/bower_components/angular/angular.js:3665:39) 
    at http://localhost:63342/wizard/app/bower_components/angular/angular.js:3543:45 
    at getService (http://localhost:63342/wizard/app/bower_components/angular/angular.js:3665:39) 
    at invoke (http://localhost:63342/wizard/app/bower_components/angular/angular.js:3687:13) 
    at Object.instantiate (http://localhost:63342/wizard/app/bower_components/angular/angular.js:3708:23) 
    at http://localhost:63342/wizard/app/bower_components/angular/angular.js:6758:28 
    at link (http://localhost:63342/wizard/app/bower_components/angular-route/angular-route.js:897:26) 
    at nodeLinkFn (http://localhost:63342/wizard/app/bower_components/angular/angular.js:6212:13) <div class="container ng-scope" ng-view="">

내 index.html을하다 . 내 응용 프로그램입니다입니다 :

여기

'use strict'; 

var app = angular.module('wizardApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute', 
    'mgo-angular-wizard' 
]); 

app.value('host', false /*use local host*/ ? "http://localhost:63428" : "http://sampleservice.breezejs.com"); 

app.controller('ApplicationTableCtrl', ['$scope', '$location', '$rootScope','ngGrid', 
    function ($scope, $location, $rootScope) { 

    } 
]); 

app.controller('MainCtrl', 
    ['$scope', 'datacontext','$timeout','WizardHandler','$location', 
     function($scope, datacontext, $timeout,WizardHandler,$location) { 

      function Customer(name,number,address,contact) 
      { 
       this.customerName = name; 
       this.customerNumber = number; 
       this.customerAddress = address; 
       this.customerContact = contact; 
      } 

      console.log('created MainCtrl'); 
      $scope.items = []; 
//   $scope.logList = logger.logList; 
//   $scope.lastLog = function(){return logger.lastLog;}; 

      $scope.step_1_Action = function(name,number){ 
       console.log('MainCtrl : step_1_Action dataInput: ' + name + ' ' + number); 

       $scope.currentCustomer = new Customer('','','',''); 
       $scope.currentCustomer.customerName = name; 
       $scope.currentCustomer.customerNumber = number; 
        } 
      $scope.step_2_Action = function(address,contact){ 
       console.log('MainCtrl : step_2_Action dataInput: ' + address + ' ' + contact); 
       $scope.currentCustomer.customerAddress = address; 
       $scope.currentCustomer.customerContact = contact; 
        } 
      $scope.saveCustomerRecord = function(){ 
       datacontext.addCustomer($scope.currentCustomer); 
       datacontext.commit(); 
       $scope.currentCustomer = new Customer('','','',''); 
       //$scope.step1Form.$setPristine(); 
       $scope.currentCustomer = {}; 
       WizardHandler.wizard().goTo(0); 
      } 


     }] 

); 



app 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/IntroductionWizard', { 
      templateUrl: 'views/Wizards/IntroductionWizard/IntroductionWizard.html', 
      controller: 'IntroductionWizardCtrl' 
     }) 
     .when('/ApplicationGeneralWizard', { 
      templateUrl: 'views/Wizards/ApplicationGeneralWizard/ApplicationGeneralWizard.html', 
      controller: 'ApplicationGeneralWizardCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }).run(
    function ($rootScope, $location) { 
     $rootScope.go = function (path) { 
      $location.path(path); 
     } 
    }); 

;

가 ApplicationGeneralWizard.html입니다 :

,536,913 여기

<div class="header"> 
    <ul class="nav nav-pills pull-right"> 
     <li class="active"><a ng-href="#">Home</a></li> 
     <li><a ng-href="#">About</a></li> 
     <li><a ng-href="#">Contact</a></li> 
    </ul> 
    <h3 class="text-muted">App Wizard</h3> 
</div> 

<div> 
    <p>Application General Wizard</p> 

    <wizard> 
     <wz-step title="IntroductionWizard-Step-1"> 
      <!--<ng-include src=" 'views/Wizards/ApplicationGeneralWizard/ApplicationGeneralWizard-Step-1.html' "></ng-include>--> 

      <div class="center"> 

       <div class="gridStyle" ng-grid="gridOptions"></div> 


      </div> 


     </wz-step> 
     <wz-step title="IntroductionWizard-Step-2"> 
      <!--<ng-include src=" 'views/Wizards/IntroductionWizard/IntroductionWizard-Step-2.html' "></ng-include>--> 
     </wz-step> 
     <wz-step title="IntroductionWizard-Step-3"> 
      <!--<ng-include src=" 'views/Wizards/IntroductionWizard/IntroductionWizard-Step-3.html' "></ng-include>--> 
     </wz-step> 
    </wizard> 

</div> 


<div class="footer"> 

</div>

그리고은 ApplicationGeneralWizardCtrl입니다 :

여기

'use strict'; 

angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', ['ngGrid', 
    function ($scope, $location, $rootScope) { 
      console.log('Entering ApplicationGeneralWizardCtrl'); 
    } 
]);

원본 (개발자) 코드 모습입니다 : 내가 잘못 뭐하는 거지

<script> 
     angular.module('myApp',['ngGrid']); 
    </script>

출처

2014-03-28 Eugene Goldberg

ngGrid은 서비스가 아닌 모듈입니다. 그것을 주입하지 않도록

var app = angular.module('wizardApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute', 
    'mgo-angular-wizard', 
    'ngGrid' 
]);

을 그리고 컨트롤러 정의에서 제거 : 당신은 당신의 모듈의 의존성에 추가해야

angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', 
    function ($scope, $location, $rootScope) { 
      console.log('Entering ApplicationGeneralWizardCtrl'); 
    } 
);

출처

2014-03-28 22:57:05 dnc253

ngGrid를 사용 할 수 없습니다 - 알 수없는 제공 : ngGridProvider

답변

관련 문제