UI_Dev UI_Dev - 11 months ago 67
AngularJS Question

How to use multiple html files in onsenui

In OnsenUI it says: "Instead of creating index.html and services.html in separate files, you can also define the page content in the same page."

I don't like to have my whole app in one html file so I tried to put each template into a separate file. This is my file structure:






<!DOCTYPE html>
<html ng-app="app">

<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css" />
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css" />
<script src="https://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="script.js"></script>
angular.module('app', ['onsen']);
.controller('AppController', function($scope) {

<body ng-controller="AppController">
<ons-navigator var="myNavigator">
<ons-button ng-click="myNavigator.pushPage('services.html', { animation : 'slide' } );">Pay</ons-button>


<ons-template id="services.html">
<ons-list-item>Service 1</ons-list-item>
<ons-list-item>Service 2</ons-list-item>
<ons-list-item>Service 3</ons-list-item>


angular.module('app', ['onsen']);

.controller('AppController', function($scope) {
ons.ready(function() {

If I use single html file, it seems to be a performance issue. Here, If I click the button, it won't push to the services.html page. This will work if I use ons-template in the same html file. How can I use multiple html pages here.

Here what I tried..


Answer Source

<ons-template> is only necessary inside index.html, not in a separated file. Delete <ons-template id="services.html"> and </ons-template> from your services.html and it should work. The "id" will be the name of the file.