I am new in Ionic. I was building an Ionic App just how I would do it in Web. So i build multiple HTML files. I just noticed, that the page loading from one to another HTML file is quite slow. I looked around and again noticed, that there are hardly any examples with multiple HTML files.
My Application current HTML file look like
I want to use only one HTML file for other template.
And My router code is
.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');
});
Is it possible to use multiple template store in one HTML file [candidate.html]. If it is possible, please tell me how to import HTML file [candidate.html] in application or define in angular-ui-router.
Or am I totally wrong here?
Hope you can clarify my issue.
<script id="templates/candidate.html" type="text/ng-template"></script>
in index page . but my problem is that I am not able to navigate that templates which I declare in candidate page.state
?