Integrating DocuVieware in your AngularJS client application

This guide focuses on integrating the DocuVieware control into a client application. Follow the serving DocuVieware through a REST API guide.

Find the source code for both the REST service and integration examples in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware folder.

Legacy guide notice

This guide uses AngularJS (1.x) with ASP.NET Web API on .NET Framework 4.6.

AngularJS 1.x and .NET Framework 4.6 are no longer recommended for new applications.

This guide is intended for maintaining existing applications or environments with fixed legacy constraints.

Prerequisite

DocuVieware only requires its own JavaScript and CSS files from your [SDK INSTALL DIR]\Redist\DocuVieware (Resources) folder. In the following examples, it’s assumed that they’re available locally.

Below is what’s needed in your <head> section:

HTML
<script src="docuvieware-min.js"></script>
<link rel="stylesheet" type="text/css" href="docuvieware-min.css">

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

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

http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl

Your own implementation will mostly differ — especially the port that’s usually randomly selected upon project creation by Visual Studio. Adapt the URL to your configuration.

Integration using AngularJS

Below is the minimum HTML structure to access the REST service and integrate DocuVieware in an AngularJS client application.

The mandatory dependencies, as well as the AngularJS library, were deliberately omitted for the sake of structure clarity. Refer to the previous section to ensure nothing is forgotten.

HTML
<!DOCTYPE html>
 <html ng-app="docuViewareApp">
 <head>
 <title>DocuVieware AngularJS App</title>
 </head>
 <body ng-controller="DocuViewareController">
 <div ng-bind-html="docuViewareControlHtml" style="width: 1200px; height: 1000px;"></div>
 </body>
 </html>

Below is the AngularJS code that accesses the REST service and embeds the result in the page:

JavaScript
var 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
 };
 var docuViewareApp = angular.module("docuViewareApp", []);
 docuViewareApp.controller("DocuViewareController", ["$scope", "$http", "$sce", function ($scope, $http, $sce) {
 $http.post("http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl", docuViewareConfig).then(function (response) {
 $scope.docuViewareControlHtml = $sce.trustAsHtml(response.data["HtmlContent"]);
 });
 }]);