monacaクラウドでOnsenUI/AngularJSを使いアプリ制作の勉強中です。

複数の画面があるアプリで、基本的にはhtmlは1ファイルにまとめたいのですが
リリースに含まれるページとデバッグ目的ページなどは分離したいので
2つのhtmlファイルに分けたところ、変な動きをします。

  1. case A
    最初はdebug.htmlが正しく表示されず、またpageA、pageC(奇数目のページ)が表示されません。

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