AngularJS
コンポーネント
サーチ…
パラメーター
| パラメータ | 詳細 |
|---|---|
| = | 双方向データバインディングを使用する場合。つまり、コンポーネントスコープでその変数を更新すると、その変更が親スコープに反映されます。 |
| < | 親スコープから値を読み取り、それを更新しない場合の一方向バインディング。 |
| @ | 文字列パラメータ。 |
| そして、 | コンポーネントが親スコープに何かを出力する必要がある場合のコールバック。 |
| - | - |
| ライフサイクルフック | 詳細 （angular.version> = 1.5.3が必要） |
| $ onInit（） | 要素のすべてのコントローラが構築され、バインディングが初期化された後に、各コントローラで呼び出されます。これはあなたのコントローラの初期化コードを置くのに適しています。 |
| $ onChanges（changesObj） | 片方向バインディングが更新されるたびに呼び出されます。 changesObjは変更されたバウンドプロパティの名前をキーとするハッシュで、値は{ currentValue, previousValue, isFirstChange() }の形式のオブジェクトです。 |
| $ onDestroy（） | スコープを含むスコープが破棄されたときにコントローラ上で呼び出されます。このフックを使用して、外部リソース、ウォッチ、イベントハンドラを解放します。 |
| $ postLink（） | このコントローラの要素とその子要素がリンクされた後に呼び出されます。このフックは、Angular 2のngAfterViewInitフックとngAfterContentInitフックに似ています。 |
| $ doCheck（） | ダイジェストサイクルの各ターンで呼び出されます。変更を検出して対応する機会を提供します。検出した変更に応じて実行するアクションは、このフックから起動する必要があります。 $ onChangesが呼び出されたときにこれを実装しても効果はありません。 |
備考
コンポーネントは、コンポーネントベースのアプリケーション構造に適した、よりシンプルな構成を使用する特殊なディレクティブです。コンポーネントはAngular 1.5で導入されましたが、このセクションの例は古いAngularJSバージョンでは機能しません 。
コンポーネントに関する完全な開発者ガイドはhttps://docs.angularjs.org/guide/componentに掲載されています
基本コンポーネントとライフサイクルフック
コンポーネントとは何ですか？
- コンポーネントは、基本的に、より簡単な構成を使用し、Angular 2のすべてであるコンポーネントベースのアーキテクチャに適したディレクティブです。コンポーネントをウィジェットと考える：Webアプリケーションのいくつかの異なる場所で再利用できるHTMLコード。
成分
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
マークアップ
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
コンポーネントでの外部データの使用：
コンポーネントに名前を渡すパラメータを追加すると、次のように使用されます。
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
マークアップ
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
コンポーネントでのコントローラの使用
コントローラーを追加する方法を見てみましょう。
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
マークアップ
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
コンポーネントに渡されるパラメータは、 $onInit関数がAngularによって呼び出される直前にコントローラのスコープで使用できます。この例を考えてみましょう。
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
上のテンプレートでは、これは "Hello John、私はMacJohnです！"と表示されます。
$ctrlは、指定されていない場合、 controllerAs Angularデフォルト値です。
オブジェクトとして「require」を使う
場合によっては、コンポーネント内の親コンポーネントからデータにアクセスする必要がある場合があります。
これは、コンポーネントに親コンポーネントが必要であることを指定することによって実現できます。必要コンポーネントは、必要なコンポーネントコントローラへの参照を提供し、コントローラで使用することができます（下の例を参照）。
必要なコントローラは、$ onInitフックの後でのみ準備ができていることに注意してください。
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
しかし、これは子供と親の間の緊密なつながりを作り出すことに注意してください。
角度JSのコンポーネント
angularJSのコンポーネントはカスタムディレクティブ（HTMLディレクティブでは<html>これはカスタムディレクティブ<ANYTHING>となります）として視覚化できます。コンポーネントには、ビューとコントローラが含まれています。コントローラには、ユーザーが見るビューにバインドされたビジネスロジックが含まれます。構成要素の構成が少ないため、構成要素は角度指示とは異なります。このように角度成分を定義することができます。
angular.module("myApp",[]).component("customer", {})
コンポーネントは角度モジュールで定義されます。これらは2つの引数を含みます.1つはコンポーネントの名前で、もう1つはキー値のペアを含むオブジェクトで、これはどのビューとどのコントローラーをこのように使用するかを定義します。
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp"はビルドするアプリケーションの名前、customerはコンポーネントの名前です。これをメインのhtmlファイルで呼び出すために、このように記述します
<customer></customer>
このディレクティブは、指定したビューとコントローラに書き込んだビジネスロジックで置き換えられます。
注：ディレクティブは引数としてファクトリ関数を取る一方、コンポーネントは第2引数としてオブジェクトを取ることを覚えておいてください。