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

Integrating DocuVieware in your AngularJS 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 file and one CSS file, both 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.

Prerequisite
Copy Code
<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 tutorial it is assumed that the service is locally running on the machine using the port 62968. The complete URL to the method is 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 AngularJS

Here is the minimum HTML structure you need 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 the structure clarity, make sure to refer to the previous section in order not to forget anything.

Integrating the DocuVieware™ in an AngularJS.
Copy Code
<!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>

Then, here is the AngularJS code that will access the REST service and embed the result in the page.

Accessing the REST service.
Copy Code
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"]);
     });
 }]);
See Also