AngularJS Typescript Error: Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc
AngularJS Typescript Error: Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc
我在 AngularJS 中完成了几个项目,但这是我在 Typescript 中完成的第一个项目。我正在使用这个项目作为继续学习 angular 的一种方式,同时也是一种学习 Typescript 的方式,所以我几乎肯定这个错误是由于我不理解的东西而发生的,但我有最难解决问题的时间。我读到的关于这个错误的所有内容都是我在某处打字错误,但我已经检查了很多次,所以我最终决定向你们寻求帮助。不用说,我已经在 Stack Overflow 上浏览了许多类似的问题,但仍然找不到任何可以引导我找到解决方案的东西。
我遇到的错误:
Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc
ItemApp.ts:
module ItemApp {
'use strict'
var appModule = angular.module('ItemApp', ['ngRoute']);
appModule.config(['$routeProvider',
function ($routeProvider: ng.route.IRouteProvider) {
$routeProvider
.when('/', {
templateUrl: '/App/Item/Views/ItemList.html',
controller: ItemCtrl
})
.otherwise({
redirectTo: '/'
});
}
]);
appModule.factory('ItemSvc', ItemApp.ItemSvc);
appModule.controller('ItemCtrl', ItemApp.ItemCtrl);
}
ItemCtrl.ts:
module ItemApp {
'use strict'
export class ItemCtrl implements IItemCtrl {
public id: string;
public item: MainItem;
public testString: string;
private itemSvc: any;
constructor($scope, ItemSvc) {
this.testString = 'Testing';
this.itemSvc = ItemSvc;
this.itemSvc.getItem(this.id).then((data) => this.item = data);
}
}
ItemCtrl.$inject = ['$scope', 'itemSvc'];
}
ItemSvc.ts:
module ItemApp {
'use strict'
export class ItemSvc {
httpService: ng.IHttpService;
qService: ng.IQService;
constructor($http: ng.IHttpService, $q: ng.IQService) {
this.httpService = $http;
this.qService = $q;
}
getItem(id): ng.IPromise<MainItem> {
var deferred = this.qService.defer();
this.httpService.get('/api/item/' + id).then(res => {
deferred.resolve(res.data);
}).catch(res => {
deferred.reject(res);
});
return deferred.promise;
}
static Factory($http: ng.IHttpService, $q: ng.IQService) {
return new ItemSvc($http, $q);
}
}
ItemSvc.$inject = ['$http', '$q'];
}
Index.cshtml:
@{
ViewBag.Title = "List of Items";
}
<div ng-app="ItemApp">
Item Index
<div ng-view></div>
</div>
App/Item/Views/ItemList.html:
<div ng-controller="ItemCtrl as ic" >
Item HTML<br />
{{ic.testString}}<br />
</div>
路由至少可以正常工作,因为我得到一个 HTML 屏幕显示:
Item Index
Item HTML
{{ic.testString}}
所以控制器没有加载 testString 值,我收到了错误消息。有什么立即跳出来是错误的吗?如果有任何帮助,我将不胜感激!
Angular 的依赖注入区分大小写。在 appModule.factory('ItemSvc', ItemApp.ItemSvc);
和 ItemCtrl.$inject = ['$scope', 'itemSvc'];
之间使用一致的大小写
修复
将appModule.factory('ItemSvc', ItemApp.ItemSvc);
更改为appModule.factory('itemSvc', ItemApp.ItemSvc);
我在 AngularJS 中完成了几个项目,但这是我在 Typescript 中完成的第一个项目。我正在使用这个项目作为继续学习 angular 的一种方式,同时也是一种学习 Typescript 的方式,所以我几乎肯定这个错误是由于我不理解的东西而发生的,但我有最难解决问题的时间。我读到的关于这个错误的所有内容都是我在某处打字错误,但我已经检查了很多次,所以我最终决定向你们寻求帮助。不用说,我已经在 Stack Overflow 上浏览了许多类似的问题,但仍然找不到任何可以引导我找到解决方案的东西。
我遇到的错误:
Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc
ItemApp.ts:
module ItemApp {
'use strict'
var appModule = angular.module('ItemApp', ['ngRoute']);
appModule.config(['$routeProvider',
function ($routeProvider: ng.route.IRouteProvider) {
$routeProvider
.when('/', {
templateUrl: '/App/Item/Views/ItemList.html',
controller: ItemCtrl
})
.otherwise({
redirectTo: '/'
});
}
]);
appModule.factory('ItemSvc', ItemApp.ItemSvc);
appModule.controller('ItemCtrl', ItemApp.ItemCtrl);
}
ItemCtrl.ts:
module ItemApp {
'use strict'
export class ItemCtrl implements IItemCtrl {
public id: string;
public item: MainItem;
public testString: string;
private itemSvc: any;
constructor($scope, ItemSvc) {
this.testString = 'Testing';
this.itemSvc = ItemSvc;
this.itemSvc.getItem(this.id).then((data) => this.item = data);
}
}
ItemCtrl.$inject = ['$scope', 'itemSvc'];
}
ItemSvc.ts:
module ItemApp {
'use strict'
export class ItemSvc {
httpService: ng.IHttpService;
qService: ng.IQService;
constructor($http: ng.IHttpService, $q: ng.IQService) {
this.httpService = $http;
this.qService = $q;
}
getItem(id): ng.IPromise<MainItem> {
var deferred = this.qService.defer();
this.httpService.get('/api/item/' + id).then(res => {
deferred.resolve(res.data);
}).catch(res => {
deferred.reject(res);
});
return deferred.promise;
}
static Factory($http: ng.IHttpService, $q: ng.IQService) {
return new ItemSvc($http, $q);
}
}
ItemSvc.$inject = ['$http', '$q'];
}
Index.cshtml:
@{
ViewBag.Title = "List of Items";
}
<div ng-app="ItemApp">
Item Index
<div ng-view></div>
</div>
App/Item/Views/ItemList.html:
<div ng-controller="ItemCtrl as ic" >
Item HTML<br />
{{ic.testString}}<br />
</div>
路由至少可以正常工作,因为我得到一个 HTML 屏幕显示:
Item Index
Item HTML
{{ic.testString}}
所以控制器没有加载 testString 值,我收到了错误消息。有什么立即跳出来是错误的吗?如果有任何帮助,我将不胜感激!
Angular 的依赖注入区分大小写。在 appModule.factory('ItemSvc', ItemApp.ItemSvc);
和 ItemCtrl.$inject = ['$scope', 'itemSvc'];
修复
将appModule.factory('ItemSvc', ItemApp.ItemSvc);
更改为appModule.factory('itemSvc', ItemApp.ItemSvc);