コンポーネントのクラス定義に依存関係を挿入するにはどうすればよいですか？

Question

私はこのクラス定義のコンポーネントを持っています（webpackとbabelで後でES5に戻す）。そのメソッドの1つで$ httpサービスを使う必要があります。それ、どうやったら出来るの？どこで$ httpを依存関係として挿入するのですか？私がコンストラクタ引数でそれを行うと、まったく注入していないかのようにエラーが発生します。たぶん、クラスはここに行く方法ではありませんか？

angular.module('myApp').component('home', { 
    template: require('./home.component.html'), 
    controller: class HomeCtrl { 
     constructor() { 
     } 
     doMe() { 
      $http.get('http://www.yahoo.com/'); 
     } 
    } 
}); 

Answer 1

ES2015クラス（またはトランスビルドされたクラス）は、プロトタイプの継承よりも構文上の砂糖です。これは、定義したメソッドが "クラス"のプロトタイプに置かれることを意味します。コンストラクタに挿入された依存関係にアクセスできるようにするには、後でプロトタイプメソッドで参照できるように、何らかの形で保存する必要があります。

これは通常のインスタンスにそれらを置くことによって行われます。

function HomeController($http) { 
    this.$http = $http; 
} 
HomeController.prototype.doMe = function() { 
    this.$http.get('http://www.yahoo.com/'); 
}; 

クラスベースの構文では、これはに変換：あなたがいる場合
：

class HomeController { 
    constructor($http) { 
    this.$http = $http; 
    } 

    doMe() { 
    this.$http.get('http://www.yahoo.com/'); 
    } 
} 

---

EDIT TypeScriptを使用すると、コンストラクターの引数にアクセス修飾子を使用することで、いくつかの定型文を保存できます。例：

class HomeController { 
    constructor(private $http) {} 
} 

...の省略形です：あなたはあなたのコントローラが縮小フレンドリーにしたい場合は、のいずれかを使用することができます
：

class HomeController { 
    private $http; 

    contructor($http) { 
    this.$http = $http; 
    } 
} 

---

EDIT 2オプションはhereと記載されています（​​のようなツールもあります）。たとえば、あなたが "$injectプロパティ注釈" メソッドを使用することができますどのようにこの：

ES5

HomeController.$inject = ['$http']; 
function HomeController($http) {...} 
HomeController.prototype.doMe = function() {...} 

ES2015

class HomeController { 
    constructor($http) {...} 
    ... 
} 
HomeController.$inject = ['$http']; 

// OR 

class HomeController { 
    static get $inject() { return ['$http']; } 
    constructor($http) {...} 

    doMe() {...} 
} 

活字体

class HomeController { 
    static $inject = ['$http']; 
    constructor(private $http) {} 

    doMe() {...} 
} 

Answer 2

クラスが適切に縮小されるためには、明示的な$inject注釈れている必要があります。最終的には

class HomeCtrl { 
    static get $inject() { 
     return ['$http']; 
    } 
    // or unstandardized shortcut: 
    // static $inject = ['$http']; 

    constructor($http) { 
     this.$http = $http; 
    } 

    doMe() { 
     this.$http... 
    } 
} 

Answer 3

を、私がやった：

controller: class { 
    constructor($http, Restangular, $state) { 
     Object.assign(this, {$http, Restangular, $state}); 
    } 
    doMe() { 
     // use this.$http, this.Restangular & this.$state freely here 
    } 
}