Angular プロバイダーでのコンポーネントの再利用

Angular プロバイダーは、複数のウィジェットに挿入できる再利用可能なコンポーネントです。ウィジェットのすばやいロードとポータルの高いパフォーマンスを確保するため、永続データと追加ロジックを使用してクライアントコントローラーをオーバーロードする代わりに Angular プロバイダーを作成します。Angular プロバイダーを使用すると、 サービスポータル の有効期間中データを保持し、複数のウィジェット間でコンポーネントとデータオブジェクトを再利用できます。

始める前に

必要なロール：admin または sp_admin

このタスクについて

Angular プロバイダーを作成すると、次のことができます。

• レコードまたはフィルターを変更するときにウィジェットの同期を維持します。
• ウィジェット間でコンテキストを共有します。
• ステータスを維持して保持します。
• 動作を作成し、複数のウィジェットに挿入します。

詳細については、「 Angular プロバイダー」を参照してください。

ヒント:

メンテナンスとトラブルシューティングを容易にするために、ウィジェット [sp_widget] テーブルの [Angular プロバイダー] 関連リストから未使用のプロバイダーを削除します。

手順

1. 移動先 すべて > サービスポータル > サービスポータル構成 > ポータルテーブル > ウィジェット Angular プロバイダー.
   [ウィジェット Angular プロバイダー] テーブルが開きます。
2. [新規] をクリックして、新しいレコードを作成します。
3. Angular プロバイダーのタイプを選択します。
   • ディレクティブ
   • ファクトリ
   • サービス
   ECMAScript 6 以降への移行を容易にするには、ファクトリよりもサービスの使用を検討してください。
4. 名前を定義します。
   名前を使用して、プロバイダーをウィジェットに関連付けます。
5. [ クライアントスクリプト ] フィールドにスクリプトを追加します。

   数値を米国通貨で書式設定する基本的なファクトリ。

   function formatterFactory(){
     var myVal = Number;
     return {
       format: function(myVal) {
         return '$' + myVal.toFixed(2);
       }
     }
   }

6. Angular プロバイダーをウィジェットに関連付けます。
   1. <yourInstanceURL>/sp_config?id=widget_edit に移動します。
   2. Angular プロバイダーに関連付けるウィジェットを開きます。
   3. [関連リスト] で、[Angular プロバイダー] を選択します。
   4. [ Angular プロバイダー ] リストで、[ 新規] をクリックします。
   5. [ 角度プロバイダー ] フィールドで、適切なプロバイダーを選択します。
   6. [ ウィジェット] フィールドをチェックして、Angular プロバイダーを正しいウィジェットに関連付けていることを確認します。
   7. [保存] をクリックします。
7. ウィジェットの適切なスクリプトを更新して、Angular プロバイダーをウィジェットに挿入します。

   クライアントコントローラー関数でファクトリの名前を引数として渡して、ファクトリをウィジェットクライアントスクリプトに挿入します。その後、ウィジェットクライアントスクリプトのファクトリ関数で定義されたオブジェクトにアクセスできます。

   function(formatterFactory) {
     /* widget controller */
     var c = this;
     console.log(formatterFactory.format(300));
   }

   ディレクティブを定義する場合は、ウィジェット HTML テンプレートでディレクティブを使用します。

8. ウィジェットに登録した後に Angular プロバイダーを編集するには、ウィジェットエディターで Angular プロバイダークライアントスクリプトを開きます。
   1. 移動先 サービスポータル構成 > ウィジェットエディター.
   2. [ 既存のウィジェットを編集] で、Angular プロバイダーに関連付けられているウィジェットを選択します。
   3. [ 表示 ] メニューから [ 依存関係 ] リストを開き、Angular プロバイダーを選択します。
      注:

      ウィジェットに関連付けられた Angular プロバイダーのみが [依存関係 ] リストに表示されます。このリストには、ウィジェットが依存している外部リソースが含まれています。
      Angular プロバイダークライアントスクリプトがウィジェットエディターに表示されます。ウィジェットエディターインターフェイスでは、ウィジェットとプロバイダースクリプトを同時に編集および保存できます。

次のタスク

複数のウィジェットで Angular プロバイダーを使用するには、各ウィジェットにプロバイダーを登録し、適切なスクリプトを更新します。