読者です 読者をやめる 読者になる 読者になる

onsen ui <ons-navigator>の中に<ons-template>を複数定義しようとしてハマった

やりたかったこと

<ons-navigator>を使ってページ遷移を2パターンのページへそれぞれ遷移させたかった。
下記のように実装してみたのだがページ2へのリンクをおすとjsのエラーが発生して上手く動かなかった。ちなみにページ1へは遷移できた

js

var myApp = angular.module("myApp",["onsen"]);
myApp.controller("CtrMain"),function($scope) {
  $scope.showPage1 = function() {
    $scope.ons.navigator.pushPage("page1.html");
  }
  $scope.showPage2 = function() {
    $scope.ons.navigator.pushPage("page2.html");
  }
});

html

<ons-navigator>
  <ons-page id="CtrMain">>
    メインページ
    <a ons-click="showPage1()">ページ1へ</a>
    <a ons-click="showPage2()">ページ2へ</a>
  </ons-page>
  <ons-template id="page1.html">
    <ons-page id="CtrPage1">ページ1</ons-page>
  </ons-template>
  <ons-template id="page2.html">
    <ons-page id="CtrPage2">ページ2</ons-page>
  </ons-template>
</ons-navigator>

<ons-navigator>の中には<ons-template>は1つしか入れられない?

angular.jsもonsen uiも触りはじめたばかりなので記述が間違っているのだと考えて、ページ1の<ons-template id="page1.html">をごっそり削除してみた。するとページ2へ遷移できた、、、

html

<ons-navigator>
  <ons-page id="CtrMain">>
    メインページ
    <a ons-click="showPage1()">ページ1へ</a>
    <a ons-click="showPage2()">ページ2へ</a>
  </ons-page>
  <ons-template id="page2.html">
    <ons-page id="CtrPage2">ページ2</ons-page>
  </ons-template>
</ons-navigator>

結局こうしたら動いた

マニュアルをながめていたら「もう1つの方法として<script>タグを用いてテンプレートを定義する」と書いてあったので試しに<ons-template id="">を<script type="text/ons-template" id="">の形にしてみたら動きました

html

<ons-navigator>
  <ons-page id="CtrMain">>
    メインページ
    <a ons-click="showPage1()">ページ1へ</a>
    <a ons-click="showPage2()">ページ2へ</a>
  </ons-page>
  <script type="text/ons-template" id="page1.html">
    <ons-page id="CtrPage1">ページ1</ons-page>
  </script>
  <script type="text/ons-template" id="page2.html">
    <ons-page id="CtrPage2">ページ2</ons-page>
  </script>
</ons-navigator>

つまり

<script>タグで定義したほうが良さそう
根本的に使い方間違っている可能性もありそうで悲しい、、、誰か詳しいかた。ご教授おねがいします