2017-01-18 2 views
0

注:この記事は、AngularとJavaでより多くの経験を積んだ後に変更しています。これは新しい質問を投稿しないようにするためです。AngularJSコード内でのJSP Cタグの使用

JSPモデル内で再利用可能なAngularJS部品を実装するために、異なるモデルを使用して作業し、最終的にjspインクルード指示文<%@include file="form-part.jsp" %>を使用することに決めました。これはうまく動作し、唯一の問題はC Tagsを使用したときの可読性の問題です。

リソースファイル(の.properties):

formhtml5.jsp.photoSubjectFront=Subject Front 
formhtml5.jsp.photoSubjectStreet=Subject Street 
formhtml5.jsp.photoSubjectRear=Subject Rear 

その後に、角度、一つの方法で上記の変数を使用するために次のように

たとえば、変数は、Eclipseリソースファイルに定義され

HTML、JSPファイルに

<fmt:message key="formhtml5.jsp.photoSubjectFront" scope="request" var="photoSubjectFront"/> 
<fmt:message key="formhtml5.jsp.photoSubjectStreet" scope="request" var="photoSubjectStreet"/> 
<fmt:message key="formhtml5.jsp.photoSubjectRear" scope="request" var="photoSubjectRear"/> 
... 
... 
<div class="photos-container" 
    ng-init="subjectPhotos = 
          [{fieldName:'subject_front', 
           title:'${photoSubjectFront}'}, 
          {fieldName: 'subject_street', 
           title: '${photoSubjectStreet}'}, 
          {fieldName: ''subject_rear, 
           title: '${photoSubjectRear}'} 
          ]"> 
... 
... 
</div> 
:私は次のように(あなたはJSPファイル内の変数名を使用しなければならないので)であるを発見しました0

ご存知の方は、上記のHTMLコードブロックはあまり読みにくいものではありません。

アレイ変数subjectPhotosを初期化し、初期化時にJSP変数${photoSubjectFront}を使用する最良の方法は何ですか?

私はそれがもっと読むことができる<script>ブロックでこれを行うことができると思っていましたが、通常のスクリプトブロック内のスコープ変数にはアクセスできませんでした。

フィードバックをお寄せください。

オールドポスト:

は、私は過去3〜4ヶ月のアンギュラ使用してベースのアプリケーションのフォームを開発してきました。私は、開発したフォーム(HTML5 + Script)を再利用可能なコンポーネントや部品に変換できるように、次の段階に移行する準備をしています。開発は、Eclipse、Java(JSP + Servlets)、もちろんHTML5、JavaScript(Angular)、CSSを使用して行われました。

これまで、ASP.NET、マスターページ、ユーザーコントロールを使用して成功しました。

私が探しているのは、HTML5とコードの両方にモジュール化された再利用可能なフォームパーツを作成する方法です。レイアウトとロジックのわずかな変更で同じ部分を持つ別のフォームで簡単に再利用できるようにします。

私は現在、コードに対してのみ行っています。私は角度指令、サービス、およびコントローラを開発しましたが、これは実際には再利用性に関して私の期待に応えています。唯一の問題は、HTML5(レイアウト)を再利用可能にする方法です。

私はいくつかの研究を行ってきたと私はいくつかのオプションを一覧表示することができます:ASP.NETマスターページの場合と同様である

  1. 使用するJavaベースのフレームワークを。私はいくつかのオプションを見つけました。

  2. 角度指令とテンプレートを使用します。ここでの問題は、HTML部分を表す非常に長い文字列を作成する必要があることです。これは混乱していると思います。私は、再利用可能なHTML部分を別のファイルに保存し、それを指示文などに含める方法があることを願っています。

  3. JSPを使用して再利用可能な部分を開発し、メインフォームに組み込みます。 jspインクルードディレクティブ<%@include file="form-part.jsp" %>を使用して、再利用可能なフォーム部分を含めることができます。

私は、最も適切なものを選択するための可能な選択肢を評価しています。

この要件を達成するのに役立つサンプルやチュートリアルを教えてください。

注:私は良いと判断したtutorialこれは素晴らしいスタートになります。

フィードバックをお寄せください。

タレクは

+0

代わりにああHTML文字列、パストンを提供することができますoディレクティブ/コンポーネントの 'templateUrl'プロパティを使ってhtmlファイルを作成します。 – Developer

答えて

0

あなたが今どのangular2を話している場合は、angularjsまたはangular.ioは、コンポーネントを使用しています。

コンポーネントの開始を生成するために、コンポーネントを生成するために、angular-cli useを使用してください。

+0

Angular2はまだ100%成熟しておらず、Angularjsほど広く使われていないので、Angular2を使わないことに決めました。また、私がAngular2の学習を始めたとき、それはAngularjsよりも難しいようでした。 – tarekahf

1

再利用可能なフォームを開発する最善の方法は、html templateUrlを使用するディレクティブです。 あなたはおそらく、それは特別な検証を使用することになるとあなたも検証を作成するためのディレクティブを使用し

return { 
      replace: true, 
      templateUrl: 'some_form_template.html', 
      // template: '<div>Hello World</div>' 
} 

「テンプレート」機能を使用している:それは低迷エラーになるhttp://ng-learn.org/2014/02/Writing_Custom_Validitions/

場合はNG-のメッセージを使用してください/ ngのメッセージのディレクティブ:この質問はすでにasnwerdされているhttps://docs.angularjs.org/api/ngMessages/directive/ngMessages

:template` `でHow to create a angular input directive that works with form validation

+0

ありがとう!はい、 'templateUrl'は間違いなく良い選択です。 'templateUrl'を使って再利用可能なフォームパートを実装しているデモやサンプルを見せてくれれば幸いです。 – tarekahf

関連する問題