Question

我有一个带有多个标签的Angular SPA，这些标签由模板提供。这些选项卡中的每一个都需要不同的脚本（本地和CDN），因此我只想在需要时加载脚本，即我需要将它们包含在模板（或相关控制器）本身中。

到目前为止，我尝试过这种方法：

// Start template
<data-ng-include src="http://maps.googleapis.com/maps/api/js"></data-ng-include>
// Rest of stuff
// End template

这似乎不起作用。是的，我在标题中包含了jQuery。最好的方法是什么？似乎在模板中包含脚本应该更简单。

Answer 1

您可以使用任何延迟加载程序（按需加载程序）库，如requireJS，ocLazyLoad。

我已在我们的某个企业应用程序中成功实现了ocLazyLoad，因为如果您正在开发模块化单页应用程序，它提供了许多有用的功能：

易于实施。您可以在应用程序内的任何位置延迟加载任何资源
自动加载依赖关系
调试器友好（无评估代码）
可以加载任何客户端资源，如js / css / json / html
与AngularJS 1.2.x / 1.3.x / 1.4.x兼容
您还可以在服务，工厂，指令中加载任何资源。See example
如果您使用ui.router库进行路由，则在执行任何状态之前解析所有资源。See example
您还可以在任何模块的.config（）中延迟加载资源。See example
它还为您提供了记录模块加载事件的功能。

所有参考资料均来自ocLazyLoad

的官方网站

Answer 2

如果你想包含JS。我会告诉你，请使用：

cLazyLoad JS

以下是示例：

var myapp = angular.module('myApp', ['oc.lazyLoad']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
        .state('home', {
            url: '/home',
            template: '<div ui-view class="ngslide"></div>',
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load([js/jquery.main.min.js','js/ie10-viewport-bug-workaround.js']);
                    }]
            }
        })
});

Answer 3

我为此使用了一个简单的指令（这里：

DerivedB

用法是这样的：

interface AddScriptDirectiveAttributes extends IAttributes {
  type: string;
  src: string;
}

export function addScript(): IDirective {
  return {
    restrict: 'E',
    link: function (scope: IScope, element: JQuery, attrs: AddScriptDirectiveAttributes) {
      let script = document.createElement('script');
      if (attrs.type) {
        script.type = attrs.type;
      }
      script.src = attrs.src;
      document.body.appendChild(script);
    }
  };
}

在Angular模板中包含脚本的最佳实践？

3 个答案: