2017-02-20 60 views
1

我想将我的Aurelia应用程序嵌入到我的Spring Boot应用程序的资源文件夹中,并手动引导/增强页面。 Aurelia束由aurelia-cli产生。在文档http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4是JSPM和webpack骨架的示例。如何通过aurelia-cli实现手动bootstapping /渐进式增强?aurelia-cli手动引导aurelia应用程序

我的main.js应该怎么样?我应该在哪里包含我的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

@Larkarky感谢您的回复。我试图让自己更加佩服。我有一个index.html网页,上面有非aurelia内容,这个网页的一个标签应该是我的aurelia-app。我想手动启动这个应用程序。我如何实现这一目标? – loaded02

回答

2

我手动引导一个像这样的aurelia-cli应用程序。 在这里,我通过第一个脚本标记使用了一个polyfill服务。此脚本运行并为浏览器下载缺少的polyfills。之后它调用回调函数。此回调函数添加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>