In This Topic
Tutorials / Other Technologies / Angular2 / Integrating DocuVieware in your Angular2 client application

Integrating DocuVieware in your Angular2 client application

In This Topic
The purpose of this tutorial is to highlight the integration of the DocuVieware™ control into a client application, so please first be sure to follow the Serving DocuVieware through a REST API tutorial.
The source code of both REST service implementation and integration are available in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware\ folder.
 Prerequisite

DocuVieware™ only requires its own JavaScript that can be found in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources)\ folder. In the following examples, it will be assumed that they are available locally.

Here is was you need to have in your <head> section:

Prerequisite
Copy Code
<!-- DocuVieware resources -->
<script src="docuvieware-min.js"></script>

The last thing required is the complete and accurate URL your REST service is reachable at.

For this tutorial it is assumed that the service is locally running on the machine using the port 62968. The complete URL to the method is:

The URL for your REST service.
Copy Code
'http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl'

Be careful: your own implementation will most probably differ, especially the port that is usually randomly selected upon project creation by Visual Studio so be sure to adapt the URL to your configuration.

 Integration using Angular2
This tutorial assumes that you have all the Angular, node.js and their prerequistes and modules already installed and set.

In order to integrate DocuVieware™ in an Angular2 client application let's create a DocuVieware™ component and service so it can be inserted in the HTML using a simple <docuvieware></docuvieware> tag.

First, the service, this is the part that will actually access the REST API through a POST request that will return the control markup. This is also where you want to set the control properties as you need them.

docuvieware.service.ts
Copy Code
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
@Injectable()
export class DocuViewareService {
    headers: Headers;
    options: RequestOptions;
    constructor(private http: Http) {
       this.headers = new Headers({ 'Content-Type': 'application/json' });
       this.options = new RequestOptions({ headers: this.headers });
    }
    getDocuViewareMarkup() {
       let docuViewareConfig = {
          SessionId: 'mySessionId', //Set to an arbitrary value, should be replaced by the session identifier from your session mechanism
          ControlId: 'DocuVieware1',
          AllowPrint: true,
          EnablePrintButton: true,
          AllowUpload: true,
          EnableFileUploadButton: true,
          CollapsedSnapIn: true,
          ShowAnnotationsSnapIn: true,
         EnableRotateButtons: true,
          EnableZoomButtons: true,
          EnablePageViewButtons: true,
          EnableMultipleThumbnailSelection: true,
          EnableMouseModeButtons: true,
          EnableFormFieldsEdition: true,
          EnableTwainAcquisitionButton: true
       };
       let body = JSON.stringify(docuViewareConfig);
       return this.http
          .post('http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl', body, this.options)
          .map(this.extractData)
          .catch(this.handleError);
    }
    private extractData(res: Response) {
       let body = res.json();
       return body || {};
    }
   private handleError(error: any) {
       let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
       console.error(errMsg);
      return Observable.throw(errMsg);
    }
}

Then the component that will handle the <docuvieware> tag using the newly created service. Note that this is where the DocuVieware™ CSS is injected so it needs to be available locally (just like the JS, you will find it in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources)\ folder).

docuvieware.component.ts
Copy Code
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DocuViewareService } from './docuvieware.service'
@Component({
    selector: 'docuvieware',
    template: `<div id="dvContainer" style="width:1200px; height:1000px;"></div>`,
    styleUrls: ['docuvieware-min.css'],
    encapsulation: ViewEncapsulation.None
})
export class DocuViewareComponent implements OnInit {
   htmlContent: any;
   constructor(private docuviewareService: DocuViewareService) {
   }
   ngOnInit(): void {
      this.docuviewareService.getDocuViewareMarkup().subscribe(
         response => this.insertElement(response["HtmlContent"]),
         error => this.htmlContent = <any>error
      );
   }
   insertElement(content: string): void {
      const fragment = document.createRange().createContextualFragment(content);
      document.getElementById("dvContainer").appendChild(fragment);
   }
}

Finally, it needs to be wrapped in an app.module.ts file so it can be injected in the main.ts.

app.module.ts
Copy Code
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { DocuViewareService } from './docuvieware.service'
import { DocuViewareComponent } from './docuvieware.component'
@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [DocuViewareComponent],
    providers: [DocuViewareService],
    bootstrap: [DocuViewareComponent]
})
export class AppModule { }
main.ts
Copy Code
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
See Also