docs(angular): add angular framework integration document (#397)

* docs(angular): add angular framework integration document

* apply suggestions from code review

Co-Authored-By: Brandon Morelli <[email protected]>

* add api doc

* Apply suggestions from code review

Co-Authored-By: Andrew Wilkins <[email protected]>

docs/angular-integration.asciidoc

@@ -0,0 +1,59 @@
+[[angular-integration]]
+=== Angular integration
+
+This document covers how to use Real User Monitoring JavaScript agent with Angular applications.
+
+[[installing-angular-integration]]
+==== Installing Elastic APM Angular package
+
+Install the `@elastic/apm-rum-angular` package as a dependency to your application:
+
+[source,bash]
+----
+npm install @elastic/apm-rum-angular --save
+----
+
+[float]
+==== Instrumenting your Angular application
+
+The Angular integration package comes with a `ApmService` that will start subscribing to 
+https://angular.io/api/router/Event[Angular Router Events] once the service is initialized. 
+
+`ApmService` must be initialized from either the application module or application component since 
+the RUM agent has to start capturing all the resources and API calls as soon as possible. 
+
+
+[source,js]
+----
+import { Routes, RouterModule } from '@angular/router'
+import { ApmService } from '@elastic/apm-rum-angular'
+
+const routes: Routes = [
+  { path: 'contact', component: ContactListComponent },
+  { path: 'contact/:id', component: ContactDetailComponent }
+]
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot(routes)],
+  declarations: [AppComponent, ContactListComponent, ContactDetailComponent],
+  providers: [ApmService],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+  constructor(service: ApmService) {
+    // API is exposed through this apm instance
+    const apm = service.init({
+      serviceName: 'angular-app',
+      serverUrl: 'http://localhost:8200'
+    })
+
+    apm.setUserContext({
+      'username': 'foo',
+      'id': 'bar'
+    })
+  }
+}
+----
+
+Once the service is initialized, both page load and SPA navigation events will be captured
+as transactions with the `path` of the route as its name and `page-load` or `route-change` as type.

docs/framework-integrations.asciidoc

@@ -2,5 +2,7 @@
 == Framework-specific integrations
 
 * <<react-integration, React Integration>>
+* <<angular-integration, Angular Integration>>
 
-include::./react-integration.asciidoc[React Integration]
+include::./react-integration.asciidoc[React Integration]
+include::./angular-integration.asciidoc[Angular Integration]

docs/supported-technologies.asciidoc

@@ -28,12 +28,15 @@ image::images/compatibility.png[Elastic APM RUM Agent compatibility]
 [[frameworks]]
 === Frameworks
 
-The agent is framework agnostic and therefore does not instrument metrics related to rendering time or mounting time of components. If you are interested in measuring custom timings on frameworks like React, Angular, vue etc., please use the <<custom-transactions, Custom Transactions API>>.
+The agent supports integrations with certain frameworks. See <<framework-integrations, Framework specific integrations>> for more information. 
+
+If you are interested in instrumenting custom metrics like rendering time or mounting time of components on frameworks like React, Angular, vue etc., please use the <<custom-transactions, Custom Transactions API>>.
 
 [float]
 [[spa]]
 === Single Page Applications
 
-In the context of Single Page Applications, the route changes do not trigger the browser navigation event and thus the agent does not instrument them by default. 
+In the context of Single Page Applications, all the history pushstate events will be captured as transactions. 
 
-However, you can instrument your application by creating <<custom-transactions, Custom Transactions>> and also add custom spans using <<apm-start-span, Span API>>.
+However, most of these transactions can be enhanced by using framework specific integrations. For all unsupported frameworks/libraries, you can instrument the application 
+by creating <<custom-transactions, Custom Transactions>> and also add custom spans using <<apm-start-span, Span API>>.