Introduction

The main goal of developing the Angular WPS Client Library was to support developers creating new WPS clients in Angular by making the library easy to import and use. The developers will know in adavance the Type information of the request & response objects exchanged with the WPS server since Typescript is a statically typed language. Another benefit of creating this WPS library in angular is the IDE friendliness with features such as Auto-completion and Compile Time Error detection.

This project also has a Typings file containing the Type information for the imported wps-js project. The benefit of adding Typings within our new Angular Client project is that we will still maintain the Type information for all the functionalities imported from wps-js (written in Javascript, which is a dynamically typed language). In fact, Angular encourages the addition of Types to external Javascript libraries and allows for the creation of a separate file with the name typings.d.ts to define the Type information for all the functions in Javascript. See more details of our project’s Typings file here.

Current Development

In accordance with the latest OGC-WPS 2.0 standards, our current Angular Library (wps-js-ng) must have 5 major functionalities: Capabilities, Describe/Execute a Process, Process Status and Process Result. So far (before mid-term), Capabilities and Describe Process modules are completed and the Execute Process part is in progress.

The core features in this Angular Library are imported through the pre-existing wps-js project, which is available as a Javascript file. Importing a js-file in Angular as an external script  file, however, is not the best coding practice. Therefore we published the wps-js library on npm. It is available at this link. Once the library is available on npm, its easy to import it in the Angular Project through the scripts tag as shown in the example below:

“scripts”: [ “node_modules/jquery/dist/jquery.js”, “node_modules/wps-js-52-north/src/web/js/wps-js-all.js”]

Finally, I have also created an Angular Client to show the Input Request and the response of all the WPS functionalities.

Current Model Objects

The project can be broadly divided into 5 modules, two of which are completed and the rest are in progress as listed in the table below:

Model Class	Description	Current Status
Capabilities	To fetch all capabilities of the server.	Completed
Process Description	To store Description, Input, and Output Type for each process.	Completed
Execute Process	To store the response object after the successful execution of a Process.	In progress
Get Status	To store the Success/Failure of a process upon executing request.	Pending
Get Result	To store the Complex Data Response upon the successful execution of a process.	Pending

Capabilities

The Capabilities response model object will store the response from the GetCapabilities Operation, which allows a client to retrieve service metadata, basic process offerings, and the available processes present on a WPS server. The detailed UML diagram for the Response is shown below: 

Process Description

The Process Description response objects contain the elements that link to documentation resources on the behavior and mechanics of a process, as well as descriptive elements about its inputs and outputs. This information is necessary to retrieve information on the types of input and output, as well as response. Below is the detailed UML diagram of the Process Description Module: 

Proposed Execute Process Model

The Execute operation allows WPS clients to run a specified process implemented by a server using the input parameter values provided and returning the output values produced. The UML diagram below represents the proposed model for ExecuteProcess module:

UI Client a & Additional Features

One of the main additional features we propose to develop is the Angular UI Client, which will have a split view. On the left-hand side, the user can select options from several modules, such as Capabilities or Process Description. The right-hand side will render a “pretty json” of the response object.

This client will serve as a starting example for any client that is willing to use our Angular Library.

Finally, this Angular Library is developed with ts-lint to style-check the Typescript code. In addition, jQuery is added to support the wps-js library, which is imported in this project. The table below demonstrates the current progress of the additional features.

Feature	Description	Current Status
ts-lint	Tool to check on typescript syntax.	Completed
jQuery	To support wps-js	Completed
Typings	Typings file to define type definition for wps-js.	In Progress
Angular Client UI	To call and show demo API server	In Progress
Bootstrap UI	To enhance the UI view with forms.	Completed
Karma & Test Cases	Testing all functionality and modules	Pending

 

Feedback and Contact:

Feedback is much appreciated and we would try our best to accommodate any additional requests. If you have any feedback and suggestions regarding the Angular Library or Client, please reach out to me at or .