<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular uygulamalar\u0131nda Slice Pipe ile sayfalama i\u015flemini irdeleyece\u011fiz. Tabi \u00f6ncelikli olarak Slice Pipe’\u0131n yap\u0131sal \u00f6zelli\u011fini detayl\u0131ca inceleyecek ve ard\u0131ndan bu filtreyi sayfalama tekni\u011fi \u00fczerinde kullanaca\u011f\u0131z.<\/p>\n
Slice Pipe; dizi, koleksiyon vs. gibi veri k\u00fcmelerinde belirli aral\u0131klardaki verilere ula\u015fmam\u0131z\u0131 sa\u011flayan bir yap\u0131ya sahiptir. Kullan\u0131m prototipi a\u015fa\u011f\u0131daki gibidir;<\/p>\n
\r\n[VER\u0130 K\u00dcMES\u0130] | slice : [DE\u011eER ARALI\u011eI]\r\n<\/pre>\nSlice Pipe’\u0131n kullan\u0131m\u0131n\u0131 anlayabilmek i\u00e7in \u00f6ncelikle veri k\u00fcmelerindeki indexel de\u011ferlerin hangi mant\u0131kta oldu\u011funu bilmek gerekmektedir. A\u015fa\u011f\u0131da bir veri k\u00fcmesindeki verilerin indexel de\u011ferini resmetmeye \u00e7al\u0131\u015fm\u0131\u015f bulunmaktay\u0131m. <\/p>\n
<\/a><\/p>\n
G\u00f6rseli incelerseniz e\u011fer “Gen\u00e7ay Y\u0131ld\u0131z” string de\u011feri bizim i\u00e7in bir veri k\u00fcmesi mahiyetindedir. Her yaz\u0131l\u0131mc\u0131 bilir ki, string bir ifade aslen bir char dizisidir. Yani char veri k\u00fcmesi. Bu bir temel programlama bilgisidir. O halde bu string tipteki veri k\u00fcmesini ele ald\u0131\u011f\u0131m\u0131zda indexel de\u011ferleri soldan sa\u011fa 0’dan ba\u015flayarak birer birer artmakta ve sa\u011fdan sola ise -1’den ba\u015flayarak birer birer d\u00fc\u015fmektedir. Bu t\u00fcm veri k\u00fcmeleri i\u00e7in genelle\u015ftirilebilir bir bilgidir.<\/p>\n
Bu bilgi \u0131\u015f\u0131nda a\u015fa\u011f\u0131daki \u00f6rnek kodlar\u0131 yorumlaman\u0131z Slice Pipe kullan\u0131m\u0131 ve mant\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan netle\u015ftirici olacakt\u0131r.<\/p>\n
\n\n\r\n{{"Gen\u00e7ayY\u0131ld\u0131z" | slice : 5 : 9}}\r\n<\/pre>\n\u00c7\u0131kt\u0131 : “yY\u0131l”\n<\/li>\n\n\r\n{{"Gen\u00e7ayY\u0131ld\u0131z" | slice : 3 : -2}}\r\n<\/pre>\n\u00c7\u0131kt\u0131 : “\u00e7ayY\u0131ld”\n<\/li>\n\n\r\n{{"Gen\u00e7ayY\u0131ld\u0131z" | slice : -5}}\r\n<\/pre>\n\u00c7\u0131kt\u0131 : “\u0131ld\u0131z”\n<\/li>\n\n\r\n{{"Gen\u00e7ayY\u0131ld\u0131z" | slice : 5}}\r\n<\/pre>\n\u00c7\u0131kt\u0131 : “yY\u0131ld\u0131z”\n<\/li>\n<\/ul>\n
\u00d6rnek kodlarda al\u0131nan \u00e7\u0131kt\u0131lara g\u00f6z atarsan\u0131z e\u011fer ufak bir g\u00f6z gezdirmeyle mant\u0131\u011f\u0131 direkt olarak kavranabilece\u011finden dolay\u0131 Slice Pipe’\u0131n parametreler aras\u0131ndaki ili\u015fkisine de\u011finme gere\u011fi duymuyorum.<\/p>\n
Dolay\u0131s\u0131yla Slice Pipe’\u0131n hangi mant\u0131kta ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rm\u00fc\u015f bulunmaktas\u0131n\u0131z. Haliyle \u015fimdi s\u0131ra bir Angular uygulamas\u0131nda bu filtre e\u015fli\u011finde \u00f6rnek bir sayfalama yap\u0131m\u0131n\u0131 ele almaya geldi.<\/p>\n
\u00d6rnek senaryomuzda product listesi s\u00f6z konusu olacakt\u0131r. \u0130\u015flevsel olarak basit bir senaryo olaca\u011f\u0131ndan dolay\u0131 teorik detaylara fazla tak\u0131lmadan h\u0131zl\u0131ca prati\u011fe ge\u00e7elim.<\/p>\n
\u00d6ncelikle “product.js” dosyam\u0131z\u0131 olu\u015ftural\u0131m ve i\u00e7erisine s\u0131n\u0131f\u0131m\u0131z\u0131 a\u015fa\u011f\u0131daki \u00f6zelliklerle tan\u0131mlayal\u0131m.<\/p>\n
\r\nexport class Product {\r\n    productName: string;\r\n    Stock: number;\r\n    price: number;\r\n}\r\n<\/pre>\nVeri kayna\u011f\u0131 te\u015fkil etmesi a\u00e7\u0131s\u0131ndan a\u015fa\u011f\u0131daki gibi “product-list.ts” dosyam\u0131z\u0131 olu\u015ftural\u0131m ve i\u00e7erisine “Product” dizisi tipinden sabit tan\u0131mlayarak bu sabit i\u00e7erisine de farkl\u0131 product nesneleri tan\u0131mlayal\u0131m.<\/p>\n
\r\nimport { Product } from ".\/product";\r\n\r\nexport const ProductList: Product[] = [\r\n    { productName: "\u00dct\u00fc", price: 100, Stock: 100 },\r\n    { productName: "Sandalye", price: 25, Stock: 100 },\r\n    { productName: "Dolap", price: 55, Stock: 100 },\r\n    { productName: "Bardak", price: 5, Stock: 100 },\r\n    { productName: "Buzdolab\u0131", price: 1200, Stock: 100 },\r\n    { productName: "Televizyon", price: 1020, Stock: 100 },\r\n    { productName: "Koltuk Tak\u0131m\u0131", price: 1300, Stock: 100 },\r\n    { productName: "Yemek Tak\u0131m\u0131", price: 1400, Stock: 100 },\r\n    { productName: "Perde", price: 125, Stock: 100 },\r\n    { productName: "Hal\u0131", price: 55, Stock: 100 },\r\n    { productName: "Kanepe", price: 65, Stock: 100 },\r\n    { productName: "Yatak", price: 435, Stock: 100 },\r\n    { productName: "\u00c7ama\u015f\u0131r Sepeti", price: 55, Stock: 100 },\r\n];\r\n<\/pre>\n\u015eimdi s\u0131ra bu verileri listelemeye geldi.<\/p>\n
“Product” isminde bir component olu\u015ftural\u0131m ve “product.component.html” dosyas\u0131nda a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 yapal\u0131m.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\nimport { ProductList } from '..\/entitys\/product-list';\r\n\r\n@Component({\r\n  selector: 'app-product',\r\n  templateUrl: '.\/product.component.html',\r\n  styleUrls: ['.\/product.component.css']\r\n})\r\nexport class ProductComponent implements OnInit {\r\n  productList: Product[];\r\n  constructor() { }\r\n  ngOnInit() {\r\n    this.productList = ProductList;\r\n  }\r\n}\r\n<\/pre>\n\r\n<div class="row">\r\n    <div class="list-group">\r\n      <a class="list-group-item list-group-item-action" *ngFor="let product of productList">{{product.productName}} <br>Stock : {{product.stock}} <br>Price : {{product.price}}<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/pre>\nVe ard\u0131ndan ana componentimizin(AppComponent) view dosyas\u0131 olan “app.component.html” dosyas\u0131nda product componentin selector de\u011ferini belirterek ilgili componenti yay\u0131nlayal\u0131m.<\/p>\n
\r\n<app-product><\/app-product>\r\n<\/pre>\nT\u00fcm bu i\u015flemlerden sonra uygulamay\u0131 kaydedip, \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131z zaman “ProductList” veri k\u00fcmesindeki t\u00fcm productlar\u0131n listelendi\u011fini g\u00f6rece\u011fiz.<\/p>\n
\u015eimdi s\u0131ra bu listeyi sayfalamaya geldi.<\/p>\n
\u0130lk olarak sayfalama bilgilerini tutacak “Pager.ts” isimli s\u0131n\u0131f\u0131m\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\nexport class Pager {\r\n    pageList: Array<number> = [];\r\n    currentPage: number;\r\n    pageSize: number;\r\n}\r\n<\/pre>\nYukar\u0131daki s\u0131n\u0131fta; “pageList” \u00f6zelli\u011fi, 1’den sayfa adedine kadar olan t\u00fcm de\u011ferleri bir dizi olarak tutmaktad\u0131r; “currentPage” \u00f6zelli\u011fi, o anki sayfa bilgisini tutmaktad\u0131r ve “pageSize” \u00f6zelli\u011fi ise bir sayfada ka\u00e7 adet product listelenece\u011fi bilgisini tutmaktad\u0131r.<\/p>\n
\u015eimdi “ProductComponent” s\u0131n\u0131f\u0131m\u0131za gelip “Pager” nesnesi olu\u015fturabilece\u011fimiz “getPager” isimli bir fonksiyon yazal\u0131m ve ard\u0131ndan “pager” isminde bir referans olu\u015fturarak “ngOnInit” event\u0131nda ilgili referansa olu\u015fturmu\u015f oldu\u011fumuz “getPager” fonksiyonu sayesinde bir “Pager” nesnesi atayal\u0131m.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\nimport { ProductList } from '..\/entitys\/product-list';\r\nimport { Pager } from '..\/pager';\r\n@Component({\r\n  selector: 'app-product',\r\n  templateUrl: '.\/product.component.html',\r\n  styleUrls: ['.\/product.component.css']\r\n})\r\nexport class ProductComponent implements OnInit {\r\n  productList: Product[];\r\n  pager: Pager;\r\n  constructor() { }\r\n  ngOnInit() {\r\n    this.productList = ProductList;\r\n    this.pager = this.getPager(this.productList.length);\r\n  }\r\n  getPager(totalItem: number, pageSize: number = 3, currentPage: number = 1): Pager {\r\n    let pager = new Pager();\r\n    pager.pageSize = Math.ceil(totalItem \/ pageSize);\r\n    pager.currentPage = currentPage;\r\n    for (let i = 1; i <= Math.ceil(totalItem \/ pageSize); i++)\r\n      pager.pageList.push(i);\r\n    return pager;\r\n  }\r\n}\r\n<\/pre>\nVe bu i\u015flemden sonra “product.component.html” sayfas\u0131na gelerek sayfalama linklerini ekleyelim.<\/p>\n
\r\n<div class="row">\r\n  <div class="list-group">\r\n    <a class="list-group-item list-group-item-action" *ngFor="let product of productList">{{product.productName}}\r\n      <br>Stock : {{product.stock}}\r\n      <br>Price : {{product.price}}<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<nav aria-label="Page navigation example">\r\n  <ul class="pagination">\r\n    <li *ngFor="let page of pager.pageList" class="page-item">\r\n      <a class="page-link">{{page}}<\/a>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<\/pre>\nTabi bu linkler bootsrap yard\u0131m\u0131yla rahat bir \u015fekilde olu\u015fturulabilmektedir. Bu makale Angular 4 Yaz\u0131 Dizisi<\/a>‘nin bir par\u00e7as\u0131 oldu\u011fundan dolay\u0131 alt yap\u0131 olarak yan uygulamalar\u0131n projeye nas\u0131l entegrasyon edildi\u011fine de\u011finilmemekte, edildi\u011fi varsay\u0131lmaktad\u0131r. Sizler direkt olarak bu makaleyi inceliyorsan\u0131z e\u011fer Angular 4 \u2013 Third Party Paket Entegrasyonu ve Kullan\u0131m\u0131<\/a> ba\u015fl\u0131kl\u0131 makalemden boostrap, jQuery vs. gibi \u00fc\u00e7\u00fcnc\u00fc parti paketlerin entegrasyonunu inceleyebilirsiniz.<\/p>\n
Yap\u0131lan bu son i\u015flem neticesinde projemizi kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi sayfa numaralar\u0131n\u0131n olu\u015ftu\u011fu lakin adreslerinin verilmedi\u011fi ve bununla beraber veri k\u00fcmesinin hala tam olarak listelendi\u011fi durumlar\u0131yla kar\u015f\u0131la\u015faca\u011f\u0131z.
\n<\/a><\/p>\n
\u015eu durumda \u00f6ncelikli olarak sayfa numaralar\u0131na adreslerini vermekle ba\u015flayal\u0131m. Bu i\u015f i\u00e7in route tan\u0131mlamam\u0131z gerekecektir. Angular 4 Routing Mekanizmas\u0131<\/a> ba\u015fl\u0131kl\u0131 makalede teknik boyutunu ele ald\u0131\u011f\u0131m\u0131z gibi sayfa numaralar\u0131na \u00f6zel route tan\u0131mlayaca\u011f\u0131z.<\/p>\n
Hemen routes yap\u0131m\u0131z\u0131 a\u015fa\u011f\u0131daki gibi olu\u015fturuyoruz.<\/p>\n
\r\nconst appRoutes: Routes = [\r\n  { path: "", redirectTo: "\/page", pathMatch: "full" },\r\n  { path: "page", component: ProductComponent }\r\n];\r\n<\/pre>\nArd\u0131ndan t\u0131klanan sayfa numaras\u0131n\u0131 elde edebilmek i\u00e7in sayfa numaralar\u0131n\u0131n “click” event\u0131na “setPage” isminde bir fonksiyon tan\u0131mlayal\u0131m ve “product.component.ts” dosyas\u0131nda bu fonksiyonu olu\u015ftural\u0131m.<\/p>\n\r\n<nav aria-label="Page navigation example">\r\n  <ul class="pagination">\r\n    <li *ngFor="let page of pager.pageList" class="page-item" [class.active]="page == pager.currentPage">\r\n      <a class="page-link" (click)="setPage(page)">{{page}}<\/a>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<\/pre>\n\r\n  setPage(page: number) {\r\n    this.pager.currentPage = page;\r\n  }\r\n<\/pre>\nT\u00fcm bu i\u015flemler neticesinde art\u0131k hangi aral\u0131klarda ka\u00e7 adet veriye eri\u015fece\u011fimizi “Pager” nesnesindeki veriler sayesinde biliyoruz. Son olarak yapmam\u0131z gereken “Pager” nesnesindeki verileri ilgili veri k\u00fcmemize Slice Pipe uygularken parametrik de\u011ferler olarak vermek kal\u0131yor.<\/p>\n\r\n<div class="row">\r\n  <div class="list-group">\r\n    <a class="list-group-item list-group-item-action" *ngFor="let product of productList | slice : (pager.currentPage - 1) * pager.pageSize : ((pager.currentPage - 1) * pager.pageSize) + pager.pageSize">{{product.productName}}\r\n      <br>Stock : {{product.stock}}\r\n      <br>Price : {{product.price}}<\/a>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\nBu \u015fekilde projemizi kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi sayfalama i\u015fleminin ba\u015far\u0131yla ger\u00e7ekle\u015fti\u011fini g\u00f6receksiniz.
\n<\/a><\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular uygulamalar\u0131nda Slice Pipe ile sayfalama i\u015flemini irdeleyece\u011fiz. Tabi \u00f6ncelikli olarak Slice Pipe’\u0131n yap\u0131sal \u00f6zelli\u011fini detayl\u0131ca inceleyecek ve ard\u0131ndan bu filtreyi sayfalama tekni\u011fi \u00fczerinde kullanaca\u011f\u0131z. Slice Pipe; dizi, koleksiyon vs. gibi...<\/p>\n","protected":false},"author":1,"featured_media":7990,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2353,2352,2354,2355,2351],"class_list":["post-7989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-sayfalama","tag-angular-slice-pipe","tag-angular-tablo-sayfalama","tag-slice-pipe","tag-slice-pipe-ile-sayfalama"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7989"}],"version-history":[{"count":23,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7989\/revisions"}],"predecessor-version":[{"id":8015,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7989\/revisions\/8015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7990"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}