Question

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

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

我的控制器 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);
}

我有另一个名为 ServiceHttp.ts 的文件，由上层代码使用。＆＃34; ServiceHttp.ts＆＃34;将来应该是某种REST接口，但到目前为止它只是返回一个＆＃34; Hello World＆＃34;字符串：

/// <reference path="../scripts/app.ts" />

module nawApp {
   export class ServiceHttp {
      constructor() {}

      hello(): string {
         return "Hello world";
      }
   }
   nawApp.app.controller('ServiceHttp', ServiceHttp);
}

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

错误：[$ injector：unpr]未知提供商：serviceHttpProvider＆lt; - serviceHttp

我做了一些调查，但我看不出有效的例子与解决方案之间的区别......： - （

任何提示？

谢谢！

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

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

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

1 个答案: