代码改变世界

angularJS 按需加载

2016-04-21 18:43  西不肚  阅读(303)  评论(0编辑  收藏  举报

之前做应用的时候都会在首页就把全站的js预先加载进来...

怎么实现按需加载?

首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路由更改html前先把resolve里边该做的事完成。

resolve的写法比较特殊,接受的是一个key:value对象,keyName将会导入到controller中(如果controller有注明依赖)。而value应该是一个函数,函数的写法类似controller,angular会自动根据参数名导入相应依赖的服务,例如$q、$route。

$routeProvider.
        when('/phones', {
               templateUrl: 'partials/phone-list.html', 
               controller: PhoneListCtrl, 
               resolve: PhoneListCtrl.resolve})

然后

复制代码
function PhoneListCtrl($scope) {
  //本身不用管,该怎么弄怎么弄
}

PhoneListCtrl.resolve = {
  delay: function($q) {
    var delay = $q.defer(),
    load = function(){
        $.getScript('/js/xxxxx.js',function(){
        delay.resolve();
        });
    };
    load();
    return delay.promise;
  }
}