thymeleafとangular 4を一緒に使う方法は？

私はthymeleafと一緒に角度を混ぜようとしていましたが、私は道を見つけることができませんでした。誰でも私がこの混乱を取り除くのを助けることができます！thymeleafとangular 4を一緒に使う方法は？

2017-08-04 Mohamed Miledi

あなたはいくつかのangular4、thymeleafを知っていて、あなたがspring-bootというタグを付けていると仮定して、thymeleafのために設定されたspringブートアプリケーションを仮定します。

通常、spring-bootはsrc/main/resources/staticの静的リソース（css、javascript、..）を探します。

thymeleafのスプリングブートセットアップは、テンプレートをsrc/main/resources/templatesから解決します。

は次にくるものが非常に単純な一つのアプローチである、angular4コードを含むための多くのオプションがあり、以下の

次の規則を打ち出しJavaスクリプトコードやディレクトリを示す典型的な春のブートレイアウトを構築するために使用されるトップレベルの角度プロジェクトです

あなたはsrc/main/resources/static/jsディレクトリにコピーしてJavaスクリプトの束を構築していた後。私は、プロダクションビルドバンドルを使用していないので、何が起こっているのかを簡単に示すことができますが、プロダクションビルドと同じアプローチをとることになります。

thymleafビューを作成して、タイムリーフレイアウトに挿入します。ここ<demo-app> ... /静的/ 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>

輸入は角度成分のためのセレクタです。

これが最も簡単な方法で、あなたはGradleのを使用した簡単なアプローチのproxy.conf.json
コードを設定する必要がありますdevseverとの角度のコードを開発するためのツール、frontend-maven-pluginとgradle-node-plugin
を使用することができますここで見つけることができますsimple code
注意：タイメリーフの表示を解決するにはSpringBootServletInitializer
というメモを設定してください。gradle.propertiesにthymeleafの設定を宣言すると、mavenのプロパティと同様のことができます。

ノート
angular production build
thmeleaf fragments
thmeleaf dialects
spring boot conventions

出典

2017-08-21 16:34:49

thymeleafとangular 4を一緒に使う方法は？

答えて

関連する問題