用于包装 javascript 个库的 AngularJS 模块

Question

我想在我的 angular 项目中使用一个库，它提供用 javascript/jQuery 编写的滑块。因此，我会在我的项目中编写一个指令，使用特定的接口来使用库功能。我会在我的索引 html 中加载库源文件。这将使图书馆全球可用。

我也会在我的其他 angular 项目中使用这个库，所以我想用指令创建一个 Angular-Module（自己的项目），这样我就可以将它注入每个项目都作为模块依赖。不幸的是，我不知道在哪里加载库以及这个 Angular-Module 的结构应该如何。我必须在指令模板中加载库吗？

template.html:

<script src="libraries/jquery-slider.js></script>
<my-slider></my-slider>

或者我是否必须 load/inject jQuery-library 以不同的方式访问其功能？

Answer 1

好吧，假设您有一个主模块。那么您的 index.html 结构将如下所示：

<script src="js/main.js></script>

然后添加另一个模块，它是您的库的接口/绑定提供程序：

<script src="js/library-binding.js></script>
<script src="js/main.js></script>

问题来了，您需要在某处包含库本身。这里有两个主要选项：

延迟加载，或者当你想在库将被使用的那一刻加载的方法。您需要在指令实现内部执行此操作，这可能会导致一些麻烦，因为您将被迫延迟元素渲染，直到加载库为止。此外，如果页面上有多个元素，您还会遇到另一个问题：您将多次加载库，这可能是冲突的根源，您需要以某种方式关心它，例如设置一些加载库的全局变量，你不需要再加载它（加上它应该在这种情况下注入 <head> 部分）。

总是和接口模块一起加载库，这样更加清晰和简单；但是无论是否使用它都会always加载。

我个人的偏好是第二种方式，但您应该真正了解哪种方式最适合您的特定项目。

因此，在这种情况下 index.html 结构应该类似于

<script src="js/library.js></script>
<script src="js/library-binding.js></script>
<script src="js/main.js></script>

或者，还有什么更好的

<script src="js/library-and-library-binding.js></script>
<script src="js/main.js></script>

在这种情况下，所有依赖项都包含在模块文件中。

用于包装 javascript 个库的 AngularJS 模块

AnguarJS module to wrap javascript libraries

angularjs

angularjs-directive

angularjs-module