Ionic 2 - Sunucudan Veri Alma - Nazir Doğan Code Blog

project structure

Mobil uygulamaların birçoğu servis olmadan çokta birşey ifade etmezler. ve birçok uygulama REST ve benzeri servisleri kullanmaktadır. Şimdi bizde yapacağımız uygulama ile basit bir servis çagırısı yapıp veriyi ekrana basacağız.

Yapacağımız uygulama basit bir hava durumu uygulaması olacak. Servisden veriyi alma dışında Geolocation pluginini kullanımını göreceğiz. Ayrıca ionic'in yeni CLI yeni özelliğinden bir tanesini kullanacağız.

Şimdi uygulamayı oluşturarak başlayalım.

 ionic start Ionic2Weather blank --v2
 cd Ionic2Weather

uygulamayı oluşturuduktan sonra ilk iş olarak servis için provider'i üretiyoruz.

Bunu Ionic CLI'da bulunan generate komutu ile yapıyoruz.

Not : Bu komut ile sayfa sayfa'da generate edilmekte. Dökümanda bulabilirsiniz.

ionic g provider MyData

yukaradaki komut ile Ionic bizim için yok ise bir providers klasörü oluşturuyor. Ayrıca verdiğimiz isimde bir klasör daha oluşturup içerisinde aynı isimle typescript dosyası oluşturuyor.

providers - > my-data -> my-data.ts

// http://ngcourse.rangle.io/handout/di/angular2/inject_and_injectable.html import { Injectable } from '@angular/core'; // HTTP modulünü import ediyoruz. import { Http } from '@angular/http'; // rxjs kütüphanesinden map'i ekliyoruz. import 'rxjs/add/operator/map'; /* Generated class for the MyData provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular 2 DI. */ @Injectable() export class MyData { data: any; constructor(private http: Http) { this.data = null; } load() { if (this.data) { // already loaded data return Promise.resolve(this.data); } // don't have the data yet return new Promise(resolve => { // We're using Angular Http provider to request the data, // then on the response it'll map the JSON data to a parsed JS object. // Next we process the data and resolve the promise with the new data. this.http.get('path/to/data.json') .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); }); }); } }

Comments