AngularJS 2 Nedir? Bölüm 5

Selamlar,

Bugün Angular2’de nasıl server’a bağlanılır ve bir servisden nasıl data çekilir hep beraber inceleyeceğiz.

Http işlemlerinin yapılabilmesi için Index.html sayfasına aşağıdaki modullerin eklenmesi gerekmektedir:

<script src=”node_modules/angular2/bundles/http.dev.js”></script>

Örnek Json servisi için http://jsonplaceholder.typicode.com/ adresinden faydalanılacaktır. Amaç ilgili sevisden data çekmektir.

post.service.ts: Bir json servisden data çekmek ve post etmek için PostService adında yeni bir provider yazılacaktır. Aşağıdaki örnekde :

  • “map”‘leme ve asenkron yüklme için gerekli olan “toPromise” ve “map” “rxjs” modulleri sayfanın başında import ile eklenmiştir.
  • “http.get” ve “http.post” işlemleri için en başa “http” module yine import ile eklenmiştir.
  •  Ayrıca “Observable” module’ü de yine “post” işlemi için 2. bir yöntem olarak eklenmiştir.
  • “getPosts()” methods ile”jsonplaceholder” sitesinden örnek amaçlı json data çekilmiştir.
  • “getPosts()” 1. Yöntem de “Observable” ile ilgili siteden Constructor’da alınan, Http sınıfından alınan”_http”.”get()” methodu ile ilgili data alınmış ve “.map()” ile gelen result “json”‘a çevrilmiştir.
  • “getPosts()” 2. Yöntem de asenkron bir yapı sağlıyan “promis()” kullanılmış ve diğerinden farklı olarak json() olarak çekilen datanın sonuna “.toPromis()” methodu eklenmiştir.
  • “createPost()” methodunda “_http.post()” methodu ile methoda gelen “Post” “JSON.stringify()” ile post edilir yani gönderilir. Gelen cevap “json” tipinde map() lenir.

Get() Methodu ile Url’den Dönen Örnek Json Data:

postjson

Post.ts: Çekilen ve Post edilen Url dataya karşılık gelen Post sınıfı. Yani data model’imiz aşağıdaki Post sınıfıdır.

app.component.ts:  Aşağıdaki örnekde 2 yöntem kullanılmıştır. Amaç ilgili servise post işlemi yapmaktır.

  1. Durum Http.Post “Constructer”‘da yukarıda yazılan PostService parametre olarak alınır. Yeni bir “Post()” nesnesi oluşturulup ilgili propertyler’i doldurulduktan sonra “PostService”‘in “createPost()” methodu çağrılır. Ve ilgili data gönderilir.
  2. Durum Http.Get “ngOnInit()” methodunda öncelikle “PostService”‘in “getPosts()” methodu ile ilgili Post() nesneleri, ilk önce “PostService”‘indeki “Observable” ‘a karşılık gelen ==>”subscribe()” methodu kullanılarak alınmış. Daha sonra da asenkron yapıya uygun “PostService”‘indeki “Promise()” methoduna karşılık gelen ==> “then()” methodu kullanılmıştır. Çekilen tüm Post[]’si, “map()” methodu ile herbir “post” gezilerek “title”‘ı console’a yazılır.
  3. Bu işlemler sırasında, yani get işlemi yapılırken ekrana “Loading” sembolü çıkarmak için öncelikle “fontawesome.io” sitesindeki css’den faydalanılmıştır.
  4. “template” içinde ilgili div içinde *ngIf=”isLoading” ile ilgili değişkene bağlı olarak, Loading svg yani font icon ekranda gösterilmiştir.
  5. ngOnInit() methodunda ilgili AppComponent sınıfı yüklenirken “PostService”‘inden ilgili data çekilirken “isLoading” değişkenine true değeri atanmıştır. Böylece “Loading” divi’nin gözükmesi sağlanmıştır. “getPost()” işlemi bittikten sonra “isLoading” değişkeni false’a atanarak “Loading” divi’nin tekrardan gizlenmesi sağlanmıştır.

Untitled

index.html: fontawesome.io sitesindeki csslerden faydalanmak için aşağıdaki css kütüpahanesi index.html sayfasına eklenir.https://www.bootstrapcdn.com/fontawesome/” sitesinden alınan css yolu aşağıda gösterilmiştir.

Örnek : Bu örnekde GitHub’dan  kullanıcı bilgisini ve takipçilerinin listesini alıp, ilgili json datayı directive ve service ile ekrana basacağız.

AngularGit

github.service.ts: Öncelikle Github’dan user ve Followers bilgilerini çeken bir “GitHubService”‘i yazalım.

  • Öncelikle ilgili service’in başka bir sınıfa inject edilebilmesi için @Injectable() olması gerekmekte ve ilgili module’ün {Injectable} import edilmesi gerekmektedir.
  • Bir Url’den get işlemi yapılacağı için {Http} module’ünün import edilmesi gerekmektedir.
  • “Observable” ve “map”‘lame için rxjs kütüpahanesine ait {Observable} ve {Map} moduleleri import edilir.
  • GitHubService sınıfına ait olan “getUser()” ve “getFollowers()” methodları ile ilgili datalar Github’dan json olarak çekilir.

github-profile.component.ts: Şimdi sıra geldi ilgili service’i kullanarak User ve Followers bilgisini ekrana yeni bir directive ile basmaya.

  • İlgili tüm moduleler import ile eklenir. {Componenet},{OnInit},{HTTP_PROVIDERS},{Observable} ,{GitHubService} “forkJoin”
  • İlgili directive’e ait selector yani app.component’da kullanılacak element ismi “<github-profile>” olarak tanımlanır.
  • Gözükecek kullanıcı bilgisi için custom css “styles” property’si altında “.avatar” olarak tanımlanır.
  • template kısmında yine loading font icon’unun gözükmesi “isLoading” değişkenine bağlanmıştır.
  • Kullanıcı Adı {{user.login}} ve Url’i {{user.avatar_url}} olarak tanımlanmıştır.
  • Çekilen tüm “followers” listesi “*ngFor” ile gezilerek ekrana  Url {{follower.awatar_url}} ve Adı {{follower.login}} ekrana basılır.
  • providers property’s olarak kullanılacak “HTTP_PROVIDERS ve GitHubService” tanımlanır.
  • GitHubProfile sınıfının constructer’ında, yukarıda yazılan github.service’i alınır.
  • “ngOnInit()” yani sınıfın yüklenme anında, 2 servisden çekilen json result’lar “Observable.forkJoin()” methodu ile tek bir diziye atanmıştır.
  • Diziye atılan servisler map()’lem sonucları local değişkenler olan “user” ve “followers”‘a atanmıştır.
  • Son olarak ilgili servislerin completed anında, sayfada gösterilen Loading sembolü ekrandan kaldırılmıştır.

Böylece geldik bir makalenin daha sonuna. Angular2’de servislerle asenkron olarak çalışmak gerçekten çok kolay. Farklı librarylerin yardımları ile harika şeyler yapmak mümkün. Kullanılan TypeScript ile Backend ve Forntend development’ı birbirinden ayırmak nerede ise mümkün değil. Bence gün gelecek herşey client side tarafta çözülecek. Backend, sadece servislerin kullanıldığı bir yapıdan ibaret olucak. O da sadece cloude üzerinde çalışan yapılar ile client arasında bir köprü olacak.

Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

3 Cevaplar

  1. yabanci dedi ki:

    angular 2 yazılarınız için teşekkürler, gerçekten özgün kaliteli bir anlatımınız var, son olarak ciddi bir projeyle bu anlatımı sonlandırmanız daha güzel sonuçlar doğurabilir.

  2. süleyman yalçın dedi ki:

    Elinize sağlık bora bey.
    Bir sorum olacaktı.
    UrlRouting yaptığımızda örn: http://www.site.com/user/detay/1 sayfasına direk girmek istediğimizde not found hatası veriyor.
    fakat HashLocationStrategy aktif edildiğinde http://www.site.com/#/user/detay/1 şeklinde bir adresleme yapıyor ve direk girişte ilgili sayfa açılıyor.
    http://www.site.com/#/user/detay/1 ilgili adreste ‘#’ işarti olamadan (PathLocationStrategy olarak adlandırılıyor galiba) direk girişlerde not found hatası almamak için ne yapmak gerekiyor.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir