再利用性の高いAngularJSコンポーネントの作成
Angular用のAngularJSアプリの準備
今日新しいアプリを構築する場合は、Typescript（Angular2+）上に構築されたAngularから始めることができます。 しかし、何千ものAngularJS（Angular1.X）アプリはまだ生産中ですが、AngularJSはまだどこにも行きません。 実際、AngularJSはまだチームからの継続的な開発とサポートを見ています。
**更新**
Angularは現在v6にあり、大規模な本番アプリに適しています。 今日新しいアプリを構築する場合は、Angular6+を参照してください。
Angular
で再利用可能性の高いコンポーネントを作成するための新しいガイドをチェックしてください
開発者は、angularjs周辺の豊富な開発者コミュ AngularJSでアプリを作成する理由はいくつかあります。 Ng1アプリをng2+に移行することがレーダー上にある場合は、アプリのコンポーネント化を移行の前提条件とすることを検討してください。
1.5以降の新機能。xは遡及的に追加され、主にコンポーネントと一方向のデータバインディングのサポートが追加されました。 これらの機能を最大化して、新しいAngularjsフレームワークに近い位置に配置するAngularJSアプリケーション用の再利用可能なコンポーネントを作成する方法を見ていき
コンポーネント組織
コンポーネントこれで迷子になりやすい、コンポーネントその騒動。 理解すべき最も重要な部分の1つは、どのコンポーネントが何に責任を負うべきかです。
共通のタスクの世話をするために再利用可能なまたは”ダム”コンポーネントを利用しながら、ビューの背後にある駆動力としてページレベルのコンポーネ
これは、すべてのルーチンコードと機能を再利用可能なチャンクにカプセル化しながら、単一のコンポーネントにページ固有のロジックを保持します。
私が見た最大の間違いの一つは、データを変更したり、非常に特定のユースケースを想定したり、あらゆる場所でサービスを介して通信したりする子コンポーネ これにより、最終的には理解/テストが難しくなり、特定のユースケースにハードコードされるようになるため、再利用できなくなります。
初めて”こんにちは世界”コンポーネント
最も簡単な成分で、今のようなものです。 これらのディレクティブがどれほど似ているかに注目してください。
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
ディレクティブはまだ開発者に利用可能であることは注目に値します。 コンポーネントに対してtemplateディレクティブを使用したいというまれな状況がいくつかあります。 おそらくあなたがコンパイルまたはリンクフェーズに依存していた場合…. しかし、ディレクティブは、コンポーネントに他の機能を追加するための属性として使用する必要があります…例えば、コンポーネントがユーザーに利用可能であるかどうかに応じて、パーミッションベースのセキュリティを追加したいと思ったかもしれません。
アプリをコンポーネントのツリーとして構築したいとします。 コンポーネントとディレクティブの詳細については、AngularJS docsを参照してください。 ディレクティブは、コンポーネントを強化するために使用されるテンプ
バインディングオプション
コンポーネントパラメータはbindingsプロパティを介して渡されます。 ディレクティブのスコープ変数を割り当てる古い方法と同様です。
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
コンポーネント通信
メッセンジャーアプリを作っているとします。 メインビューは、再利用可能な連絡先リストコンポーネントを持つページレベルコンポーネントです。 アプリケーションの他の領域で連絡先リストコンポーネントを使用したいので、これをできるだけ再利用可能にすることが重要です。
連絡先リストコンポーネントには単一の目的があります。 サーバーから利用可能な連絡先のリストを表示し、選択した内容を出力します。
messengerコンポーネントは、連絡先リストコンポーネントから行われた選択を受け入れ、受信者リストに追加する必要があります。
