Ionic Control Pages

Question

私のアプリの3ページのコンテンツを1つの.htmlファイルに入れようとしていますが、それを理解することはできません。私の.htmlページのコードはここにある：にapp.jsに

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('home', { 
    url: '/', 
    templateUrl: 'templates/home.html' 
    }) 
    .state('registration', { 
    url: '/registration', 
    templateUrl: 'templates/registration.html', 
    controller: 'RegistrationCtrl' 
    }) 
    .state('code_entery_page', { 
    url: '/code_entery_page', 
    templateUrl: 'templates/code_entery_page.html', 
    controller: 'code_entery_pageCtrl' 
    }) 
    .state('registration-create-profile', { 
    url: '/registration-create-profile', 
    templateUrl: 'templates/registration-create-profile.html', 
    controller: 'registration-create-profileCtrl' 
    }) 
    .state('app.main-traveler-page', { 
    url: '/main-traveler-page', 
    templateUrl: 'templates/main-traveler-page.html', 
    controller: 'main-traveler-pageCtrl' 
    }) 

    .state('pinko.main-pinko-page', { 
    url: '/main-pinko-page', 
    templateUrl: 'templates/main-pinko-page.html', 
    controller: 'main-pinko-pageCtrl' 
    }) 



    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/directives/traveler-navigation.html', 
    controller: 'AppCtrl' 
    }) 

    .state('pinko', { 
    url: '/pinko', 
    abstract: true, 
    templateUrl: 'templates/directives/pinko-navigation.html', 
    controller: 'AppCtrl' 
    }) 




    $urlRouterProvider.otherwise('/'); 
}); 

が、私はtoplist.htmlに接続する方法を知らないとtoplist2.html：

<script id="templates/topList.html" type="text/ng-template"> 
     <ion-view> 
     <ion-content class="padding"> 
      <p> 
      <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> 
      </p> 
     </ion-content> 
     </ion-view> 

    </script> 

    <script id="templates/topList2.html" type="text/ng-template"> 
     <ion-view> 
     <ion-content class="padding"> 
      <p> 
      <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> 
      </p> 
     </ion-content> 
     </ion-view> 

    </script> 

そして、私のapp.jsはこれです私のページが開いているときに動作しますか？ in app.js - .state（ 'pinko.main-pinko-page'）は、toplist.htmlとtoplist2.htmlを表示するページです。

Answer 1

両方のテンプレートをcommon-templateのように1つのhtmlファイルに追加します.html。

この共通テンプレートは、.state（ 'pinko.main-pinko-page'）で必要とされているように、main-pinko-page.htmlに追加してください。

上記の1つの場所でのみ必要な場合は、この共通テンプレートをすべてのナビゲーションが開始されるメインのhtmlファイルに含めます。