web-dev-qa-db-ja.com

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

これは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!'
    }
})

ありがとう！

angularjsangularjs-directiveangularjs-components
32
Hokutosei

スタンドアロンコントローラーと同様に、コンポーネントのコントローラーにサービスを注入できるはずです。

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

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

次のように、コンポーネントコントローラにサービスを注入できます。

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';
    }
47
Gondy

受け入れられた答えは縮小化安全ではありません。ここでも、ミニフィケーションに対して安全な依存性注入表記を使用できます。

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

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

Functional style programmingFactoryスタイルサービスを利用する場合、次の構文は仕事完了：

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";
                }
    };
}]);

Word ofcaution：コンポーネントに設定した同じコンポーネントサービス/工場も、親を含むアプリの他の場所に注入可能です（したがって、アクセス可能です）スコープおよびその他のコンポーネントスコープ。これは強力ですが、簡単に悪用される可能性があります。したがって、コンポーネントが独自のスコープ内でのみデータを変更することが推奨されるため、誰が何を変更しているかについて混乱はありません。詳細については、 https://docs.angularjs.org/guide/component#component-based-application-architecture を参照してください。
ただし、前述のリンクの説明でさえ、バインディングオブジェクトを使用する場合の'='の双方向バインディングプロパティ値の注意深い使用のみを扱っています。したがって、コンポーネントサービスと工場にも同じ推論を適用する必要があります。他のコンポーネントスコープおよび/または親スコープで同じサービスまたはファクトリを使用する予定がある場合は、親スコープが存在する場所またはサービス/ファクトリの目的の集合体が存在する場所にサービス/ファクトリを設定することをお勧めします。特に、同じサービス/工場を使用する多数のコンポーネントがある場合。見つけるのが難しい任意のコンポーネントモジュールに配置するのは望ましくありません。

1
user5224681