vaadin：使用自定义布局集成 Angular js答案

【问题标题】：vaadin: integrate angular js using custom layoutvaadin：使用自定义布局集成 Angular js
【发布时间】：2016-05-17 10:00:27
【问题描述】：

我尝试使用这样的自定义布局在 vaadin 中集成 angular js 应用程序：

VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setMargin(true);
    mainLayout.setWidth("1380px");
    setCompositionRoot(mainLayout);
    Panel panel = new Panel();

    CustomLayout layout = null;
    try {
         String dynamicHtml = "<div ng-app=\"app\">..........</div>";
         layout = 
      new CustomLayout(new   ByteArrayInputStream(dynamicHtml.getBytes()));
    } catch (IOException e) {
        logger.error("could not create custom layaout", e);
    }
 panel.setContent(layout);
 mainLayout.addComponent(panel);
importJs();

public void importJs() {
String PATH_TO_JS_SCRIPT = jsURL+"?tata=" + new Date();
String script = "try{var fileref=document.createElement('script');";
script += "fileref.setAttribute(\"type\",\"text/javascript\");";
script += "fileref.setAttribute(\"src\", \"" + PATH_TO_JS_SCRIPT + 
    "\");";
script += "document.getElementsByTagName(\"head 
\")[0].appendChild(fileref);}catch(e){alert(e);}";
Page.getCurrent().getJavaScript().execute(script);
}

我使用 importJs 方法导入脚本 js。我第一次访问该页面时，会加载 js 文件并且它可以工作。第二次，它不起作用。好像没有导入脚本。我看不出我的代码有什么问题？使用 Javascript 注释我有同样的问题。我用 vaadin 7.6.5 java 7

【问题讨论】：

标签： javascript java angularjs vaadin

【解决方案1】：

在 CustomLayout 中插入角度代码是个坏主意。

我建议阅读文本：Vaadin and AngularJS - happy together。

有一个插件可以让你结合 Vaadin 和 AngularJS 的优点：Vaangular

【讨论】：

感谢您的回答。我已经读过关于 Vaangular 的文章。我试过了。但这取决于 java 8。我使用的是 java 7。
无论如何 CustomLayout 都帮不了你。您还可以尝试将 Angular 组件与vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html 中所述的任何其他 java 脚本组件集成。此外，我不完全确定 Vaangular 是否仅与 java 8 兼容。你确定吗？

【解决方案2】：

Js 文件在页面的生命周期中仅包含一次且仅包含一次。每次显示我使用的页面时执行此脚本：

  if(typeof angular != 'undefined'){
       angular.bootstrap(document.getElementById('swdId'), ['app']);"
   }

问题已解决

【讨论】：