Question

我一直试图将角度与百里香一起混合，但我无法找到方法。任何人都可以帮助我清除这种混乱！

Answer 1

假设你知道一些angular4，thymeleaf和你标记的弹簧靴，假设一个弹簧靴应用配置为百日咳。

按照惯例，spring-boot将在src/main/resources/static中查找静态资源（css，javascript，..）。

按照惯例，为thymeleaf设置的spring-boot将解析来自src/main/resources/templates的模板。

包含angular4代码有很多选项，下面是一个非常简单的方法

下面是一个用于构建java脚本代码的顶级角度项目和一个典型的spring引导布局，显示按照约定布局的目录

构建java脚本包之后，将它们复制到src/main/resources/static/js目录中。我没有使用生产构建包，因为它更容易显示最新情况，但是您将遵循生产构建的相同方法。

你可以制作一个直观的观点来注入百里香的布局。

<head>
    <title>Admin Panel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="js/favicon.ico?v=2">
</head>
<th:block layout:fragment="content">
    <div class="ang-comp">
    <demo-app >Loading...</demo-app>
    </div>
    <script type="text/javascript" src="js/inline.bundle.js"></script>
    <script type="text/javascript" src="js/scripts.bundle.js"</script>
    <script type="text/javascript" src="js/styles.bundle.js"></script>
    <script type="text/javascript" src="js/vendor.bundle.js"></script>
    <script type="text/javascript" src="js/main.bundle.js"></script>
</th:block>

从... / static / js目录导入<demo-app>是角度组件的选择器。

这是最简单的方法，您可以使用工具frontend-maven-plugin和gradle-node-plugin 要使用devsever开发角度代码，您需要设置proxy.conf.json
可以在此处找到使用gradle的简单方法的代码simple code
请注意，要解决百里叶视图，您可以使用SpringBootServletInitializer
请注意，在gradle.properties中声明百万富翁设置，你会对maven属性做类似的事情。

备注
angular production build
thmeleaf fragments
thmeleaf dialects
spring boot conventions

如何一起使用百里香和棱角4？

1 个答案: