Angular UI Routing and Components

Angular UI Router は、Angular コンポーネントへのルーティングのサポートを徐々に統合しています。 この投稿では、それが便利な理由と、Angular UI Router 0.x.x と 1.0.0-beta.x の両方のバージョンを使用してそれを行う方法について説明します。

背景

バージョン 1.5 の Angular コンポーネントの導入により、動作とビューのスタンドアロン、再利用可能なセットというコンセプトは、以前ディレクショナルで行っていたよりも簡単に定義することができるようになりました。 これらの変更には、スコープの抽象化、コントローラへの明示的なバインド、コントローラへのライフサイクル フックの提供、および他のいくつかの点が含まれます。

これにより、ビューおよびアプリケーション全体のコンポーネント化がより容易になりました。

その結果、コンポーネントへのルーティングが望ましい動作となりました。

Smart vs Dumb Components

UI ルーターによるコンポーネントへのルーティングを掘り下げる前に、賢いコンポーネントと馬鹿なコンポーネントの概念について説明する必要があります。 これは、そのコントローラーにおいて、通常、コンポーネントの初期化時にサービス呼び出しを行うことを意味します。 呼び出しを行うために何が必要で、API から期待すべき応答は何かを知っています。

一方、渡されたオブジェクトまたは値で何を行うか、どのインタラクションに責任があるかを知っているダム コンポーネントがあります。 これは通常、いかなるサービスとも相互作用しません。 ほとんどのインタラクションは、スマート コンポーネントによって使用される情報を渡すために親コンポーネントへのコールバックとなるか、純粋にディスプレイの変更に関連します。 スマート コンポーネントは、高レベルから完全なアプリケーションを構築するには最適ですが、あまりカスタマイズできません。

コンポーネントをダムにする最善の方法は、コントローラから API 呼び出しを削除し、ある種のバインディングを介してそのデータを提供する方法を見つけることです。 これは、スマートなコンポーネントが必要とする同じデータをすでに持っているが、そのためにサーバーに 2 回アクセスしたくない場合に便利です。

Writing an Application as a Component

コンポーネント化アプリケーションへの移行に伴い、アプリケーションの見方に関する意識の変化がありました。 アプリケーション全体をコンポーネントとして見ることができるのです。 これは実際に実用的なケースである。 たとえば、アプリケーションをコンポーネントとして記述すると、スタンドアロンの Web アプリケーションを、潜在的にはハイブリッド Web コンテナに入れ、そこからモバイル アプリケーションを作成することが可能になります。 これは時に困難ですが、アプリケーションの状態に基づいて
コンポーネントをスワップアウトすることで、大きな柔軟性を得ることができます。 この例は次のようになります。

明らかに、これは機能しますが、各状態が、属性を持たない単一の HTML 要素で宣言されている場合、面倒になり始めます。

許可された、そのコンポーネントに関するすべての論理と表示は分離されて再使用可能です。 たとえば、ナビゲーション テンプレートで myComponent をラップすることに決めた場合、テンプレートから新しいコンポーネントを生成することなく、このように同じ状態をセットアップしていました。

これに対する 1 つの可能な答えは、コンポーネントが機能するために必要なデータをルートから解決し、コンポーネントのバインディングを介してコンポーネントにそれをバインドすることです。 これを行うには 2 つのアプローチがあります。

1. Dumb コンポーネントをラップするスマート コンポーネントを作成します。 スマート コンポーネントの唯一の目的は、サービス呼び出しを行い、ダム コンポーネントに適切にバインドすることです。
2. UI ルーターで提供される resolve 機能を使用して、データをダム コンポーネントに直接 resolve します。 スマート コンポーネント ラッパーを使用すると、保守するコンポーネントが追加されます。 UI ルーターを使用してコンポーネントに解決する場合、ルーターの能力に自分自身を縛り付けることになり、例外処理を管理することもより困難になります。

   とはいえ、UI ルーターのバインディングを介してルート可能コンポーネントを作成することは非常に簡単で、UI ルーターは十分に強力で、プロジェクトにあれば、アプリケーションを完全に書き直すまでそこに留まる可能性があるという点に優れた機能性を提供します。

   UI ルーターの安定版 (0.x.x) でコンポーネントにバインドするには、UI ルーターは ui-view のコンテンツをコンパイルするために使用したコンテキストで $resolve オブジェクトを作成します。

   これを使用して、状態定義の template プロパティでコンポーネント宣言にバインドすることができます。 6198>

   Binding to Components – 1.0.0-beta.x

   [email protected] のリリースでは、状態定義オブジェクトに component プロパティが追加されました。 これにより、開発者は angular モジュール上で定義されたコンポーネントに直接バインドできるようになりました。 これまでのように、1 つの要素を含むテンプレートを持つ必要がなくなります。