
We have to add a Provider which can be used to make an HTTP request to an API. In order to create a Provider run the following in the root of the Ionic project,
ionic g provider NewsService
This will create a folder as providers which contains news-service.ts file.
Now, create a method to get data from a external URL using HTTP Get.
loaddata() { if (this.data) { // already loaded data return Promise.resolve(this.data); } return new Promise(resolve => { this.http.get('your external api to load data') .map(res => res.json()) .subscribe(data => { // we've got back the raw data, now generate the core schedule data // and save the data for later reference this.data = data; resolve(this.data); }); }); }
Now, Import the NewsService to your page using the following code,
import { NewsService } from '../../providers/news-service';
Include the provider inside @component
@Component({ selector: 'page-page1', templateUrl: 'page1.html', providers: [NewsService] })
And in your controller create a public variable to hold the data from the external server, create a news property, import the NewsService, and assign the NewsServiceto a property of the class. loadNews() will call the newsService.load method and assign the result of the promise in a news property of the class.
export class Page1 { public news: any; constructor(public newsService: NewsService) { this.loadNews(); } loadNews() { this.newsService.load() .then(data => { console.log(data); this.news = data; }); } }
Now, ionic serve to run the application so that here when page1 loads, a external call will be made, you can check your network tab to verify the working.