Sorry for the delay,
Now I have a sample to show, as you can see this app works fine without AngularJS but everything together in one index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/onsenui.min.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('main.html')" tappable>
Main
</ons-list-item>
<ons-list-item onclick="fn.load('products.html')" tappable>
Products
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="main.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="main.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
This is the main page!
</p>
</ons-page>
</ons-template>
<ons-template id="products.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Products
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Products here...
</p>
</ons-page>
</ons-template>
<script src="app.js"></script>
</body>
</html>
app.js file:
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
But I need separate files: one file for main.html and another for products.html so what should I do to override templates inside the index.html in order to include separate HTML files?
Thank you