前言
在前端应用程序开发中，跟踪和监测应用程序的行为和性能是非常重要的。为了提高开发效率，我们需要使用现成的工具来进行应用程序跟踪和监测。其中，Application Insights 是一个基于云的应用程序监测平台，可用于多种语言和平台。对于 Angular 应用程序而言，@ethereumex/angular-application-insights 是一个非常优秀的 npm 包，可以轻松地将 Application Insights 集成到 Angular 应用程序中，以便于跟踪和监测应用程序的行为和性能。
安装和配置
在开始使用 @ethereumex/angular-application-insights 包之前，我们需要先安装 Application Insights SDK。使用如下命令进行安装：
npm install applicationinsights-js --save
安装完毕后，我们需要在 app.module.ts 文件中引入 Application Insights，并在 providers 中添加 Application Insights 提供器：
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------------------------
---
-----------
---
---------- -
---
- -------- ------------------- ----------- ------------------ -
--
---
--
------ ----- --------- - -
------ -------- -------------------- -
----- ----------- - --- ---------------------
------- -
------------------- --------------------------
-- -------- ------------- ---------- --
-
---
------------------------------
------ --- --------------------------------
-在这段代码中，我们通过 ApplicationInsights 构造函数创建一个新的 ApplicationInsights 实例。在这里，我们需要提供 Application Insights 的仪表板密钥，以便之后将应用程序数据发送到 Application Insights 仪表板。这个仪表板密钥可以从 Azure 门户或 Application Insights 仪表板中获取。随后，我们通过 AppInsightsFactory 工厂函数来创建一个 AppInsightsService 实例，并将其提供给应用程序中的其他类使用。
使用
在 app.component.ts 文件中，我们可以使用以下代码来在 Angular 应用程序中使用 @ethereumex/angular-application-insights 包。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- -------------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------ ------------------- -
-- ---------- ----------- -------- ---- --
-----------------------------------
-
---------- -
-- ----- -------- ---- --
------------------------------------- -----------------
-
-在这段代码中，我们通过 AppInsightsService 服务来调用 Application Insights SDK 中的函数。在构造函数中，我们通过 this.appInsights.loadAppInsights() 函数来初始化 Application Insights。在 ngOnInit 中，我们通过 this.appInsights.trackPageView() 函数来跟踪页面视图。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- -------------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------ ------------------- -
-- ---------- ----------- -------- ---- --
-----------------------------------
-
---------- -
-- ----- -------- ---- --
------------------------------------- -----------------
-- ----- ------ ----- --
---------------------------------- -------------- ----------- ------- --------- ------ ------------
-- ----- --------- --
----------------------------------- ----------- ---------
-- ----- ------ --
----------------------------------- --------------- -------- --- ------------ -- ---- -- ---- ----
-- ----- ----- --
------------------------------------- -------------- -------------- -- ----------- ------- --------- ------ ------------
-- --- ------- ---------- --
---------------------------------------------------------
----------------------------------------------------------------------
------------------------------------------------
-
-结语
通过这篇文章，我们介绍了如何使用 npm 包 @ethereumex/angular-application-insights 在 Angular 应用程序中集成 Application Insights。我们提供了详细的配置指南以及示例代码，希望本文对 Angular 开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ccf81e8991b448da6cb