用AngularJS构建单页应用,根据需求加载JS文件的方法

最新推荐文章于 2022-07-06 11:22:20 发布

原创最新推荐文章于 2022-07-06 11:22:20 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #hybridapp #javascript #异步

本文介绍如何使用AngularJS结合requireJS实现网页模板及其控制器的动态加载。通过在$routeProvider中设置resolve属性，可以实现控制器的延迟加载，进而使得JS文件按需加载而非一次性全部加载。该方法有助于提高Hybrid App的性能，允许将应用分为静态和动态两部分。

我们在AngularJS中可以根据网址不同直接切换view，动态加载网页模板，但是控制模板的控制器需要先定义好才可以，不能和网页模板同时加载，这样就造成整个网站的JS都要先加载完成。

requireJS是大家第一个想到的东西，但是体积有点大，github上就有个人用它写了Angular的动态加载controller模块，是通过js promise异步编程技术实现的，最后的解决很简单~~
首先在$routeProvider里面加resolve属性，

$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;
  }
}

有了这个技术，我们的HybridApp就可以分成静态打包在原生应用里面的部分，和放在服务器上的动态部分，方便在不升级主App的前提下增加一些临时性的页面功能。具体应用场景大家自己想吧！