自分のビューを作成します¶

ページを検索する. catalog.search サービス。

このサービスは最終的に base-layout-cssjs-loader.xsl (参照されたい) source file web/src/main/webapp/xslt/base-layout-cssjs-loader.xsl )は、正しいHTMLページをロードするロジックを含む。

ビュー·パラメータ¶

パラメータを伝えることができます view 致す catalog.search カスタムビューを指すURL.

パラメータが指定されていない場合、ビュー値は、 system/ui/defaultView 設定されていない場合、値は default それがそうです。

これは $searchView XSLT変数.

<div data-ng-include="'{$uiResourcesPath}views/{$searchView}/templates/index.html'"
    class="gn-full">

ビュー·メイン·テンプレートは、AngularJSコマンドによってロードされます。 ng-include この小道を指します /web-ui/src/main/resources/catalog/views/${{view}}/templates/index.html それがそうです。

デフォルトビューの場合、以下の位置でこのテンプレートを見つけることができます source file web-ui/src/main/resources/catalog/views/default/templates/index.html それがそうです。

AngularJS mainモジュールを初期化するためには、以下のコマンドを使用する必要があります ng-app あなたのメインAngularJSモジュールを指します。

<html ng-app="{$angularModule}" lang="{$lang}" id="ng-app">

ページを検索する場合 (catalog.search )、 $angularApp 変数は等しい gn_search それがそうです。そして私たちは default 確認します。 $angularModule 同等である. gn_search_default それがそうです。

したがって，デフォルトの場合，メインAngularJSモジュールから gn_search_default ここに記載されているモジュール(参照) source file web-ui/src/main/resources/catalog/views/default/module.js それがそうです。

ここから、AngularJSモジュール依存木を構築し、アプリケーションをロードすることができます。

同一論理では，ページにロードされたCSSは gn_search_default.less それがそうです。