Javascript 如何最好地围绕一个大型非角度库（本例为openlayers map）构建一个角度应用程序

通常，非角度库实例化对象并将其绑定到DOM，并提供使用该对象的函数，在我的例子中，它是openlayers 3中的“映射”

如何在angular中最好地处理这样的库，以允许我使用应用程序每个部分的“对象”？

• 保存实例并包装实例可调用函数的服务
• 我以某种方式与保存实例的指令（我猜主要是服务）通信
• 我直接调用所有对象的全局对象？（听起来是一种非常糟糕的方式）
• 将其全部放在一个实用程序对象中，该对象使用我自己的东西包装/扩展openlayers函数，并在任何地方访问它

对于另一个项目，我希望重用尽可能多的遗留代码，并将所有必要的内容包装到一个实例化映射对象的服务中

对于一个新项目，我没有遗留代码，可以自由操作

---

像azimuthjs（）这样的openlayers指令库不是真正的解决方案

封装实例可调用函数的服务选项似乎是最好的选择。 Angular services旨在提供对可能在整个应用程序中使用的代码的“全局”访问，因此是单例的

您还可以从依赖项注入中获得好处，从而在需要时更容易地用另一个代码库替换底层代码库

您也可以考虑创建多个服务，每个服务都会从库中公开一个特定的方面或相关的函数组。p> 一个选项是使用“主”控制器，靠近Angular管理的DOM树，并在该主控制器中创建和存储“映射”对象

将地图对象存储在Angular管理的DOM中的“低”控制器中，可以与Angular应用程序的其他作用域/组件共享/传递地图

JS代码：

函数MainController（）{
this.map=新ol.map({
// ...
});
}

HTML代码：

简单例子
...

在上面的示例中，在页面主体上创建了一个“主”控制器。该控制器创建并存储OpenLayers映射

然后将映射传递给

map指令

，该指令负责将映射插入DOM（该指令的

链接

函数调用映射上的

setTarget

）。同样，映射可以传递给应用程序的其他指令

这个方法就是我们在项目中采用的方法，其目标是提供指令和服务，简化基于Angular和OpenLayers 3的应用程序开发

---

有关该方法的更多详细信息，请参阅“简单”示例（，）和ngeo中的指令。您还可以看看其他ngeo示例

简单的回答是-创建一个包装器指令，并通过隔离作用域仅公开您感兴趣的内容，并根据需要进行扩展