Use of Multiple html template in Ionic Framework

Question

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.

ui router needs a defined state with your template, see the docs: https://github.com/angular-ui/ui-router/wiki — user2936314, Feb 05 '16 at 06:24
@user2936314 I saw lot of example in Codepen where user use `` in index page . but my problem is that I am not able to navigate that templates which I declare in candidate page. — Neotrixs, Feb 05 '16 at 06:57
post your router code, how are you defining your the `state`? — user2936314, Feb 05 '16 at 07:03

score 0 · Answer 1 · answered Feb 05 '16 at 10:04

In terms of project structure and code maintenance it is much better to have separate HTML files.

You could use a gulp task that concats all the HTML templates in a single JS file and inserts them in the angular template cache. This way you wouldn't need to modify your router.

There is a nice gulp plugin that does it for you:

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

Use of Multiple html template in Ionic Framework

1 Answers1