複数のhtmlファイルとons-templateを併用するとうまく動かない
monacaクラウドでOnsenUI/AngularJSを使いアプリ制作の勉強中です。
複数の画面があるアプリで、基本的にはhtmlは1ファイルにまとめたいのですが
リリースに含まれるページとデバッグ目的ページなどは分離したいので
2つのhtmlファイルに分けたところ、変な動きをします。
case A
最初はdebug.htmlが正しく表示されず、またpageA、pageC(奇数目のページ)が表示されません。case B
debug.htmlは最初から正しく表示されますが、pageB、pageDが表示されません。
なお最初のコメントだけの行を削除するとエラー「Error: You can not supply no "ons-page" element to "ons-navigator".」が出ます。
どのように書くのが正しいでしょうか、お分かりの方是非ご教授下さい。
- modules/angular.js
// This is a JavaScript file
var app = angular.module('myApp', ['onsen']);
var svc = function($rootScope) {};
svc.$inject = ['$rootScope'];
app.service('MainService', svc);
var ctl = function($scope, svc) {};
ctl.$inject = ['$scope', 'MainService'];
app.controller('MainController',ctl);
- index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<!-- user -->
<script type="text/javascript" src="modules/angular.js"></script>
<!-- user -->
</head>
<body>
<ons-template id="navigator.html">
<ons-navigator var="nav" page="home.html"></ons-navigator>
</ons-template>
<ons-tabbar var="tabbar">
<ons-tab
icon="home"
label="home"
page="navigator.html"
visible="true"
active="true"></ons-tab>
<ons-tab
icon="bolt"
label="debug"
ng-click="nav.pushPage('debug.html')"
visible="true"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-page id="home" ng-controller="MainController">
<div>home</div>
</ons-page>
</ons-template>
</body>
</html>
- debug.html(case A)
<ons-template id="debug.html">
<ons-page id="debug" ng-controller="MainController">
<ons-list>
<ons-list-item ng-click="nav.pushPage('pageA.html');">
PageA
</ons-list-item>
<ons-list-item ng-click="nav.pushPage('pageB.html');">
PageB
</ons-list-item>
<ons-list-item ng-click="nav.pushPage('pageC.html');">
PageC
</ons-list-item>
<ons-list-item ng-click="nav.pushPage('pageD.html');">
PageD
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="pageA.html">
<ons-page id="pageA" ng-controller="MainController">
<div>A</div>
</ons-page>
</ons-template>
<ons-template id="pageB.html">
<ons-page id="pageB" ng-controller="MainController">
<div>B</div>
</ons-page>
</ons-template>
<ons-template id="pageC.html">
<ons-page id="pageC" ng-controller="MainController">
<div>C</div>
</ons-page>
</ons-template>
<ons-template id="pageD.html">
<ons-page id="pageD" ng-controller="MainController">
<div>D</div>
</ons-page>
</ons-template>
- debug.html(case B)
<!-- -->
<ons-page id="debug" ng-controller="MainController">
<ons-list>
<ons-list-item ng-click="nav.pushPage('pageA.html');">
PageA
</ons-list-item>
<ons-list-item ng-click="nav.pushPage('pageB.html');">
PageB
</ons-list-item>
<ons-list-item ng-click="nav.pushPage('pageC.html');">
PageC
</ons-list-item>
<ons-list-item ng-click="nav.pushPage('pageD.html');">
PageD
</ons-list-item>
</ons-list>
</ons-page>
<ons-template id="pageA.html">
<ons-page id="pageA" ng-controller="MainController">
<div>A</div>
</ons-page>
</ons-template>
<ons-template id="pageB.html">
<ons-page id="pageB" ng-controller="MainController">
<div>B</div>
</ons-page>
</ons-template>
<ons-template id="pageC.html">
<ons-page id="pageC" ng-controller="MainController">
<div>C</div>
</ons-page>
</ons-template>
<ons-template id="pageD.html">
<ons-page id="pageD" ng-controller="MainController">
<div>D</div>
</ons-page>
</ons-template>