angularjs - AngularJS 1.5 コンポーネントの例

Question

.component()withプロパティを使用して Angularjs プロジェクトに取り組んでいtemplateますが、使用方法がわかりませんtemplateUrl。実際の例を提供できることに精通している人はいますか? ありがとう。

Answer 1

angular コンポーネントを適切に使用するには、controllerAs 構文を使用することをお勧めします。

angular.module('myApp')
    .component('groupComponent', {
        templateUrl: 'app/components/group.html',
        controller: function GroupController(){
              this.innerProp = "inner";
        },
        controllerAs: 'GroupCtrl',
        bindings: {
            input: '<'
        }
    });

group.html では、次の方法で使用できます。

<div>
{{GroupCtrl.input}}
{{GroupCtrl.inner}}
</div>

親コントロールから コンポーネントへのバインディングとして任意のパラメーターを渡すことができます。この場合は、親 HTML からです。

<group-component input="someModel">
</group-component>

Answer 2

templateUrlテンプレートファイルへのパスです。

例えば

app.component('myview', {
  bindings: {
    items: '='
  },
  templateUrl: 'mycollection/view.html',
  controller: function ListCtrl() {}
});

view.html

<h1> Welcome to this view </h1>

上記の例に示すように、ディレクトリview.html内にファイルが必要ですmycollection。