Tutorials
/ Other Technologies
/ Angular2
/ Integrating DocuVieware in your Angular2 client application
Integrating DocuVieware in your Angular2 client application
In This Topic
The purpose of this tutorial is to highlight the integration of the DocuVieware™ control into a client application, so please first be sure to follow the
Serving DocuVieware through a REST API tutorial.
The source code of both REST service implementation and integration are available in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware\ folder.
Prerequisite
DocuVieware™ only requires its own JavaScript that can be found in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources)\ folder. In the following examples, it will be assumed that they are available locally.
Here is was you need to have in your <head> section:
The last thing required is the complete and accurate URL your REST service is reachable at.
For this tutorial it is assumed that the service is locally running on the machine using the port 62968. The complete URL to the method is:
Be careful: your own implementation will most probably differ, especially the port that is usually randomly selected upon project creation by Visual Studio so be sure to adapt the URL to your configuration.
Integration using Angular2
This tutorial assumes that you have all the Angular, node.js and their prerequistes and modules already installed and set.
In order to integrate DocuVieware™ in an Angular2 client application let's create a DocuVieware™ component and service so it can be inserted in the HTML using a simple <docuvieware></docuvieware> tag.
First, the service, this is the part that will actually access the REST API through a POST request that will return the control markup. This is also where you want to set the control properties as you need them.
Then the component that will handle the <docuvieware> tag using the newly created service. Note that this is where the DocuVieware™ CSS is injected so it needs to be available locally (just like the JS, you will find it in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources)\ folder).
Finally, it needs to be wrapped in an app.module.ts file so it can be injected in the main.ts.
See Also