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
  • Shalim Ahmed

    I have also fetching same issue. But still not getting any solution.