Making AngularJS Work with DWT

AngularJS is a Web application framework for rendering dynamic Web content with MVC architecture. It reduces amount of JavaScript code with the feature of two-way data binding. More and more developers tend to use Angular for client-side development. Therefore, I’d like to share how to change the basic scanning demo of Dynamic Web TWAIN SDK with AngularJS today.

angularjs_dwt

Web Scanning Apps with AngularJS

  1. Download Dynamic Web TWAIN SDK and angular.js.
  2. Copy Resources and HelloWorld.html from {Dynamic Web TWAIN SDK}\Samples\Getting Started to your new project.
  3. Open HelloWorld.html, and add Angular directives to HTML elements.

     <!DOCTYPE html>
     <html ng-app="WebScanning">
     <head>
         <title>Dynamic Web TWAIN with AngularJS</title>
         <link rel="stylesheet" href="css/dwt.css">
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
         <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
         <script type="text/javascript" src="js/angular.js"> </script>
         <script type="text/javascript" src="js/twain.js"> </script>
     </head>
        
     <body>
     <h1>Dynamic Web TWAIN with AngularJS</h1>
        
     <table>
         <tr>
             <td>
                 <div id="img"></div>
             </td>
         </tr>
         <tr>
             <td>
                 <!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
                If you need to rename the id, you should also change the id in dynamsoft.webtwain.config.js accordingly. -->
                 <div id="dwtcontrolContainer"></div>
             </td>
         </tr>
        
         <tr>
             <td>
                 <div ng-controller="twainControl">
                     <button ng-click="acquireImage()">Scan</button>
                 </div>
             </td>
         </tr>
     </table>
        
     </body>
     </html>
    
  4. Move relevant JavaScript code to twain.js.

     function twainControl($scope) {
         $scope.acquireImage = function() {
             var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'.
             DWObject.IfDisableSourceAfterAcquire = true;    // Source will be closed automatically after acquisition.
             DWObject.SelectSource();                        // Select a Data Source (a device like scanner) from the Data Source Manager.
             DWObject.OpenSource();                          // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
             DWObject.AcquireImage();
         };
     }
        
     var app = angular.module('WebScanning', []);
     app.controller('twainControl',twainControl);
    

Using AngularJS, the sample code becomes much cleaner and more readable.

Source Code

https://github.com/DynamsoftRD/DWT-with-Web-App-Framework/tree/master/angularjs

git clone https://github.com/DynamsoftRD/DWT-with-Web-App-Framework.git

Search Blog Posts