index.htmlからタップによってpage1.html（別ファイル）にnavigator.pushPage()で遷移した場合  
pgae1.htmlにはons-templateを記述は可能なのでしょうか？

使い方が正しいか分かりませんが、page1.htmlにons-page（初期表示される）を記述して、それとは別にons-templateを使いたい感じです。  
このように別ファイル化した場合、ons-templateではなく、同じく別ファイル化しないとダメなのでしょうか？
CC BY-SA 3.0
2015-07-22T17:25:15.673
12583
2016-10-15T02:55:39.423
10403
question
onsen-ui
ページを別ファイル化した時のons-templateについて
[複数のhtmlファイルとons-
templateを併用するとうまく動かない](https://ja.stackoverflow.com/questions/9368/)

こちらの質問に回答がありますが、別ファイルの`ons-template`を使用するには事前に`ng-include`しておく必要があるようです。

`<ng-include src="'page1.html'"></ng-include>`

ただ、今回のように`index.html`の`ons-
navigator`に設定する場合はこれだけだとうまく動かないようです（おそらく`page1.html`の読み込みが終わらない。やり方がまずいだけかもしれませんが・・・）。

**page1.html** ※これは下記A, B, Cで共通

```

    <ons-template id="sub-page1">
      <ons-page>
          <ons-toolbar>
              <div class="center">Sub Page 1</div>
          </ons-toolbar>
          <div style="text-align: center">
              <h1>Sub Page 1</h1>
              <ons-button onclick="navi.pushPage('sub-page2')">
                Push Page
              </ons-button>  
          </div>
      </ons-page>
    </ons-template>
    
    <ons-template id="sub-page2">
      <ons-page>
          <ons-toolbar>
              <div class="left"><ons-back-button>Back</ons-back-button></div>
              <div class="center">Sub Page 2</div>
          </ons-toolbar>
          <div style="text-align: center">
              <h1>Sub Page 2</h1>
              <ons-button onclick="navi.popPage()">
                Pop Page
              </ons-button>  
          </div>
      </ons-page>
    </ons-template>
    
```

**index.html**

A. これはうまく動かない

```

    <!DOCTYPE HTML>
    <html>
    <head>
        ～ 中略 ～
        <script>
          ons.bootstrap();
        </script>
    </head>
    <body>
        <ng-include src="'page1.html'"></ng-include>
        <ons-navigator var="navi" page="sub-page1">
        </ons-navigator>
    </body>
    </html>
    
```

B. これはうまく動いた（と思う）※たまに動かない

```

    <!DOCTYPE HTML>
    <html>
    <head>
        ～ 中略 ～
        <script>
        　ons.bootstrap();
          ons.ready(function() {
            // page1.html内のページを設定
            navi.resetToPage('sub-page1');
          });
        </script>
    </head>
    <body>
        <ng-include src="'page1.html'"></ng-include>
        // とりあえずダミーを設定
        <ons-navigator var="navi" page="dummy">
        </ons-navigator>
        <ons-template id="dummy">
          // ダミーページ
        </ons-template>
    </body>
    </html>
    
```

C. これが一番成功率が高い気がする ※たまに動かない

```

    <!DOCTYPE HTML>
    <html>
    <head>
        ～ 中略 ～
        <script>
        　ons.bootstrap();
          ons.ready(function() {
            // 500ミリ秒待ってからpage1.html内のページを設定
            setTimeout(function() {
              navi.resetToPage('sub-page1');
            }, 500);
          });
        </script>
    </head>
    <body>
        <ng-include src="'page1.html'"></ng-include>
        <ons-navigator var="navi">
        </ons-navigator>
    </body>
    </html>
    
```

せっかく試したので B も記載していますが、C の方がお手軽な気はします。

  * C の待ち時間を調整する
  * 準備ができたら呼ばれるイベントを探す

等で「たまに動かない」は解消できるかもしれません。
CC BY-SA 3.0
2015-07-23T05:50:29.890
12600
2015-07-23T05:50:29.890
2017-04-13T12:52:39.113
-1
3516
12583
answer