背景
在 AngularJS 项目中，我们有时需要集成 QlikView 或 QlikSense 这样的 BI 工具，通过其类 Excel 的交互与可视化功能，展示数据并进行数据分析。然而，当我们在 AngularJS 的项目中使用 QlikView 或 QlikSense 时，经常会遇到跨域等许多问题，导致上手和维护这样的应用变得非常困难。
在这样的情况下，有一个名为 ng-qlik-isolated 的 npm 包，能够非常便捷地解决我们中的这些跨域等问题，以及实现一些 QlikView 或 QlikSense 的功能调用。下面，我们就来详细介绍一下这个 npm 包的使用方法。
安装模块
首先，我们需要使用 npm 在项目中安装 ng-qlik-isolated 模块，使用命令：
npm install ng-qlik-isolated
这一步安装成功后，我们就可以在项目中使用该模块了。
引入文件
接下来，我们在 index.html 中引入 ng-qlik-isolated 相关的文件，如下所示：
<script src="node_modules\ng-qlik-isolated\qlik-ext.js"></script> <script src="node_modules\ng-qlik-isolated\qlik-patched.js"></script>
添加模块
在应用中，我们需要在主模块中添加 qmc.components.qlik 模块（如果是使用 autoload.js 则无需添加模块，只需要在模板中使用组件即可），如下所示：
var myApp = angular.module('myApp', ['qmc.components.qlik']);使用 ng-qlik-isolated
显示 QlikView 和 Qlik Sense 文档
要在应用中显示 QlikView 和 Qlik Sense 文档，我们需要编写相关指令代码，如下所示：
<qlik-document url="https://your-qlikview-server.com" app-id="f4c3b00k-4pp-id" mode="view" frame-options='{"class": "custom-class", "style": {"background-color": "white"}}'></qlik-document>在这个指令中，我们可以通过传递一个 url 属性值，来指定 QlikView 或 Qlik Sense 服务器的 URL。然后，我们需要传递 QlikView 或 Qlik Sense 应用程序的 ID，以便 ng-qlik-isolated 显示相应的文档。最后，我们还可以传递其他属性，比如 mode（文档是否可编辑）和 frame-options（内联框架的样式）等。
获取 QlikView 和 Qlik Sense 数据
要获取 QlikView 和 Qlik Sense 数据，我们需要编写相关指令代码，如下所示：
<qlik-object url="https://your-qlikview-server.com" app-id="f4c3b00k-4pp-id" object-id="ALI_1" on-data="onDataViz1(data)"></qlik-object>
在这个指令中，我们可以通过传递一个 url 属性值，来指定 QlikView 或 Qlik Sense 服务器的 URL。然后，我们还需要传递 QlikView 或 Qlik Sense 应用程序的 ID 和对象的 ID，以便 ng-qlik-isolated 获取相应的数据。最后，我们可以在 on-data 属性中指定一个回调函数，以便在获取到数据后进行处理。
渲染 QlikView 和 Qlik Sense 数据
要渲染 QlikView 和 Qlik Sense 数据，我们需要编写相关指令代码，如下所示：
<qlik-chart url="https://your-qlikview-server.com" app-id="f4c3b00k-4pp-id" object-id="ALI_1" on-data="onDataViz1(data)"></qlik-chart>
在这个指令中，我们可以通过传递一个 url 属性值，来指定 QlikView 或 Qlik Sense 服务器的 URL。然后，我们还需要传递 QlikView 或 Qlik Sense 应用程序的 ID 和对象的 ID，以便 ng-qlik-isolated 获取相应的数据。最后，我们可以在 on-data 属性中指定一个回调函数，以便在获取到数据后进行处理。
示例代码
-- -------------------- ---- -------
-- ----------
--------- -----
----- ---------------
------
----------------------- ------------
------- ------------------------------------------------------------------------------------
------- ---------------------------------------------------------
------- -------------------------------------------------------------
-------
------
-------------------- ---------
---- -----------------------------
-------------- -------------------------------------- ------------------------ ----------- ------------------------ --------------- -------- -------------------- ---------------------------
------------ -------------------------------------- ------------------------ ----------------- -----------------------------------------
----------- -------------------------------------- ------------------------ ----------------- ----------------------------------------
------
--------
--- ----- - ----------------------- -------------------------
------------------------------------------ -------- -------- -
------------------ ---------------
-- ----
--
----
---------
-------
-------总结
ng-qlik-isolated 是一个非常便捷的 npm 包，能够快速解决在 AngularJS 项目中使用 QlikView 或 Qlik Sense 遇到的种种问题。希望本文的介绍能够帮助大家快速上手，做出更好的数据分析和可视化应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1681e8991b448dcaa3