Question

我有一个使用ui-router的AngularJS应用程序。它是一个SPA应用程序，我希望尽可能地缩短初始加载时间。当用户点击链接转到我的应用程序上的某个地图页面时，我需要加载jQuery。这是ui-router配置代码：

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';
            },
        }
    }
};

有没有办法可以在将用户移动到新页面之前加载jQuery并确认它已完成。请注意，我需要在ui-router代码块中使用某种解析来执行此操作，而不是编写我加载的页面中的任何脚本元素。

Answer 1

$locationChangeStart可能有助于您想要的内容，还有$routeChangeStart取决于哪种更适合您的情况。

这样的事情：

$rootScope.$on('$locationChangeStart', function(event) {
    //Load JQuery here
});

Answer 2

在resolve块中，设置一个promise并返回它，加载jQuery，然后轮询直到它存在于window对象上。一旦完成，解决承诺：

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

如何在使用ui-router导航到新页面之前加载jQuery？

2 个答案: