Angularjs 和 Typescript：错误：[$injector:unpr] 未知提供者答案

【问题标题】：Angularjs and Typescript: Error: [$injector:unpr] Unknown providerAngularjs 和 Typescript：错误：[$injector:unpr] 未知提供者
【发布时间】：2014-10-05 03:01:31
【问题描述】：

我有一个非常简单的网页：

<!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>

我有我的控制器StudentUse。

/// <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);
}

我还有一个名为ServiceHttp.ts的文件，上面的代码用到了这个文件。 “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);
}

如果我启动我的网页，切换到开发者控制台，我会收到一条错误消息：

错误：[$injector:unpr] 未知提供者：serviceHttpProvider

我没有进行一些调查，但我看不出有效示例与错误解决方案之间的区别..... :-(

有什么建议吗？

谢谢！

编辑：这应该是 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 "";
      }

【问题讨论】：

我推荐这种服务模式：youtube.com/watch?v=Yis8m3BdnEM&hd=1

标签： angularjs dependency-injection typescript

【解决方案1】：

首先我想建议在顶部包含 angular.d.ts

/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="../scripts/app.ts" />
/// <reference path="ServiceHttp.ts" />    
/// <reference path="Student.ts" />

对于服务，您应该像这样创建

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);
        }
  }

}

这是一个服务示例。然后你需要像这样将你的服务注册到你的应用程序中

nawApp.app.factory('ServiceHttp', nawApp.ServiceHttp.Factory);

在代码中的某个地方，例如在控制器中，您应该通过并在控制器功能中

控制器构造函数

private ServiceHttp:any;
constructor(ServiceHttp .... // other dependencies){
     this.ServiceHttp = ServiceHttp;
}

在 ctrl 函数中

someCtrlFunction(){
  this.ServiceHttp.exampleFunction().then(function(resp){
   // success resolved with your response
  })
}

【讨论】：

谢谢，但为什么我需要 $q: ng.IQService 和 $log: ng.ILogService。之后就不再使用了。
这只是一个例子，告诉你如何注入依赖项:) 如果你不需要，你可以删除它们:)
谢谢。好吧，我根据您的建议调整了代码-它有效:-)。正如我所说，我想将该服务用于 HTTP-REST 请求，所以我只需要 $http。您的测试目的我只是返回了“Hello World”的东西，但现在我添加了 REST-Stuff，所以 this.http.get(URL).success....，但似乎 http 没有以正确的方式初始化.我用“serviceHttp.exampleFunction();”调用 exampleFunction()。这不是正确的方法... :-)
你能帮我解决这个问题吗...对不起，但这似乎是个愚蠢的问题...我知道
你的意思是你想在 exampleFunction 中进行 http 调用并返回 promise，然后在代码中执行类似 serviceHttp.exampleFunction().then(function(){alert('succes')})