angularjs - How can I load jQuery before navigating to a new page with ui-router? -

i have angularjs application uses ui-router. it's spa application , want keep initial load time down as possible. when user clicks on link go map page on application need load jquery. here's ui-router config code:

var homemap = {     name: 'home.map',     parent: 'home',     url: '/:map',     views: {         'root': {             templateurl: '/content/app/home/partials/home.html',         },         'content': {             templateurl: function (stateparams) {                 return '/content/app/home/partials/' + stateparams.content + '.html';             },         }     } }; 

is there way can loading of jquery , confirm has finished before moving user new page. note need kind of resolve inside ui-router code block rather coding script elements in page load.

in resolve block, setup promise , return it, load jquery, poll until exists on window object. once does, resolve promise:

resolve:{     jquery:  function($http, $q){         if (typeof jquery === 'undefined') {             // load jquery             var wait = setinterval(function() {                 if (typeof jquery === 'function') {                     deferred.resolve();                     clearinterval(wait);                 }             }, 100);             return deferred.promise;         }     } } 

demo