Question

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

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

template.html：

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

或者我是否必须以不同的方式加载/注入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库的AnguarJS模块

1 个答案: