Using JSP C Tag within AngularJS code

问题

Note: I am modifying this post, after I gained more experience working with Angular and Java. This is to avoid posting a new question.

Over the past few months, working with different models to implement reusable AngularJS parts within a JSP code, finally decided to use the jsp include directive <%@include file="form-part.jsp" %>. This works well, and the only issue now is readability problem when using C Tags.

For example, the variables are defined in Eclipse resource file as follows:

Resource File (.properties):

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

Then, in order to use the above variables in Angular, one way I found is as follows (since you must use the variable name inside the JSP file):

HTML in JSP File

<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>

If you notice, the above HTML code block is not very readable.

What is the best way to initialize the array subjectPhotos scope variable and use the JSP variable ${photoSubjectFront} in the initialization?

I was thinking if I can do that in a <script> block which is much more readable, but I was not sure to access the scope variable inside a normal script block.

Appreciate your feedback.

Old Post:

I've been developing forms based applications using Angular for the past 3-4 months. I am preparing to move into next stage so that I can convert the developed form (HTML5 + Script) into reusable components or parts. The development was done using Eclipse, Java (JSP+Servlets) and of course, HTML5, JavaScript (Angular) and CSS.

In the past, I've done that successfully using ASP.NET, Master Pages and User Controls.

What I am looking for is a way to create modular and reusable form parts for both HTML5 and Code so that they can be easily reused in another form that has the same part with probably minor changes in layout and logic.

I am currently doing that but only for code. I managed to develop Angular Directives, Services, and Controllers which are actually working up to my expectations in terms reusability. The only issue now is how to make the HTML5 (layout) also reusable.

I've done some research and I can list some options:

1. Use Java based framework which is similar to that of ASP.NET Master Pages. I've found several options.

2. Use Angular directives and templates. The problem here is that you have to compose a very long string which will represent the HTML part. It think this is confusing. I hope there is a way to save the reusable HTML part in a separate file and include it in the directive or something like that.

3. Use JSP to develop the reusable part, and include it in the main form. I can use the jsp include directive <%@include file="form-part.jsp" %> to include the reusable form part.

I am evaluating the possible options to select the most appropriate one.

I hope you can point me to some sample or tutorial that will help me achieve this requirement.

Note: I found good tutorial which will be an excellent start.

Appreciate your feedback.

Tarek

回答1:

The best way to develop a reusable form is a directive using html templateUrl. You are probably using the the 'template' feature

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

When it comes to using special validation you also use directives to create validations: http://ng-learn.org/2014/02/Writing_Custom_Validitions/

When it comes to flagging errors please use the ng-messages/ng-message directives: https://docs.angularjs.org/api/ngMessages/directive/ngMessages

This question has already been asnwerd: How to create a angular input directive that works with form validation

回答2:

If your talking angular2 which is now angularjs or angular.io use a component.

take a look at angular-cli use ng generate component yourform to generate the start of a component.

来源：https://stackoverflow.com/questions/41725045/using-jsp-c-tag-within-angularjs-code