angularjs 1.5コンポーネント依存性注入

Question

これはnewbと聞こえるかもしれませんが、これはangularjsコンポーネントのtutorialに従っています。

私はコンポーネントを初めて使用していますが、定数UtilsまたはauthServiceをこのようなコンポーネントに挿入するにはどうすればよいですか？

app.component('tlOverallHeader', { 
    bindings: { 
     data: '=' 
    }, 
    templateUrl: 'js/indexTimeline/components/tl_overallHeader/templates/tl_overallHeader.html', 
    controller: function() { 
     this.ms = 'tlOverallheader!' 
    } 
}) 

ありがとうございました！

Answer 1

あなたは、スタンドアロンのコントローラのようなあなたのコンポーネントのコントローラにサービスを注入することができるはずです。

controller: function(Utils, authService) { 
    this.ms = 'tlOverallheader!' 

    authService.doAuthRelatedActivities().then(...); 
} 

Answer 2

あなたは、このようなコンポーネントのコントローラにサービスを注入することができます

angular.module('app.module') 
     .component('test', { 
      templateUrl: 'views/someview.html', 
      bindings: { 
       subject: '=' 
      }, 
      controller: ['$scope', 'AppConfig', TestController] 
     }); 

    function TestController(scope, config) { 
     scope.something = 'abc'; 
    } 

またはこのような：

angular.module('app.module') 
     .component('test', { 
      templateUrl: 'views/someview.html', 
      bindings: { 
       subject: '=' 
      }, 
      controller: TestController 
     }); 

    TestController.$inject = ['$scope', 'AppConfig'] 
    function TestController(scope, config) { 
     scope.something = 'abc'; 
    } 

Answer 3

受け入れられた回答は、分別安全ではありません。あなたもここに縮小セーフな依存性注入の表記を使用することができます。

angular.module('myApp') 

.component('myComponent', { 
    templateUrl: 'myTemplate.html', 
    controller: ['myFactory', function(myFactory){ 
     var thisComponent = this; 
     thisComponent.myTemplatemsg = myFactory.myFunc(); 
    }] 
}) 


.factory('myFactory', [ function(){ 

    return { 
     myFunc: function(){ 
        return "This message is from the factory"; 
       } 
    }; 
}]);  

単語：

controller: ['Utils', 'authService', 
    function(Utils, authService) { 
    this.ms = 'tlOverallheader!' 

    authService.doAuthRelatedActivities().then(...); 
    }, 
] 

Answer 4

が工場スタイルのサービス次の構文を利用機能的なスタイルのプログラミングのために仕事を取得します注意：コンポーネントに設定した同じコンポーネントサービス/ファクトリは、親スコープと他のコンポーネントスコープを含め、アプリ内のどこにでも注入可能（アクセス可能）です。これは強力ですが、簡単に虐待される可能性があります。したがって、コンポーネントは独自の範囲内のデータのみを変更するように推奨されているため、誰が何を変更しているかについて混同することはありません。詳細はhttps://docs.angularjs.org/guide/component#component-based-application-architectureを参照してください。
しかし、上記のリンクでの議論でさえ、 バインディングオブジェクトを使用する場合、双方向バインディングプロパティ値'='を注意して使用するだけです。したがって、同じ理由がコンポーネントサービスとファクトリに適用されるはずです。他のコンポーネントスコープおよび/または親スコープで同じサービスまたは工場を使用する予定の場合は、親スコープが存在するサービス/工場またはサービス/工場の所在地がどこにあるかを設定することをお勧めします。特に、同じサービス/工場を使用する多数のコンポーネントがある場合。あなたは、それが見つけにくい任意のコンポーネントモジュールに配置されることは望ましくありません。