2017-02-20 8 views
1

私はAurelia Appを私のSpring Boot Appのresourcesフォルダに埋め込み、手動でページをブート/強化したいと思います。 Aureliaバンドルはaurelia-cliで生成されます。ドキュメントのhttp://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4はJSPMとwebpackスケルトンの例です。 aurelia-cliで手動ブートストラップ/プログレッシブエンハンスメントを達成するにはどうすればよいですか?aurelia-cliによるaureliaアプリケーションの手動ブートストラップ

main.jの外観はどうですか? app-bundle.jsとvendor-bundle.jsはどこに含める必要がありますか?

編集: 私はこのような何かを含むことにより、実施例を実現:

<div aurelia-app="main"> 
<script data-main="aurelia-bootstrapper" src="path-to-resources/vendor-bundle.js" type="text/javascript"></script> 
<script src="path-to-resources/app-bundle.js" type="text/javascript"></script> 
</div> 

をしかし<head>で言うとDOMContentLoadedイベントに<div aurelia-app="main">を向上させることができますでスクリプトを含めることが可能ですか?

+0

あなたが実際に 'aurelia.json'ファイルにあなたのサードパーティ製のアプリを追加する必要があります。好ましくは 'aurelia- * '依存関係のすべての下にある' dependencies'セクションに入りますが、難しい場合は 'prepend'セクションにも入ることができます。 – LStarky

+0

@LStarkyご回答いただきありがとうございます。私は自分自身をもっと泣かせようとします。私はそれに非aureliaの内容を持つindex.htmlのページがあり、このページの1つのタグは私のaurelia-appでなければなりません。そして、私は手動でこのアプリをブートストラップします。これをどのように達成するのですか? – loaded02

答えて

2

私は手動でこのようなaurelia-cliアプリをブートストラップしました。 ここでは、最初のscriptタグからpolyfillサービスを使用します。このスクリプトは、ブラウザーの不足しているポリフィルを実行してダウンロードします。その後、コールバック関数を呼び出します。このコールバック関数は、aureliaベンダーバンドルスクリプトを追加します。

<body aurelia-app="main" class="sharry not-selectable no-tap-highlight-color"> 
<div class="app-loding-container"> 
    <img src="/img/logo/sharry_tv_b.png" alt="sharry logo"> 
</div> 
<script src="https://polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement,Intl&callback=polyfillsAreLoaded" defer async></script> 
<script> 
    function polyfillsAreLoaded() { 
     var aureliaScript = document.createElement('script'); 
     aureliaScript.setAttribute('src', '/scripts/vendor-bundle.js'); 
     aureliaScript.setAttribute('data-main', 'aurelia-bootstrapper'); 
     document.body.appendChild(aureliaScript); 
    } 
</script> 

関連する問題