Using your generated Angular JS SDK

This article is now deprecated. SDK usage instructions are now contained in the generated SDK.

See the new APIMATIC docs.

In this article, we will walk you through the generation of the SDK and how to use it.

The following covers the following aspects:

  1. Setting up the environment
  2. SDK generation instructions
  3. SDK installation instructions
  4. Creating a sample application that uses our SDK

Note: The code for this tutorial is provided as a zip file available for download here.

1. Setting up the environment:

Following this tutorial here, a library is already generated, downloaded, and ready for use.

You can use your favorite text editor.

2. SDK generation instructions:

After choosing Angular JS as your code language, as shown in Figure 1, a zipped file will be downloaded. This file contains the code for the APIMATICCalculator library we will be using in our project. 

Image not found
Figure 1: Choosing Angular JS as the language of generation.

 

3. SDK installation instructions:

In order to use your library, you have to unzip it first. 

Extract the unzipped file to a new folder, as shown in Figure 2. 

Image not found
Figure 2: Unzipped library contents.

 

4. Creating a sample application:

The following section explains how to create a new application that uses your generated apimatic calculator library.

 4.1 Starting a new project

On starting a new project, create a new folder with your project name "myCalculator".

Inside this folder, there should be:

  1. A new file with the file extension (.html). This file will have HTML and JavaScript code that will use your library. 
  2. A new folder called "scripts" that will contain all the scripts needed for running your application.

Create a "main.html" file and a "scripts" folder inside myCalculator folder.

Figure 3 shows the correct folder contents. 

Image not found
Figure 3: Folder contents.

 

4.2 Creating a simple Angular JS application:

Since Angular JS is used for client-side web development, in order to use our library, we have to develop an application first. For tutorial purposes, we will develop a simple single-page application to demonstrate using our generated SDK. 

To develop a single page application, we will use an open source example provided here, as a reference. 

Image not found
Figure 4: Single-page Angular JS application.

Figure 4 shows how your "main.html" file should look like at this stage, after doing the following steps: 

  1. Adding the script that provides the singe-page app (line 2)
  2. Adding a controller to a <div> (line 6) 

 

4.3 Using your library in your project:

In order to use your library, first you have to add its scripts to your html file using the "<script>" tag. 

After that, you need to instantiate its objects and invoke their functions.

To get our calculator running, we need to invoke the asynchronous function getCalculate, shown in Figure 5, on the controller object.

Image not found
Figure 5: getCalculate function.

 

This function takes an "input" object that contains:

  1. An operation of type enum (e.g. SUM) 
  2. Two doubles; x and y

 

Figure 6 shows how your main class should look like after doing the following steps in order:

  1. Adding your SDK scripts at the top (lines 4-13)
  2. Instantiating the SimpleCalculatorController (line 32)
  3. Invoking the getCalculate() function on it (line 32)
  4. Defining the input parameter for the function (lines 26-30) 
  5. Displaying the result to the webpage (line 19)

 

Image not found
Figure 6: Complete main.html code.

 

How it works:

  • The "PageCtrl" controller instantiates the "SimpleCalculatorController" controller and calls its calculate method. On success, it will assign the "message" to a string (line 34) that contains the result of the operation (sum of two numbers in this case). The "message" is then displayed in the webpage (line 19)
  • On failure, it will print an error message to the console (line 37)

Note : This is a basic application to show how to use your SDK in your Angular JS code. The means used to display the result and/or error messages, the format of the html page and the complexity of your application is up to you to control, improve and implement.

You are ready to run the application .

 

4.3 Running your application:

To run this application, double-click on your "main.html" file to open it in your browser.  

Figure 7 shows how the webpage would look like at this stage.

Image not found

Figure 7: Final application webpage

 

Go to top

Download files below.

Have more questions? Submit a request

Comments