[英]Angularjs and Typescript: Error: [$injector:unpr] Unknown provider
I have a very simple webpage: 我有一个非常简单的网页:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title></title>
</head>
<body ng-app="nawApp">
<div ng-controller="StudentUse">
{{fullname}}
</div>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../Scripts/app.js"></script>
<script src="StudentUse.js"></script>
<script src="ServiceHttp.js"></script>
</body>
</html>
And I have my controller StundentUse . 而且我有我的控制器StundentUse 。
/// <reference path="../scripts/app.ts" />
/// <reference path="ServiceHttp.ts" />
/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="Student.ts" />
module nawApp {
export interface IStundentScope extends ng.IScope {
returnData: string;
}
export class StudentUse {
static $inject = ['$scope', 'ServiceHttp'];
constructor($scope: IStundentScope, private serviceHttp: nawApp.ServiceHttp) {
$scope.returnData = serviceHttp.hello();
}
}
// StudentUse.$inject = ['$scope', 'ServiceHttp'];
nawApp.app.controller('StudentUse', StudentUse);
}
I have another file called ServiceHttp.ts , which is used by the upper code. 我还有一个名为ServiceHttp.ts的文件,该文件由上层代码使用。 The "ServiceHttp.ts" should be some kind of REST-Interface in the future, but up to now it simply returns a "Hello World" string:
将来,“ ServiceHttp.ts”应该是某种REST-Interface,但是到目前为止,它仅返回“ Hello World”字符串:
/// <reference path="../scripts/app.ts" />
module nawApp {
export class ServiceHttp {
constructor() {}
hello(): string {
return "Hello world";
}
}
nawApp.app.controller('ServiceHttp', ServiceHttp);
}
If I launch my webpage, switch to the developer console, I get an error that saiys: 如果启动网页,请切换到开发者控制台,出现以下错误提示:
Error: [$injector:unpr] Unknown provider: serviceHttpProvider <- serviceHttp 错误:[$ injector:unpr]未知提供程序:serviceHttpProvider <-serviceHttp
I did't some investigation, but I cannot see the difference between examples that work and by solution with the error..... :-( 我没有进行任何调查,但无法看到有效的示例与有错误的解决方案之间的区别..... :-(
Any tips? 有小费吗?
Thank You! 谢谢!
EDIT: This should be somehow the final code of the function in ServiceHttp.ts : 编辑:这应该是ServiceHttp.ts中函数的最终代码:
exampleFunction():string {
this.http.get(URL).success(function (data, status, headers, config) {
try {
return data;
}
catch (err) {
return err;
}
}).error(function (data, status, headers, config) {
return status;
});
return "";
}
At first I want to suggest to include angular.d.ts in top 首先,我想建议在顶部包含angular.d.ts
/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="../scripts/app.ts" />
/// <reference path="ServiceHttp.ts" />
/// <reference path="Student.ts" />
and for service you should create like this 为了获得服务,您应该像这样创建
module nawApp {
export class ServiceHttp {
private http: ng.IHttpService;
private q: ng.IQService;
private log: ng.ILogService;
constructor($http: ng.IHttpService,$q: ng.IQService,$log: ng.ILogService) {
this.http = $http;
this.q = $q;
this.log = $log;
}
exampleFunction(){
var defer = this.q.defer();
this.http.get('http://example.com').then(
(response: ng.IHttpPromiseCallbackArg<any>) => {
defer.resolve(response);
}
},
(err: ng.IHttpPromiseCallbackArg<any>) => {
defer.reject(err.data);
}
)
return defer.promise;
}
static Factory($http:ng.IHttpService, $q:ng.IQService,$log: ng.ILogService) {
return new ServiceHttp($http, $q, $log);
}
}
}
It's a service example. 这是一个服务示例。 Then you need register your service into your app like this
然后,您需要像这样将服务注册到您的应用中
nawApp.app.factory('ServiceHttp', nawApp.ServiceHttp.Factory);
somewhere in code, for example in controller, you should inject your service through and in controller function 在代码中的某个位置(例如在控制器中),您应该通过和在控制器函数中注入服务
controller constructor 控制器构造函数
private ServiceHttp:any;
constructor(ServiceHttp .... // other dependencies){
this.ServiceHttp = ServiceHttp;
}
in ctrl function 在ctrl函数中
someCtrlFunction(){
this.ServiceHttp.exampleFunction().then(function(resp){
// success resolved with your response
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.