• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Devaka Cooray
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Knute Snortum
  • Bear Bibeault
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Tim Holloway

Angular HTTPClient operations to a real RESTful Web Service instead an API-based Service

 
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello,
I have been studying Angluar 4 and I am  enjoying it very much.
On the Angular Website I am currently focused on the HttpClient feature.  I am using Webstorm with typescript as my IDE of choice.  All of the examples are working very well.  But it appears that all of the exercises I have seen regarding Angular's newer HttpClient product...  all the examples, and the tutorials throughout the Web,  .... all use an API as the data source.   I am asking if there is some way to send Http Requests to a real, actual RESTful Web Service ----- not just an API.  
Any thoughts ?
Thanks.
 
Sheriff
Posts: 67269
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
How is "a real, actual RESTful Web Service" not an API?

Can you clarify what you mean by "API"?
 
Andrew Jerpe
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a 'traditional' Web Service that resides on a Tomcat v7 Server, operating as a 'localhost' on my PC.  It hosts a standard RESTful Web Service,  which is publicly published on the internet.  I want to point my Angular app to its url, and send an Http GET request to it.  I can successfully test the correct url using the Postman utility.  It is correct.

Conversely, An API Host acts as kind of an embedded Data Source w/e to my Angular application. Everything seems to work fine when the http url in my Anglular app is pointing to this "embedded" quasi Host. But such an embedded host ( often referred to as the 'API')  does not work for me.  I need to interact with my REMOTE RESTful Web Service.
 
Andrew Jerpe
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I mean that there is a commonly-used mechanism in Angular(4) HttpClient  technology that works as a "simulation" of a remote Http Server.   But it is actually a Javascript class that generates test data.  It is commonly referred to as an "API" database, as opposed to the thing that it is emulating... a file of data ( in xml, text, or json format) residing on a remote Web Service, which is only accessible via the internet.  My Angular-4 app works fine with the API used as a "back-end".  But it does not even generate a request message when the target of the url is a real Web Service.  I need some helpful suggestions in an effort to remedy this.
Thanks.
 
Andrew Jerpe
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Ron.  This site is a wonderful resource.  Good Job !
 
Bear Bibeault
Sheriff
Posts: 67269
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
To contact a remote API you would, of course, need to specify the full URL of the service. And the service must support CORS to enable cross-origin requests.

Does the existing code treat the local API calls as asynchronous? If so, it should be fairy straight-forward. If not, well, that's more complicated.
 
Saloon Keeper
Posts: 2621
329
Android Eclipse IDE Angular Framework MySQL Database TypeScript Redhat Java Linux
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It sounds like you have some misunderstandings about an API is and HttpClient does.  HttpClient is not a kind of mock data source, it is the module use to perform HTTP operations over the network with servers.  It is what you would use to communicate with your Tomcat server.

There are probably plenty of examples on using HttpClient, but I'll post a simple one, showing how it can be used to GET a resource from a server.  The server in the example is an open public server, so you could actually run this code yourself and see it work.

my-ip.ts
my-public-ip.service
show-me.component.ts
my-component.html
 
Andrew Jerpe
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for the code example Ron.  I agree that I am confused.  Your code looks good.

Also,  I notice that the service in your example has to be imported into the build.   That is what I an struggling with.  I would prefer to use the HttpClient feature to send a GET request to a Service that isn't imported into the build.  I would like to send the Http request to a remote Web Service that (otherwise) has nothing to do with the HttpClient app.  It is not associated with the Client App.   This is the standard usage of HttpClient in Java.   In its typical usage,  the target URL is going out to a different machine on the Internet, rather that to a local built-in API.  

But I see no mention of such Java-like usage in Angular.  That is what is really confusing me.  (  actually it is "baffling" me.  ).  

The code sample helps explain some of the syntax issues though.  Especially the usage of 'subscribe'.  Thanks again.
 
Ron McLeod
Saloon Keeper
Posts: 2621
329
Android Eclipse IDE Angular Framework MySQL Database TypeScript Redhat Java Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Andrew Jerpe wrote:In its typical usage,  the target URL is going out to a different machine on the Internet, rather that to a local built-in API.


The URI in the example is an endpoint on the Internet - hosted in the AWS cloud in Ashburn, Virginia.  It's not running local in the browser.
 
Ron McLeod
Saloon Keeper
Posts: 2621
329
Android Eclipse IDE Angular Framework MySQL Database TypeScript Redhat Java Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Andrew Jerpe wrote:I notice that the service in your example has to be imported into the build.   That is what I an struggling with.


When you say imported in to the build, are you referring to import { MyPublicIpService } from './services/my-public-ip.service'; in show-me.components.ts or import { MyPublicIpService } from './services/my-public-ip.service'; in app.modules.ts?

Why do you feel that it is any different than using an import statement in Java or similar syntaxes with other languages?
 
Ron McLeod
Saloon Keeper
Posts: 2621
329
Android Eclipse IDE Angular Framework MySQL Database TypeScript Redhat Java Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Ron McLeod wrote:

Andrew Jerpe wrote:In its typical usage,  the target URL is going out to a different machine on the Internet, rather that to a local built-in API.


The URI in the example is an endpoint on the Internet - hosted in the AWS cloud in Ashburn, Virginia.  It's not running local in the browser.


Change the URI to point to your own Tomcat server and see what happens, or maybe disconnect from the Internet and see if ti still displays your IP address.
 
Andrew Jerpe
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Many Thanks all.  I have gotten a lot of good ideas from your responses.  I think I need to learn more about inserting CORS headers into my requests.  That sounds intriguing to me.  Also,  I feel that, for me,  the issue of going back and verifying the URL references to the target host needs to be delved into much more deeply.    This is great progress.
I will also try the example Ron McLeod sent me .....  and I appreciate his time and effort.  
I will keep you posted on any new results.  If nothing works after pursuing these new ideas ... I will return and bother you all some more .......

Thanks.
 
Andrew Jerpe
Greenhorn
Posts: 22
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My problem turned out to be all about the inclusion of the 'HttpClientInMemoryWebApiModule.forRoot() method', which I had included in my project because it was in the Demo app from the Angular website.
Had I only taken the time to read the comment,  i would have never added it to my build...
I deleted the code representing the forRoot() method ( within the 'imports' array of @ngModule )  and good things began to happen.
I can exercise my Angular app, including he HttpClient operations,  against my localhost now.

Within the app.module.ts file, was the block of code that was causing my problem::

   // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
   // and returns simulated server responses.
   // Remove it when a real server is ready to receive requests.
   HttpClientInMemoryWebApiModule.forRoot(
     InMemoryDataService, {
       dataEncapsulation: false,
       passThruUnknownUrl: true,
       put204: false // return entity after PUT/update
     }
   )
 ],
 declarations: [

  ...
  ...


Thank you VERY MUCH for your helpful idea.  Great website !

You can close this one out now.......  
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!