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.


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">
        <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>
    <h1>Dynamic Web TWAIN with AngularJS</h1>
                <div id="img"></div>
                <!-- 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>
                <div ng-controller="twainControl">
                    <button ng-click="acquireImage()">Scan</button>
  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.
    var app = angular.module('WebScanning', []);

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

Source Code

git clone