Angular HTTP Servislerinde Exception Handling

Merhabalar. Bu yazımda  Angular Http servislerini kullanırken dönen hatanın nasıl yönetilebileceğine dair bir kaç satır kod yazacağım.

Hatanın yönetimi için öncelikle aşağıda ki import ları kesinlikle servisinize eklemeniz gerekir.

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/catch';

import 'rxjs/add/observable/throw';

Daha sonra ise yine önceden yazdığımız ve response olarak text dönen bir restful servisi service tarafında aşağıda ki gibi çağırırız.

kitapKaydet(kitap:Kitap):Observable<any>{

return this.http.post(this.apiUrl+'admin/kitapislem/saveKitap',kitap)

.map((response:Response)=><any>response)

.catch(res=>Observable.throw(res.text()));

}

Component tarafında ise bu service metodunu aşağıda ki gibi çağırırız.

this.kitapService.kitapKaydet(kitapModel).subscribe(res=>{

this.notificationService.success('Başarılı',res.text());

},

err=>{

this.notificationService.error('Hata',err);

}

);

Başka bir yazıda görüşmek üzere. Hoşçakalın...

ANGULAR 4 İLE JQUERY DATATABLE KULLANIMI

Merhabalar. Bu yazımda sizlere Angular 4 ile jQuery datatable kullanımından bahsedeceğim. Görünüm olarak jQuery’nin default datatable css i yerine Bootstrap datatable görünümünü kullanacağım. Veri kaynağı olarak daha önceden yazdığım bir RESTful web servisini kullanacağım. Bu servis bana database’imde ki kitap listesini dönmektedir.

Angular 4 ile jQuery datatable kullanmak için evvela aşağıda ki dependencyleri npm ile kurmamız gerekmektedir.

npm install jquery –save

npm install datatables.net –save

npm install datatables.net-dt –save

npm install angular-datatables –save

npm install @types/jquery –save-dev

npm install @types/datatables.net –save-dev

npm install bootstrap@3
npm install data-table-angular-4-bootstrap-3 --save

Bütün bu dependencyleri kurduktan sonra projemizde ki angular.cli.json dosyasının içerisinde css ve javascript dosyalarını import etmemiz gerekir. Bu işlem aşağıda ki gibi olur.

.

.

.

"styles": [

 "../node_modules/bootstrap/dist/css/bootstrap.min.css",

 "../node_modules/datatables/media/css/dataTables.bootstrap.min.css",

 "styles.css"

],

"scripts": [

 "../node_modules/jquery/dist/jquery.js",

 "../node_modules/datatables.net/js/jquery.dataTables.js",

 "../node_modules/datatables/media/js/dataTables.bootstrap.min.js"

],

.

.

.

Artık DatatableModule’ü app.module.ts dosyamıza import ederek kodlamaya başlayabiliriz.

import { DataTablesModule } from 'angular-datatables';

.

.

.

imports: [

 BrowserModule,

 FormsModule,

 DataTablesModule,

 BrowserAnimationsModule,

 RouterModule.forRoot(appRoute),

]

.

.

.

data-table.component.ts

import { Component, OnInit } from '@angular/core';

import { Subject } from 'rxjs';

import { Kitap } from '../kitap/kitap';

import { KitapService } from '../kitap/kitap.service';

@Component({

selector: 'app-data-table',

templateUrl: './data-table.component.html',

styleUrls: ['./data-table.component.css'],

providers : [KitapService]

})

export class DataTableComponent implements OnInit {

dtOptions: DataTables.Settings = {};

dtTrigger: Subject<any> = new Subject();

kitaplar:Kitap[] = [];

constructor(private kitapService:KitapService) { }

ngOnInit() {

this.dtOptions = {

 pagingType: 'full_numbers',

 pageLength: 5,

 processing: true,

 language:{

 paginate:{

 first:"İlk",

 last:"Son",

 next:"Sonraki",

 previous:"Önceki"

},

 search:"Ara",

 info:"_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor"

},

 lengthChange:false

};

this.getKitaplar();

}

getKitaplar(){

 this.kitapService.getKitapListe(undefined).subscribe(p=>

{

 this.kitaplar=p;

 this.dtTrigger.next();

}

);

}

}

data-table.component.html

<h4 class="page-header">Datatable Kullanımı</h4>

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" style="width: 100%"

class="table table-striped table-bordered">

 <thead>

  <tr>

   <th>Kitap Id</th>

   <th>Kitap Adı</th>

   <th>Yazar Adı</th>

   <th>Kitap Türü</th>

   <th>Alınma Tarihi</th>

   <th>Yayınevi</th>

   <th></th>

  </tr>

 </thead>

 <tbody>

  <tr *ngFor="let kitap of kitaplar">

   <td>{{kitap.kitapId}}</td>

   <td>{{kitap.kitapAd}}</td>

   <td>{{kitap.yazarAd}}</td>

   <td>{{kitap.kitapTuru.name | uppercase}}</td>

   <td>{{kitap.alinmaTarihi}}</td>

   <td>{{kitap.yayinEvi.label}}</td>

   <td>

     <button type="button" (click)="kitapDetayAc(kitap)" class="btn btn-       link">Detay</button>

   </td>

  </tr>

 </tbody>

</table>

Çalıştırdığımız takdirde sonuç aşağıda ki gibi olur.

Sorularınızı mesutemrecelenk@gmail.com adresine yazabilirsiniz.Başka bir yazıda görüşmek üzere hoşçakalın.