在 AngularJS 代码中使用 JSP C 标记

Question

注意：在获得更多使用 Angular 和 Java 的经验后，我正在修改这篇文章。这是为了避免发布新问题。

在过去的几个月里，使用不同的模型在 JSP 代码中实现可重用的 AngularJS 部分，最终决定使用 jsp 包含指令<%@include file="form-part.jsp" %>。这很好用，现在唯一的问题是使用C Tags 时的可读性问题。

例如，Eclipse资源文件中的变量定义如下：

资源文件（.properties）：

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

那么，为了在Angular中使用上述变量，我找到的一种方法如下（因为必须在JSP文件中使用变量名）：

JSP 文件中的 HTML

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

如果你注意到，上面的 HTML 代码块不是很可读。

初始化数组subjectPhotos范围变量并在初始化中使用JSP变量${photoSubjectFront}的最佳方法是什么？

我在想是否可以在可读性更高的 <script> 块中执行此操作，但我不确定是否可以访问普通脚本块中的范围变量。

感谢您的反馈。

旧帖：

在过去的 3-4 个月里，我一直在使用 Angular 开发基于表单的应用程序。我正准备进入下一阶段，以便将开发的表单（HTML5 + Script）转换为可重用的组件或部件。开发使用 Eclipse、Java (JSP+Servlets)，当然还有 HTML5、JavaScript (Angular) 和 CSS。

过去，我使用 ASP.NET、母版页和用户控件成功地做到了这一点。

我正在寻找一种为 HTML5 和代码创建模块化和可重复使用的表单部件的方法，以便它们可以轻松地在具有相同部件的另一个表单中重复使用，并且布局和逻辑可能会发生细微的变化。

我目前正在这样做，但仅用于代码。我设法开发了 Angular 指令、服务和控制器，它们实际上在可重用性方面达到了我的期望。现在唯一的问题是如何使 HTML5（布局）也可重用。

我做了一些研究，我可以列出一些选项：

1. 使用类似于 ASP.NET 母版页的基于 Java 的框架。我找到了几个选项。

2. 使用 Angular 指令和模板。这里的问题是您必须编写一个非常长的字符串来表示 HTML 部分。它认为这是令人困惑的。我希望有一种方法可以将可重用的 HTML 部分保存在单独的文件中，并将其包含在指令或类似的东西中。

3. 使用JSP开发可复用部分，并包含在主窗体中。我可以使用 jsp 包含指令 <%@include file="form-part.jsp" %> 来包含可重用的表单部分。

我正在评估可能的选项以选择最合适的选项。

我希望你能给我一些示例或教程来帮助我实现这个要求。

注意：我找到了很好的tutorial，这将是一个很好的开始。

感谢您的反馈。

塔雷克

Answer 1

如果你说话的 angular2 现在是 angularjs 或 angular.io，请使用组件。

看看 angular-cli 使用 ng generate component yourform 来生成一个组件的开始。

Answer 2

开发可重用表单的最佳方法是使用 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-messages/ng-message 指令：https://docs.angularjs.org/api/ngMessages/directive/ngMessages

这个问题已经回答了：How to create a angular input directive that works with form validation