javascript - 在 Angular SPA 中异步加载脚本

Question

我有一个 Angular 应用程序，其中包含指令。一个指令在调用时构建一个 mapbox map 。为了工作，我目前在应用程序最初加载时加载 mapbox CSS 和 JS。这并不理想，因为它会减慢初始页面加载速度，但用户甚至可能不会转到需要此脚本的 View 。

所以我的问题是，是否有一种方法可以在第一次调用指令时异步加载脚本(可能还有 CSS)。第一次之后，如果在另一个 View 中再次使用该指令，则不应再次加载脚本。这也可以用 angular-loader.js 实现吗？

到目前为止，我的示例设置如下所示:

查看 HTML

<ng-map></ng-map>

指令

app.directive('ngMap', ['MapService', function(MapService){
  return {
    restrict: 'E',
    templateUrl: '/partials/map.html',
    link: function($scope, element, attrs){
      MapService.build();      
    }
  }
}]);

服务

app.service('MapService', [function(){

  this.build = function(){    

    //map bounds
    var southWest = L.latLng(54.04407014753034, -0.745697021484375),
        northEast = L.latLng(53.45698455620496, -2.355194091796875),
        bounds = L.latLngBounds(southWest, northEast);

    //build map object
    L.mapbox.accessToken = conf.mapbox.token;
    map.obj = L.mapbox.map('map', conf.mapbox.id, {
      maxBounds: bounds,
      zoomControl: false,
      minZoom: 11,
      attributionControl: false
    }).setView([53.80451586014786, -1.5477633476257324], 15, {
      pan: { animate: true },
      zoom: { animate: true } 
    });

  };

}]);

ma​​p.html

<div id="map"></div>

Answer 1

您可以使用 requirejs Angular 解释 here .