Angular 2 Rest API for Openmrs

Ask OpenMRS
1

Application Name: Openmrs 2.5 standalone Version Number: 2.5 I am trying to make rest api for openmrs using angular 2.I am new to angular 2.Is there any source code available which I can use as helping material to build rest api for openmrs. I am having problem with providing credential in angular 2.How I can make request to openmrs using angular 2. thanks

2

We have mostly been using angular 1 Did you take a look at this? https://wiki.openmrs.org/display/docs/REST+Module

3

Yes Thanks I explore this module but didnā€™t find any example related to angular.?Can you provide me the link for angular examples.

4

Did you try googling beginner tutorials for how to use angular?

5

yes I try but didnā€™t get any single example.I wrote this code to connect

import { Injectable } from ā€˜@angular/coreā€™; import { Http, Response,Headers,RequestOptions } from ā€˜@angular/httpā€™;

import { Observable } from ā€˜rxjs/Observableā€™; import ā€˜rxjs/add/operator/doā€™; import ā€˜rxjs/add/operator/catchā€™; import ā€˜rxjs/add/operator/mapā€™; import ā€˜rxjs/add/observable/throwā€™;

import { IProduct } from ā€˜./productā€™;

@Injectable() export class ProductService { //private _productUrl = ā€˜api/products/products.jsonā€™; //private _productUrl = ā€˜http://localhost:8092/openmrs-standalone/ws/rest/v1/conceptā€™; private _productUrl = ā€˜http://localhost:8092/openmrs-standalone/ws/rest/v1/sessionā€™;

constructor(private _http: Http) { }

getProducts(): Observable<any> {

     let username: string = 'admin';
     let password: string = 'Admin123';
     let headers: Headers = new Headers();
     headers.append("authorization", "Basic " + btoa(username + ":" + password)); 
     headers.append("Content-Type", "application/json");
     let options = new RequestOptions({ headers: headers, withCredentials: true });

     return this._http.get(this._productUrl,options)

        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);

}
 private handleError(error: Response) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

} but it didnā€™t connect with local host.

6

How about this? https://www.slideshare.net/sunbiz/angularjs-and-rest-omrs15-tutorial

7

No example related to my query.I am trying to connect with openmrs server using above code.?I

8

By the way, did you get a chance to look at these? https://wiki.openmrs.org/pages/viewpage.action?pageId=93359610 https://wiki.openmrs.org/display/docs/Open+Web+Apps+Module

9

@naveed1228, we have only provided AngularJS (1.x) examples and a simple openmrsRest service facade for the http service, see https://github.com/openmrs/openmrs-contrib-uicommons#openmrs-rest-module and e.g. https://github.com/openmrs/openmrs-module-metadatamapping/blob/master/owa/app/js/mapping/mapping.controller.js#L50-L52

Angular 2 is not yet covered, but should be similar. Please share a link to a repository with a full project, which I could run to reproduce the error and help you.

10

Thanks Rafal.I uploaded just the src folder kindly look at it. Here is the link.

11

These all are not related to angular 2.I searched them all.If possible write angular 2 code to connect with openmrs.It will be very helpful for newbie like me.

12

have you try out this.Rafal

13

I looked at it, but I havenā€™t found any instructions on how to build or run it. Please include that in README.

One idea is that you donā€™t seem to be deploying your app to the openmrs server e.g. as a module or OWA and such http calls are blocked by default. Read up on CORS and how to enable it for your server. See also Add CORS support to REST module for some hints.

14

Yes you well understood my problem.I am trying to use openmrs as backend for learning angular 2 for REST API.I donā€™t have any issues in my code.CORS is just one problem for me.Is there any guide how to enable it localhost beacause I donā€™t have any openmrs developement.I am just using standalone openmrs 2.5 as backend.

15

Please see https://enable-cors.org/server_tomcat.html

The web.xml, which you need to modify is in tomcat/conf/ in the standalone directory. You need to restart the standalone for the changes to take effect.

16

I try with this but problem remains the same.Do I need to put something extra in config/web.xml file.

ScreenshotCORS.png1186Ɨ208 8.4 KB

17

What is the error you get? Paste your entire web.xml after modification.

18

I am getting this error. XMLHttpRequest cannot load http://localhost:8093/openmrs-standalone/ws/rest/v1/location. Response to preflight request doesnā€™t pass access control check: No ā€˜Access-Control-Allow-Originā€™ header is present on the requested resource. Origin ā€˜http://localhost:3000ā€™ is therefore not allowed access. zone.js:1382 XHR failed loading: GET ā€œhttp://localhost:8093/openmrs-standalone/ws/rest/v1/locationā€.

19

Itā€™s a CORS issue indeed. Please paste your entire web.xml.

20

Sorry file size is too high.So I am uploading it at github kindly check it there.