angularjs – 在onsen UI中使用多个html文件

我有一个问题,但是：

http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

这里说：“而不是在单独的文件中创建menu.html和content.html,也可以在同一页面中定义页面内容.”

我不想让我的整个应用程序在一个html文件,所以我试图将每个模板放在一个单独的文件.这是我的文件结构：

www
- index.html
- products.html
- services.html

这是我的标签：

<ons-tabbar>
  <ons-tabbar-item active="true" page="products.html">
    <div class="tab">
      <ons-icon icon="ion-home" class="tab-icon"></ons-icon>
      <div class="tab-label">Products</div>
    </div>
  </ons-tabbar-item>

  <ons-tabbar-item page="services.html">
    <div class="tab">
      <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
      <div class="tab-label">Services</div>
    </div>
  </ons-tabbar-item>
</ons-tabbar>

编辑
services.html(products.html类似)的内容：

<ons-template id="services.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Services</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-item>Item1</ons-list-item>
      <ons-list-item>Item2</ons-list-item>
      <ons-list-item>Item3</ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

完成编辑

现在,当应用程序加载(Firefox,Chrome,iOS模拟器)时,它将显示标签栏和空的内容.
在控制台中,您可以看到外部html文件尚未加载.
如果我点击服务,浏览器将获取services.html文件,但不显示.我点击产品,products.html文件被加载,但不显示.

最后：如果我第二次点击服务,外部html文件的内容正确显示.

这是一个bug吗？有解决方法吗？我尝试在ons.ready()事件上将页面加载到$templateCache中.他们已成功加载,但再次不显示,直到第二次点击…

如果一个很棒的框架不会将项目分割成多个文件,那将是一个耻辱.