각도 "angular.js : 14110 오류 : [ng : areq] 인수 'fn'이 함수가 아닙니다. 정의되지 않았습니다."컨트롤러 인스턴스화시 예외입니다.

Question

각도 및 TypeScript를 사용하여 새 MVC 5 프로젝트를 설정하고 있습니다. 컨트롤러와 서비스를 인스턴스화하는 데 문제가 있습니다.

app.ts :

module mqApp { 
    'use strict'; 

    if (typeof (angular) != "undefined") { 
     var modules; 

     modules = []; 

     angular.module("mqApp", modules) 
      .controller("MasterController", MasterController) 
      .service("UserService", UserService); 
    } 
} 

userService.ts :

module mqApp { 

    'use strict'; 

    export class UserService { 
     public static $inject = [ 
      '$scope', 
      '$http', 
      '$window' 
     ]; 

     private scope: angular.IScope; 
     private httpSvc: angular.IHttpService; 
     private window: angular.IWindowService; 

     constructor($scope: angular.IScope, $http: angular.IHttpService, $window) { 
      this.scope = $scope; 
      this.httpSvc = $http; 
      this.window = $window; 
      alert(2); 
     } 

     logOff() { 
      this.httpSvc.get('/Account/LogOff'); 
      this.window.location.href = '/'; 
     } 

    } 
} 

다음

angular.js:14110 Error: [ng:areq] Argument 'fn' is not a function, got undefined 

내 설정이다 : 내 HTML에서 NG 컨트롤러를 포함 할 때 다음과 같은 오류가

masterController.ts :

module mqApp { 
    'use strict'; 

    export class MasterController { 
     public static $inject = [ 
      '$scope', 
      'UserService' 
     ]; 

     private userService: UserService; 
     private scope: angular.IScope; 

     contructor($scope: angular.IScope, userService: UserService) { 
      alert(1); 
      this.userService = userService; 
      this.scope = $scope; 

     } 
    } 
} 

Answer 1

생성자의 철자가 MasterController.ts에서 잘못되었습니다.

Answer 2

문제는 하나의 정의 전에 var로 정의 된 변수를 사용할 수 있습니다, 그 타이프 라이터가 UserService

자바 스크립트에서

var UserService = function($scope, /* ... */) { 
    this.$scope = $scope; 
    // ... 
} 

유사한로 변환 할 수 있지만 값은 undefined 될 것입니다 :

console.log(UserService); // => undefined 
class UserService {} 
console.log(UserService); // => function() { .... } 

따라서 가져 오기 순서는 다음과 같습니다. 호출 전에 클래스를 정의하는 코드가 실행되는지 확인해야합니다. .service(...) 또는 .controller(...) (통화보다 문자 그대로 위치해야 함).

클래스를 사용하여 파일을 분할하려면 typescripts import 메커니즘과 amd과 같은 모듈 로더 시스템을 사용하는 것이 좋습니다. 이렇게하면 클래스가 사용될 때 정의됩니다.