- Ionic-Angular app that displays data about countries from a SOAP API
- Data fetched using the SOAP web services, instead of Representational State Transfer (REST), over HTTP
- Tutorial Code from Simon Grimm - see 👏 Inspiration below
- Note: to open web links in a new window use: ctrl+click on link
- SOAP uses eXtensible Markup Language (XML)
- The SOAP API data is from the DataFlex Web Service - no API key needed
- ngx-soap requires a list of dependencies, including browser buffer module, concat-stream to collect all the data from a stream into a single buffer, core-js modular standard library, crypto-js library of crypto standards, events event emitter, lodash library, sax sax-style parser for XML and HTML, stream for Node.js streams in the browser & uuid for creation of RFC4122 UUIDs. This creates a huge vendor build bundle (5.29MB) - see source-map image
- source-map-explorer installed globally and used to generate Source-map
- Postman List of SOAP APIs
- This file was copied into
assets/CountryInfoServices.xml
as the WSDL document - SOAP does not have to be used with HTTP although in this app it is
- Ionic v6
- Angular v13
- Ionic/angular v6
- rxjs v7 Reactive Extensions library
- ngx-soap v0.7.0 SOAP client for browser.
- uuid v3.3.2 for the creation of RFC4122 UUIDs. Do not update to latest version or the app will not work.
- Web Services Definition Language WSDL structured communications language used in conjuction with the SOAP protocol over HTTP
- Run
npm i
to install dependencies - Run
ionic serve
to start the server on localhost://8100 - Run
npm run lint
to lint entire app. No linting errors - Run
npm run build
to create a build file - Run
npm run build --prod
to create a build file with named chunks and a source map - Run
source-map-explorer www/main*.js
to view source map
data.service.ts
creating a SOAP client
constructor(private soap: NgxSoapService) {
this.soap.createClient('./assets/CountryInfoService.xml').then((client) => {
this.client = client;
this.clientReady.next(true);
});
}
- SOAP is highly standardized, allows for automation in certain cases, and is more secure
- ACID stands for Atomicity, Consistency, Isolation, and Durability, an enterprise-grade transaction quality and one of the reasons why SOAP is still used when exchanging sensitive information in enterprise architectures.
- SOAP APIs almost always use a WSDL document.
- SOAP supports stateful and stateless operations.
- XML response messages can include an error code and its explanation.
- Status: Working
- To-do: Nothing.
- Simon Grimm: How to use a SOAP API with Ionic
- SmartBear: SOAP vs REST. What's the Difference?
- Alexsoft: What is SOAP: Formats, Protocols, Message Structure, and How SOAP is Different from REST
- 5 Tips to Improve Ionic Angular App Performance
- N/A
- Repo created by ABateman, email: gomezbateman@yahoo.com