angular-cc-appinsights
An AngularJS module for integrating Microsoft's Application Insights within a SPA
Core features
- Configure the official Application Insights (AI) SDK with telemetry initializers that are angular services
- Automatically track page views in AI on every client-side route change
- Automatically track exceptions in AI that are sent to the angular $exceptionHandler service
Getting Started
Prerequisites
- A Microsoft Application Insights Instrumentation Key:
- This can be obtained from https://portal.azure.com, and registering an Application Insights resource.
- Following the official guide : Create a new Application Insights resource
Installation
From NPM
npm install angular-cc-appinsights --save
From Source
> git clone https://github.com/christianacca/angular-cc-appinsights.git> cd angular-cc-appinsights> npm install> npm run build:full
The compiled angular-cc-appinsights
library will be in the dist/ folder.
Setup
1. Add and initialize the Application Insights SDK
- Add a script reference to the Application Insights SDK in your main html file. Make sure it is one of the first scripts to load:
Note: you will find the latest version of the SDK in the dist folder of the official github repo
- Immediately after the script reference above, add another script that initializes the Application Insights SDK. A minimal example of this script:
var snippet = config: instrumentationKey: "YOUR_KEY_HERE" ;var init = snippet;var appInsights = init;
2. Add cc-appinsights angular module
- Add script reference to
cc-appinsights
javascript:
- Where you declare your app module, add
cc-appinsights
:
angular;
- In an angular config function, configure the
ccAppInsightsProvider
:
JS
angular; configWithAppInsigths$inject = 'ccAppInsightsProvider'; { appInsightsProvider; }
Typescript
/// angular.module'myApp'.configconfigWithAppInsigths; configWithAppInsigths.$inject = ;
API Reference
See api-reference.md