<\/div>\n

Merhaba,<\/p>\n

Angular 4 yaz\u0131 dizimiz<\/a>de \u015fuana kadar incelemi\u015f oldu\u011fumuz t\u00fcm yap\u0131lar\u0131 b\u00fct\u00fcnsel olarak de\u011ferlendirmemizi sa\u011flayacak \u00f6rnek bir uygulama yapma zaman\u0131n\u0131n geldi\u011fini d\u00fc\u015f\u00fcn\u00fcyorum. Ba\u015fl\u0131ktan da anla\u015f\u0131laca\u011f\u0131 \u00fczere bu \u00f6rnek uygulamam\u0131z sepete ekleme i\u015flemi \u00fczerine kurgulanacakt\u0131r.<\/p>\n

Bu makalede hedeflenen kazan\u0131m, \u015furada<\/a> bulunan Angular yaz\u0131 dizimizin \u015fuana kadar olan 20 makalelik k\u0131sm\u0131nda inceledi\u011fimiz konular\u0131 peki\u015ftirmek, bu dizinin \u015fu anki seviyesinde bir Angular projesinin tad\u0131na varmak ve b\u00fct\u00fcnsel olarak component, mod\u00fcl vs. gibi yap\u0131lar\u0131n Third Party paketlerle birlikte kullan\u0131m\u0131n\u0131 pratiksel olarak uygulamakt\u0131r.<\/p>\n

O halde hi\u00e7 vakit kaybetmeden \u00f6rnek uygulamam\u0131z\u0131n in\u015fas\u0131na ba\u015flayal\u0131m.<\/p>\n

Third Party Paketlerin Entegrasyonu<\/h4>\n
\u0130lk olarak kullanaca\u011f\u0131m\u0131z third party paketler olan bootsrap, jQuery vs. gibi yap\u0131lar\u0131n projeye entegrasyonunu \u015furadaki<\/a> makalede ele ald\u0131\u011f\u0131m\u0131z gibi sa\u011flayal\u0131m.<\/p>\n

Entity ve Veri Kaynaklar\u0131n\u0131n Olu\u015fturulmas\u0131<\/h4>\n

\u015eimdi s\u0131ra sepete eklenecek \u00fcr\u00fcnlerin modeli ve veri kaynaklar\u0131yla birlikte sepetteki her bir \u00fcr\u00fcn i\u00e7in sepet bilgisi tutacak olan sepet modelini ve listesini olu\u015fturmaya geldi.
\n\u00dcr\u00fcn modeli;<\/p>\n

\r\nexport class Product {\r\n    id: number;\r\n    productName: string;\r\n    price: number;\r\n    stock: number;\r\n}\r\n<\/pre>\n\u00dcr\u00fcn veri kayna\u011f\u0131;<\/p>\n\r\nimport { Product } from ".\/product";\r\n\r\nexport const ProductList: Product[] = [\r\n    { id: 1, price: 100, stock: 50, productName: "Mouse" },\r\n    { id: 2, price: 200, stock: 10, productName: "Monit\u00f6r" },\r\n    { id: 3, price: 4500, stock: 3, productName: "Televizyon" },\r\n    { id: 4, price: 600, stock: 25, productName: "Kasa" },\r\n    { id: 5, price: 120, stock: 17, productName: "Klavye" },\r\n    { id: 6, price: 489, stock: 21, productName: "Ekran Kart\u0131" },\r\n    { id: 7, price: 699, stock: 28, productName: "\u0130\u015flemci" },\r\n    { id: 8, price: 55, stock: 13, productName: "Fan" }\r\n];\r\n<\/pre>\nSepet modeli;<\/p>\n\r\nimport { Product } from ".\/product";\r\n\r\nexport class Basket {\r\n    quantity: number;\r\n    product: Product;\r\n}\r\n<\/pre>\nSepet modelimize dikkat ederseniz e\u011fer i\u00e7erisinde ilgili \u00fcr\u00fcnden sepette ka\u00e7 adet oldu\u011fu bilgisini verecek “quantity” ile ilgili \u00fcr\u00fcn\u00fcn nesnesini tutacak “product” \u00f6zellikleri mevcuttur.<\/p>\n
Sepet listesi modeli;<\/p>\n\r\nimport { Basket } from ".\/basket";\r\n\r\nexport const BasketList: Basket[] = [];\r\n<\/pre>\nServis Olu\u015fturulmas\u0131<\/h4>\n\u015eimdi veri kayna\u011f\u0131m\u0131za eri\u015febilmek, veri ekleyebilmek yahut silebilmek vs. gibi i\u015flemler i\u00e7in servis olu\u015fturmam\u0131z gerekmektedir.<\/p>\n
\u0130lk olarak sepetteki i\u015fleyi\u015fi y\u00f6netecek servisimizi olu\u015ftural\u0131m.<\/p>\n\r\nimport { Injectable } from '@angular\/core';\r\nimport { Product } from "..\/entitys\/product";\r\nimport { BasketList } from "..\/entitys\/basket-list";\r\nimport { Basket } from '..\/entitys\/basket';\r\n@Injectable()\r\nexport class BasketService {\r\n  constructor() { }\r\n  getBasketList(): Basket[] {\r\n    return BasketList;\r\n  }\r\n  addProductBasket(product: Product) {\r\n    var productContains = BasketList.find(p => p.product.id == product.id);\r\n    if (productContains)\r\n      productContains.quantity += 1;\r\n    else {\r\n      let basket = new Basket();\r\n      basket.product = product;\r\n      basket.quantity = 1;\r\n      BasketList.push(basket);\r\n    }\r\n  }\r\n  clearBasket() {\r\n    BasketList.splice(0, BasketList.length);\r\n  }\r\n  removeProductBasket(product: Product) {\r\n    var productContains = BasketList.find(p => p.product.id == product.id);\r\n    if (productContains) {\r\n      var productIndexNo = -1;\r\n      productIndexNo = BasketList.indexOf(productContains);\r\n      if (productIndexNo != -1)\r\n        BasketList.splice(productIndexNo, 1);\r\n    }\r\n  }\r\n}\r\n<\/pre>\nServisimizin i\u00e7eri\u011fine g\u00f6z atarsan\u0131z e\u011fer sepet ekleme ve silme i\u015flemlerinin yap\u0131ld\u0131\u011f\u0131 fonksiyonlar\u0131 g\u00f6receksiniz. Bu fonksiyonlar, isimlerinden ve i\u015flevlerinden gayet net olduklar\u0131ndan dolay\u0131 fazla detaya girmemekteyim.<\/p>\n
\u015eimdi ise \u00fcr\u00fcnlere kaynak te\u015fkil edecek servisi olu\u015ftural\u0131m.<\/p>\n\r\nimport { Injectable } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\nimport { ProductList } from '..\/entitys\/product-list';\r\n\r\n@Injectable()\r\nexport class ProductService {\r\n  constructor() { }\r\n  getProductList(): Product[] {\r\n    return ProductList;\r\n  }\r\n}\r\n<\/pre>\nComponentlerin Olu\u015fturulmas\u0131 ve Viewlar\u0131n Tasarlanmas\u0131<\/h4>\nS\u0131ra componentlerin olu\u015fturulmas\u0131na geldi.
\n\u0130lk olarak \u00fcr\u00fcn veri kayna\u011f\u0131n\u0131 listeleyece\u011fimiz componentimizi olu\u015ftural\u0131m.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\nimport { ProductService } from '..\/services\/product.service';\r\nimport { BasketService } from '..\/services\/basket.service';\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(private productService: ProductService, private basketService: BasketService) { }\r\n  ngOnInit() {\r\n    this.productList = this.productService.getProductList();\r\n  }\r\n  addProductBasket(product: Product) {\r\n    this.basketService.addProductBasket(product);\r\n  }\r\n}\r\n<\/pre>\nVe ard\u0131ndan bu componentin viewini olu\u015ftural\u0131m.<\/p>\n
\r\n<div class="list-group-item" style="width: 225px;">\r\n  <a *ngFor="let product of productList" href="#" class="list-group-item list-group-item-action flex-column align-items-start" (click)="addProductBasket(product)">\r\n    <div class="d-flex w-100 justify-content-between">\r\n      <h5 class="mb-1">{{product.productName}}<\/h5>\r\n      <small>{{product.price | currency}}<\/small>\r\n    <\/div>\r\n    <p class="mb-1">Stok : {{product.stock}}<\/p>\r\n    <button type="button" class="btn btn-primary">Sepete Ekle<\/button>\r\n  <\/a>\r\n<\/div>\r\n<\/pre>\nDikkat ederseniz click event\u0131na ba\u011flanan “addProductBasket” fonksiyonu ile sepete yeni bir \u00fcr\u00fcn eklenmektedir.<\/p>\n
\u015eimdi de sepet componentini olu\u015ftural\u0131m.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Basket } from '..\/entitys\/basket';\r\nimport { BasketService } from '..\/services\/basket.service';\r\n@Component({\r\n  selector: 'app-basket',\r\n  templateUrl: '.\/basket.component.html',\r\n  styleUrls: ['.\/basket.component.css']\r\n})\r\nexport class BasketComponent implements OnInit {\r\n  basketList: Basket[];\r\n  basketCount: number;\r\n  constructor(private basketService: BasketService) { }\r\n  ngOnInit() {\r\n    this.basketList = this.basketService.getBasketList();\r\n    this.basketCount = this.basketService.getBasketList().reduce((a, b) => a = a + b.quantity, 0);\r\n  }\r\n}\r\n<\/pre>\nVee tabi ki de viewini unutmayal\u0131m.<\/p>\n
\r\n<div style="width: 225px;float: right;">\r\n  Sepetteki \u00dcr\u00fcn Say\u0131s\u0131 : {{basketCount}}\r\n  <ul class="list-group" *ngFor="let basket of basketList">\r\n    <li class="list-group-item">{{basket.product.productName}} -\r\n      <span class="badge">{{basket.quantity}}<\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div>\r\n<\/pre>\nT\u00fcm bu in\u015falardan sonra olu\u015fturulan componentlerin declarasyonu ve servislerin projede global eri\u015filebilir olmas\u0131 i\u00e7in ana mod\u00fcl\u00fcm\u00fcz olan “app.module.ts” dosyas\u0131na gelelim ve a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftirelim.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { ProductComponent } from '.\/product\/product.component';\r\nimport { BasketComponent } from '.\/basket\/basket.component';\r\nimport { ProductService } from '.\/services\/product.service';\r\nimport { BasketService } from '.\/services\/basket.service';\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    ProductComponent,\r\n    BasketComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule\r\n  ],\r\n  providers: [ProductService, BasketService],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nVe son olarak ana componentimiz olan “app.component.html” dosyas\u0131na componentlerimizin se\u00e7icilerini etiket olarak ekleyelim.<\/p>\n
\r\n<app-basket><\/app-basket>\r\n<app-product><\/app-product>\r\n<\/pre>\nDoCheck Interface’inin Uygulanmas\u0131<\/h4>\n“product” componenti sayesinde “BasketList” i\u00e7erisinde olacak t\u00fcm de\u011fi\u015fiklikleri “basket” componenti i\u00e7erisinde takip edebilmek i\u00e7in DoCheck Interface<\/a>‘ini kullanaca\u011f\u0131z.<\/p>\n
Bu interface, ilgili componentin uygulama boyunca ili\u015fkisi olan t\u00fcm verilere subscribe olmakta ve bu verilerde olas\u0131 de\u011fi\u015fiklikler ceyran ederse ngDoCheck fonksiyonunu tetiklemektedir.<\/p>\n
Do\u011fal olarak “basket” componentimizin i\u00e7eri\u011fini bu interfaceden t\u00fcreterek g\u00fcncelleyelim.<\/p>\n
\r\nimport { Component, OnInit, DoCheck } from '@angular\/core';\r\nimport { Basket } from '..\/entitys\/basket';\r\nimport { BasketService } from '..\/services\/basket.service';\r\n@Component({\r\n  selector: 'app-basket',\r\n  templateUrl: '.\/basket.component.html',\r\n  styleUrls: ['.\/basket.component.css']\r\n})\r\nexport class BasketComponent implements OnInit, DoCheck {\r\n  basketList: Basket[];\r\n  basketCount: number;\r\n  constructor(private basketService: BasketService) { }\r\n  ngOnInit() { }\r\n  ngDoCheck() {\r\n    this.basketList = this.basketService.getBasketList();\r\n    this.basketCount = this.basketService.getBasketList().reduce((a, b) => a = a + b.quantity, 0);\r\n  }\r\n}\r\n<\/pre>\nDikkat ederseniz e\u011fer ngOnInit event\u0131ndaki t\u00fcm i\u015flemleri ngDoCheck event\u0131na alm\u0131\u015f bulunmaktay\u0131z. Bunun sebebi yukar\u0131da anlatmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131m mant\u0131kla paralel \u015fekilde “BasketList” \u00fczerinde yap\u0131lan t\u00fcm de\u011fi\u015fikler neticesinde tekrardan ilgili i\u015flemlerin tetiklenmesini sa\u011flamakt\u0131r.<\/p>\nAngular Notifications Entegrasyonu<\/h4>\n\u015eimdide sepete ekleme i\u015fleminin ba\u015far\u0131yla sonu\u00e7land\u0131\u011f\u0131n\u0131 kullan\u0131c\u0131ya g\u00f6sterebilmek i\u00e7in Angular Notifications paketinden yararlanaca\u011f\u0131z. Bu paketin entegrasyonu i\u00e7in \u015furadaki<\/a> makaleden faydalanabilirsiniz.<\/p>\n
Hemen “product” componentinde notifications ile ilgili d\u00fczenlemeleri yapal\u0131m.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Product } from '..\/entitys\/product';\r\nimport { ProductService } from '..\/services\/product.service';\r\nimport { BasketService } from '..\/services\/basket.service';\r\nimport { NotificationsService } from 'angular2-notifications';\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(private productService: ProductService, private basketService: BasketService, private notifications: NotificationsService) { }\r\n  public notificationOptions = {\r\n    timeOut: 3000,\r\n    position: ["bottom", "right"],\r\n    lastOnBottom: true\r\n  };\r\n  ngOnInit() {\r\n    this.productList = this.productService.getProductList();\r\n  }\r\n  addProductBasket(product: Product) {\r\n    this.basketService.addProductBasket(product);\r\n    this.notifications.success("\u00dcr\u00fcn sepete ba\u015far\u0131yla eklenmi\u015ftir.", product.productName + " sepete eklenmi\u015ftir.");\r\n  }\r\n}\r\n<\/pre>\nArd\u0131ndan bu d\u00fczenlemeyi viewde de ger\u00e7ekle\u015ftirelim.<\/p>\n\r\n<div class="list-group-item" style="width: 225px;">\r\n  <a *ngFor="let product of productList" href="#" class="list-group-item list-group-item-action flex-column align-items-start"\r\n    (click)="addProductBasket(product)">\r\n    <div class="d-flex w-100 justify-content-between">\r\n      <h5 class="mb-1">{{product.productName}}<\/h5>\r\n      <small>{{product.price | currency}}<\/small>\r\n    <\/div>\r\n    <p class="mb-1">Stok : {{product.stock}}<\/p>\r\n    <button type="button" class="btn btn-primary">Sepete Ekle<\/button>\r\n  <\/a>\r\n<\/div>\r\n<simple-notifications [options]="notificationOptions"><\/simple-notifications>\r\n<\/pre>\nEvet arkada\u015flar. Bu i\u015flemden sonra projemizi kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda kar\u015f\u0131m\u0131za a\u015fa\u011f\u0131daki gibi bir sepet uygulamas\u0131 gelmektedir.
\n<\/a><\/p>\n
Umar\u0131m faydas\u0131n\u0131 bulaca\u011f\u0131n\u0131z ve size yol g\u00f6sterici bir uygulama ve i\u00e7erik olu\u015fturmu\u015fuzdur.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n
\u00d6rnek \u00e7al\u0131\u015fma projesini Angular CLI ile olu\u015fturdu\u011fumdan dolay\u0131 yakla\u015f\u0131k 400 MB’l\u0131k bir proje meydana gelmi\u015f bulunmaktad\u0131r. O y\u00fczden ilgili \u00e7al\u0131\u015fman\u0131n kaynak kodlar\u0131na eri\u015fmek istiyorsan\u0131z e\u011fer konu alt\u0131na yorum yazman\u0131z yeterli olacakt\u0131r.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular 4 yaz\u0131 dizimizde \u015fuana kadar incelemi\u015f oldu\u011fumuz t\u00fcm yap\u0131lar\u0131 b\u00fct\u00fcnsel olarak de\u011ferlendirmemizi sa\u011flayacak \u00f6rnek bir uygulama yapma zaman\u0131n\u0131n geldi\u011fini d\u00fc\u015f\u00fcn\u00fcyorum. Ba\u015fl\u0131ktan da anla\u015f\u0131laca\u011f\u0131 \u00fczere bu \u00f6rnek uygulamam\u0131z sepete ekleme i\u015flemi \u00fczerine kurgulanacakt\u0131r....<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2208,2316,2318,2314,2315,2317],"class_list":["post-7834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-ornek-proje","tag-angular-4-ornek-uygulama","tag-angular-4-sepete-ekle-uygulamasi","tag-angular-ornek-proje","tag-angular-ornek-uygulama","tag-angular-sepete-ekle-uygulamasi"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7834","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=7834"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Third Party Paketlerin Entegrasyonu<\/h4>\n\u0130lk olarak kullanaca\u011f\u0131m\u0131z third party paketler olan bootsrap, jQuery vs. gibi yap\u0131lar\u0131n projeye entegrasyonunu \u015furadaki<\/a> makalede ele ald\u0131\u011f\u0131m\u0131z gibi sa\u011flayal\u0131m.<\/p>\n

Third Party Paketlerin Entegrasyonu<\/h4>\n
\u0130lk olarak kullanaca\u011f\u0131m\u0131z third party paketler olan bootsrap, jQuery vs. gibi yap\u0131lar\u0131n projeye entegrasyonunu \u015furadaki<\/a> makalede ele ald\u0131\u011f\u0131m\u0131z gibi sa\u011flayal\u0131m.<\/p>\n