2017-02-20 22 views
1

Я хотел бы встроить свое приложение Aurelia в папку ресурсов моего приложения Spring Boot и загрузиться/увеличить страницу вручную. Пучок Аурелии образуется с аурелия-кли. В документах http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4 приведены примеры для скелетов JSPM и webpack. Как добиться ручного запуска/прогрессивного улучшения с помощью aurelia-cli?Ручная загрузка приложения aurelia с aurelia-cli

Как должны выглядеть мои main.js? Где я должен включать мои app-bundle.js и vendor-bundle.js?

Edit: я достиг рабочий пример, в том числе что-то вроде этого:

<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> 

Но можно включить скрипты в Lets говорят в <head> и повышения <div aurelia-app="main"> на DOMContentLoaded событие?

+0

Вы должны на самом деле добавить 3rd приложение партии к 'aurelia.json' файла. Предпочтительно он попадает в раздел «зависимостей» ниже всех зависимостей «aurelia- *», но если у вас есть трудности, он может также попасть в раздел «preend». – LStarky

+0

@LStarky Спасибо за ваш ответ. Я стараюсь сделать себя более сильным. У меня есть страница index.html с содержанием не-aurelia, и одним тегом этой страницы должно быть мое приложение aurelia. И я хочу загрузить это приложение вручную. Как мне это достичь? – loaded02

ответ

2

Я вручную загрузил приложение aurelia-cli, подобное этому. Здесь я использую службу полиполнения с помощью первого тега скрипта. Этот скрипт запускается и загружает отсутствующие полисы для браузера. После этого он вызывает функцию обратного вызова. Эта функция обратного вызова добавляет скрипт вендора поставщика.

<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>