getting started

Getting Started

The Essential Angular Signature simplifies creation of a signature capture in a browser, allowing a user to draw a signature either using mouse or touch.

This section explains briefly about how to create a Signature component in your application with AngularJS by the following step-by-step instructions. The following screenshot demonstrates the functionality of Signature component.

Create Signature

Create a new HTML file and include the below code:

HTML

<!DOCTYPE HTML>
    <html lang="en" ng-app="syncApp">
    <head>
        <title>Essential Studio for JavaScript : Angular JS Support for Signature </title>
        <!-- Style sheet for default theme (flat azure) -->
        <link href="http://cdn.syncfusion.com/**24.2.3**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <!--Scripts-->
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"> </script>
        <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
        <script type="text/javascript" src="http://cdn.syncfusion.com/**24.2.3**/js/web/ej.web.all.min.js "></script>
        <script src="http://cdn.syncfusion.com/**24.2.3**/js/common/ej.widget.angular.min.js"></script>
        <!--Add custom scripts here -->
    </head>
    <body ng-controller="SignatureCtrl">
        <!--Add necessary HTML elements-->
    </body>
    </body>
</html>

The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you have to define your directives, services, filters and configurations.

A controller is defined using ng-controller directive. Each controller accepts an object $scope which we pass as a parameter. This object is used to bind the controller with view.

Properties can be bind to ejSignature component using the prefix e- and particular property name.

Add div element to create Signature.

HTML

<div ng-controller="signatureCtrl">
                    <div id="signature" ej-signature e-height="height"></div>     
    </div>

Add the following script to create the signature.

syncApp.controller('signatureCtrl', function ($scope) {
            $scope.height = 400,
                   });

The following screenshot is the output for the above code.

Adjusting Signature Size

You can customize the width and height of the Signature by e-width and e-height properties. These properties completely depend on signature canvas. The width and height are adjusted within the signature canvas.

The following code example is used to render the Signature component with customized width and height.

Add the following HTML to render signature.

HTML

<div ng-controller="signatureCtrl">
                    <div id="signature" ej-signature e-height="height" e-width="width" e-isresponsive="true" ></div>     
    </div>

Add the following script to render signature with customized width and height.

syncApp.controller('signatureCtrl', function ($scope) {
             $scope.height = 300,
             $scope.width = 200,             

        });

The following screenshot illustrates signature with customized width and height.