Использование нескольких шаблонов html в ионной структуре

Question

Я новичок в Ionic. Я создавал приложение Ionic, как бы это сделать в Web. Поэтому я создаю несколько файлов HTML. Я только заметил, что загрузка страницы из одного в другой HTML-файл происходит довольно медленно. Я огляделся и снова заметил, что примеров с несколькими файлами 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 [кандидат.html] в приложение или определить в угловом-ui-router.

Или я здесь совершенно не прав?

Надеюсь, вы сможете уточнить мою проблему.

Answer 1

С точки зрения структуры проекта и обслуживания кода гораздо лучше иметь отдельные файлы HTML.

Вы можете использовать задачу gulp, которая объединяет все HTML-шаблоны в одном JS-файле и вставляет их в угловой шаблонный кеш. Таким образом, вам не нужно будет изменять ваш маршрутизатор.

Существует хороший глоток плагин, который делает это для вас:

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