1

Angular 1.5.5を使用して、Typescriptを使用しようとしています。今、私はSampleService.tsでこのコードの写し(typescript)でサービスを作ってみる:私が持っているTypescriptをAngular 1.5に使用する

module app { 
    class SampleService { 
     constructor() { 
     } 

     public toto() :void { 
      console.log('test'); 
     } 
    } 
    angular.module("app").service("SampleService", [SampleService]); 
} 

Otherwhere:

angular.module('app', 
[ 'ngMaterial', 
    'ngAnimate', 
.... 

のためにルートを宣言します。これがないと

$stateProvider 
    .state('myapp', { 
     url: '', 
     controller: 'MainController as vm', 
     templateUrl: 'app/views/main.html', 
     abstract: true 
    }) 
    .state('myapp.search', { 
     url: '/', 
     controller: 'SearchController as vm', 
     templateUrl: 'app/views/partials/search.html' 
    }) 

サービス宣言、すべて正常に動作しています。 SampleServiceはこのように宣言して今、私が取得:

Error: [ng:areq] Argument 'MainController' is not a function, got undefined 
http://errors.angularjs.org/1.5.5/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined 
minErr/<@http://localhost:3000/bower_components/angular/angular.js:68:12 
[email protected]://localhost:3000/bower_components/angular/angular.js:1880:11 

サービスが注入されていない場合でも、自分のアプリケーションを破るようです。私は何が間違っているのアイデア?

+0

コントローラをチェックしてください! '.service( "sampleService"、SampleService); – rrd

+0

サービスを登録するときには、中括弧を削除することができます。メインコントローラ、controllerAs:

はそれhere in action

AranS

+0

TypeScriptサービスからコンパイルされた出力JSファイルを投稿できますか? – csharpfolk

答えて

3

がありますがサービスと同じようにworking plunker だけ登録コントローラです:

module app { 
    class SampleService { 
     constructor() { 
     } 

     public toto() :void { 
      console.log('test'); 
     } 
    } 
    angular.module("app").service("SampleService", [SampleService]); 

    class MainController { 

     static $inject = ["$scope", "SampleService"]; 
     constructor(
      protected $scope, 
      protected SampleService: SampleService) { 

      this.init(); 
     } 

     public init() :void { 
      this.SampleService.toto(); 
     } 
    } 
    angular.module("app").controller("MainController", MainController); 
} 

と述べ、彼らはあるとして

.state('myapp', { 
    url: '/myapp', 
    controller: 'MainController as vm', 
    templateUrl: 'app/views/main.html', 
    abstract: true 
}) 
.state('myapp.search', { 
    url: '/search', 
    controller: 'SearchController as vm', 
    templateUrl: 'app/views/partials/search.html' 
}) 
(ちょうど私が空にいくつかのURL、その他、文字列を好むん)

、これは動作します:

<a ui-sref="myapp.search"> 
012 、ちょうどそれのために「VM」、
関連する問題