Knowledge Base

cancel
Showing results for 
Search instead for 
Did you mean: 

Basic TypeScript Angular 2 Application Structural Example With EUM JS API

 Assuming the following application structure. Please note that there are several important elements missing from the list required to make a functional Angular 2 app.

src \
  - favicon.ico
  - index.html
  - systemjs.config.js
  app \
    - app.component.html
    - app.component.css
    - app.component.ts
    - app.module.ts
    - app.routing.ts
    - main.ts
    - test.component.html
- test.component.css
- test.component.ts
  assets \
    - adrum-config.js
    - adrum.js
    - adrum-ext.js

// index.html

<html>
<head>
  <base href="/">
  <title>Mp Test App</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="assets/adrum-config.js"></script>
  <script src="systemjs.config.js"></script>
  <link href="resets.css" rel="stylesheet">
  <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
  <mp-app>Loading...</mp-app>
</body>
</html>

// adrum-config.js

window['adrum-start-time'] = new Date().getTime();
(function(config){
    config.appKey = 'EUM-APP-KEY';
    config.adrumExtUrlHttp = 'assets';
    config.adrumExtUrlHttps = 'assets';
    config.beaconUrlHttp = 'http://eum-collector.example.com:7001';
    config.beaconUrlHttps = 'https://eum-collector.example.com:7002';
    config.xd = {enable : true};
})(window['adrum-config'] || (window['adrum-config'] = {}));
if ('https:' === document.location.protocol) {
    document.write(unescape('%3Cscript')
  + " src='assets/adrum.js' "
  + " type='text/javascript' charset='UTF-8'"
  + unescape('%3E%3C/script%3E'));
 }
else {
    document.write(unescape('%3Cscript')
  + " src='assets/adrum.js' "
  + " type='text/javascript' charset='UTF-8'"
  + unescape('%3E%3C/script%3E'));
 }

 // main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { TestComponent } from './test.component';
import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule,
    routing
  ],
  declarations: [
    AppComponent,
    TestComponent    
],
  providers: [
    ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

// app.component.html

<nav>
  <a routerLink="/">
  LINK
  </a>
</nav>
<section>
  <header>
    <h1>TEST</h1>
  </header>
  <router-outlet></router-outlet>
</section>

// app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'mp-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css']
})
export class AppComponent {
}

// test.component.ts

import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { lookupListToken } from './providers';

declare var ADRUM: any;
var vpView = new ADRUM.events.VPageView();

@Component({
  selector: 'test',
  templateUrl: 'app/test.component.html',
  styleUrls: ['app/test.component.css']
})
export class TestComponent {
  form;

  constructor(
    private formBuilder: FormBuilder,
    @Inject(lookupListToken) public lookupLists,
    private router: Router) {}

  ngOnInit() {
    vpView.start();
    // mark start of vp
    vpView.markViewChangeStart();
    // mark view change start
    }

  ngOnChanges() {
    .....
    }  

  ngOnDestroy() {
    vpView.markViewChangeEnd();
    // mark view change end
    vpView.markViewDOMLoaded();
    // mark dom loaded
    vpView.markXhrRequestsCompleted();
    // mark xhrs completed
    vpView.markViewResourcesLoaded();
    // mark resources loaded    
    vpView.end();
    // mark end of vp
    ADRUM.report(vpView);
    // report vp
    }

}

// app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const appRoutes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'all' }
];

export const routing = RouterModule.forRoot(appRoutes);

export class AppRoutingModule {
constructor(router:Router) {
var vPageView = new ADRUM.events.VPageView();

router.events.forEach((event: NavigationEvent) => {
// NavigationStart
var absoluteURI = ADRUM.utils.getFullyQualifiedUrl(event.url);
if(event instanceof NavigationStart) {
console.log(ADRUM.utils.getFullyQualifiedUrl(event.url));
vPageView = new ADRUM.events.VPageView({
url: absoluteURI,
});
console.log("init adrum pg");
vPageView.start();
vPageView.markViewChangeStart();
console.log(vPageView);
}

// NavigationEnd
if (event instanceof NavigationEnd) {
//give it 0.5s
setTimeout(function(){
console.log("NavEnd");
vPageView.markViewChangeEnd();
vPageView.markViewDOMLoaded();
vPageView.markXhrRequestsCompleted();
vPageView.markViewResourcesLoaded();
vPageView.end();
ADRUM.report(vPageView);
console.log(vPageView);
}, 500);

}
// NavigationCancel
// NavigationError
// RoutesRecognized
});
}

}
Version history
Revision #:
3 of 3
Last update:
‎12-11-2017 04:33 PM
Updated by:
 
Labels (1)
0 Kudos