monacaでOnsen UI とJavaScriptテンプレートを使ってSPAをつくっています。
pushPageでページを遷移するとき、別のhtmlファイルを用意してそのファイルにindex.htmlと同じようなtemplateを使用したいのですが、やり方が分かりません。
index.htmlでtemplateを使用すると動くのですが、page2.htmlを別のファイルで用意すると
Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element
このエラーがでて遷移できません。
index.htmlにtemplateを使用するコード(動く)
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap:
https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
document.addEventListener("init", function (event) {
if(event.target.id=='first-page'){
myNavigator = document.getElementById("myNavigator");
}
});
</script>
</head>
<body>
<ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
<ons-page id="first-page">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<div class="content" style="text-align: center">
<p>This is the first page.</p>
<ons-button id="push-button" onclick="myNavigator.pushPage('page2.html')">Push page</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page id="second-page">
<ons-toolbar>
<div class="left"><ons-back-button>Page 1</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<ons-button id="push-button" onclick="myNavigator.pushPage('pageA.html')">Push page<br>A</ons-
button>
</ons-list-item>
<ons-list-item>
<ons-button id="push-button" onclick="myNavigator.pushPage('pageB.html')">Push page<br>B</ons-
button>
</ons-list-item>
<ons-list-item>
<ons-button id="push-button" onclick="myNavigator.pushPage('pageC.html')">Push page<br>C</ons-
button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="pageA.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>pageAです</p>
</ons-page>
</ons-template>
<ons-template id="pageB.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>pageBです</p>
</ons-page>
</ons-template>
<ons-template id="pageC.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>pageCです</p>
</ons-page>
</ons-template>
</body>
</html>
page2.htmlを別のファイルで用意する。(動かない)
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap:
https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-
eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
document.addEventListener("init", function (event) {
if(event.target.id=='first-page'){
myNavigator = document.getElementById("myNavigator");
}
});
</script>
</head>
<body>
<ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
<ons-page id="first-page">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<div class="content" style="text-align: center">
<p>This is the first page.</p>
<ons-button id="push-button" onclick="myNavigator.pushPage('page2.html')">Push page</ons-
button>
</div>
</ons-page>
</ons-template>
</body>
</html>
page2.html
<ons-template id="page2.html">
<ons-page id="second-page">
<ons-toolbar>
<div class="left"><ons-back-button>Page 1</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<ons-button id="push-button" onclick="myNavigator.pushPage('pageA.html')">Push page<br>A</ons-button>
</ons-list-item>
<ons-list-item>
<ons-button id="push-button" onclick="myNavigator.pushPage('pageB.html')">Push page<br>B</ons-button>
</ons-list-item>
<ons-list-item>
<ons-button id="push-button" onclick="myNavigator.pushPage('pageC.html')">Push page<br>C</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="pageA.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>pageAです</p>
</ons-page>
</ons-template>
<ons-template id="pageB.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>pageBです</p>
</ons-page>
</ons-template>
<ons-template id="pageC.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>pageCです</p>
</ons-page>
</ons-template>
page2.htmlを別のファイルで用意するときはで囲めばできますが、それだと大量のhtmlファイルを作らなければならないのでpage2.htmlにtemplateを使用したいです。
試したこと
複数のhtmlファイルとons-templateを併用するとうまく動かない
ページを別ファイル化した時のons-templateについて
この二つのページを参考にして
<ng-include src="page2.html"></ng-include>
をbodyタグの下に書きましたが動きませんでした。
AngularやVueなどのフレームワークを使わないで動かす方法はありますか?
よろしくお願いします。