我正在尝试将ngGrid包含到我的应用程序中，但是收到此错误：
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：
<!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>
这是我的应用程序。：
'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：
<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>
我做错了什么？
答案 0 :(得分：3)
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');
}
);