在Ionic Framework中使用多個html模板

-1

我是Ionic的新成員。我正在構建一個Ionic應用程序，我將如何在Web中完成它。所以我建立了多個HTML文件。我剛剛注意到，從一個HTML文件加載到另一個HTML文件的速度很慢。我環顧四周，再次注意到，幾乎沒有任何多個HTML文件的例子。在Ionic Framework中使用多個html模板

我的應用程序當前的HTML文件的樣子

我想只用一個其他模板HTML文件。

而且我的路由器代碼

.config(function ($stateProvider, $urlRouterProvider) { 
$stateProvider 
//-------------------Main------------------------------- 
    .state('forgotpassword', { 
    url: '/forgot-password', 
    templateUrl: 'templates/forgot-password.html' 
}) 

.state('login', { 
    url: "/login", 
    templateUrl: "templates/login.html", 
    controller: 'LoginCtrl' 
}) 

//-------------------Admin------------------------------- 

.state('admin', { 
    url: "/admin", 
    abstract: true, 
    templateUrl: "templates/admin/menu.html", 
    //  controller: 'AppCtrl' 
}) 

.state('admin.home', { 
    url: "/home", 
    views: { 
     'menuContent': { 
      templateUrl: "templates/admin/home.html", 
      controller: 'HomeCtrl' 
     } 
    } 
}) 


.state('admin.activity', { 
    url: "/activity", 
    views: { 
     'menuContent': { 
      templateUrl: "templates/admin/activity.html", 
      //    controller: 'MyprofileCtrl' 
     } 
    } 
}) 

//--------------------Candidate -------------------------------- 

.state('activity-menu', { 
    url: "/activity-menu", 
    abstract: true, 
    templateUrl: "templates/admin/activity-menu.html", 
    //  controller: 'AppCtrl' 
}) 

.state('activity-menu.invite-send', { 
     url: '/invite-send', 
     views: { 
      'menuContent': { 
       templateUrl: 'templates/admin/candidate/invite-send.html', 
       controller: 'CandEndorsed' 
      } 
     } 
    }) 
    .state('activity-menu.invite-accept', { 
     url: '/invite-accept', 
     views: { 
      'menuContent': { 
       templateUrl: 'templates/admin/candidate/invite-accept.html', 
       controller: 'CandEndorsed' 
      } 
     } 
    }) 
    .state('activity-menu.need-review', { 
     url: '/need-review', 
     views: { 
      'menuContent': { 
       templateUrl: 'templates/admin/candidate/need-review.html', 
       controller: 'CandEndorsed' 
      } 
     } 
    }) 

.state('activity-menu.-candidatedetail', { 
    url: '/candidatedetail/:id', 
    views: { 
     'menuContent': { 
      templateUrl: 'templates/admin/candidate/canddetail.html', 
      controller: 'ModalController' 
     } 
    } 
}) 

.state('activity-menu.candidatedetail', { 
    url: '/invite-send-candidatedetail/:id', 
    views: { 
     'menuContent': { 
      templateUrl: 'templates/admin/candidate/invite-send-canddetail.html', 
      controller: 'JsonController' 
     } 
    } 
}) 

.state('activity-menu.acceptcandidatedetail', { 
    url: '/invite-accept-candidatedetail/:id', 
    views: { 
     'menuContent': { 
      templateUrl: 'templates/admin/candidate/invite-accept-canddetail.html', 
      controller: function ($stateParams) { 
       console.log($stateParams); 
      } 
     } 
    } 
}) 



// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/login'); 

});

是否有可能使用多個模板存儲在一個HTML文件[candidate.html。如果可能，請告訴我如何在應用程序中導入HTML文件[candidate.html]或在angular-ui-router中定義。

還是我完全錯了？

希望你能澄清我的問題。

來源

2016-02-05 Neotrixs

UI路由器需要與你的模板定義的狀態，請參閱文檔：https://github.com/angular-ui/ ui-router/wiki – user2936314

@ user2936314我在索引頁面中看到很多使用''的Codepen示例。但我的問題是我無法瀏覽我在候選頁面中聲明的那些模板。 – Neotrixs

發佈你的路由器代碼，你如何定義你的'狀態'？ – user2936314

就項目結構和代碼維護而言，分開的HTML文件要好得多。

您可以使用一個gulp任務來連接單個JS文件中的所有HTML模板，並將它們插入到角度模板緩存中。這樣你就不需要修改你的路由器。

有一個很好的一飲而盡插件，它會爲你：

https://www.npmjs.com/package/gulp-angular-templatecache

來源

2016-02-05 10:04:53 konpai

在Ionic Framework中使用多個html模板

回答

相關問題