<\/div>\n

Merhaba,<\/p>\n

Her web site uygulamas\u0131nda oldu\u011fu gibi Angular uygulamalar\u0131nda da belirli i\u015flemler neticesinde son kullan\u0131c\u0131ya iletilmesi gereken bildiriler mevcuttur ve bu bildirileri kullan\u0131c\u0131n\u0131n etkile\u015fimine e\u015flik edecek g\u00f6rsellikte sunaca\u011f\u0131m\u0131z yap\u0131lara ihtiyac\u0131m\u0131z vard\u0131r. <\/p>\n

Bu yap\u0131larda standart html elemanlar\u0131 tercih edilebilirken daha geli\u015fmi\u015f componentlerede ba\u015fvurulabilir. \u0130\u015fte bu componentlerden Angular i\u00e7in tasarlanm\u0131\u015f olan ‘Angular Notifications<\/strong>‘ componenti \u00fczerine konu\u015fuyor olaca\u011f\u0131z ve bir Angular projesine entegrasyonunun nas\u0131l sa\u011fland\u0131\u011f\u0131 ve kullan\u0131ld\u0131\u011f\u0131 \u00fczerine detayl\u0131 irdelemede bulunaca\u011f\u0131z.<\/p>\n

Projeye Angular Notifications Entegrasyonu<\/h4>\n
\u0130lk olarak Angular uygulamas\u0131na ‘Angular Notifications’ entegrasyonunu ger\u00e7ekle\u015ftirebilme \u00fczerinde dural\u0131m. Bu i\u015flem i\u00e7in \u00f6ncelikle “package.json” dosyas\u0131ndaki “dependencies” \u00f6zelli\u011fine “angular2-notifications” referans\u0131n\u0131 eklememiz gerekmektedir.<\/p>\n
\r\n.\r\n.\r\n.\r\n "dependencies": {\r\n "@angular\/animations": "^5.2.0",\r\n "@angular\/common": "^5.2.0",\r\n "@angular\/compiler": "^5.2.0",\r\n "@angular\/core": "^5.2.0",\r\n "@angular\/forms": "^5.2.0",\r\n "@angular\/http": "^5.2.0",\r\n "@angular\/platform-browser": "^5.2.0",\r\n "@angular\/platform-browser-dynamic": "^5.2.0",\r\n "@angular\/router": "^5.2.0",\r\n "core-js": "^2.4.1",\r\n "rxjs": "^5.5.6",\r\n "zone.js": "^0.8.19",\r\n "angular2-notifications": "1.0.1"\r\n },\r\n.\r\n.\r\n.\r\n<\/pre>\n
Ard\u0131ndan “Integrated Terminal” penceresinden “npm install” komutunu \u00e7al\u0131\u015ft\u0131rarak “package.json” dosyas\u0131nda olup uygulamada olmayan paketleri projeye y\u00fckleyelim.
\n $\"Angular$ <\/a><\/p>\n
Art\u0131k “angular2-notifications” paketi uygulamam\u0131za y\u00fcklendi\u011fine g\u00f6re programatik \u00e7al\u0131\u015fmaya ba\u015flayabiliriz.<\/p>\n
Angular Notifications Kullan\u0131m\u0131<\/h4>\n
\u0130lk olarak; varsay\u0131lan mod\u00fcl dosyas\u0131 olan “app.module.ts” dosyas\u0131na giderek a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftiriyoruz.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { NotificationsService, SimpleNotificationsModule } from "angular2-notifications";\r\nimport { AppComponent } from '.\/app.component';\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n SimpleNotificationsModule.forRoot()\r\n ],\r\n providers: [NotificationsService],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
Burada dikkat ederseniz e\u011fer biraz \u00f6nce y\u00fcklemi\u015f oldu\u011fumuz “angular2-notifications” isimli paket i\u00e7erisindeki “NotificationsService” ve “SimpleNotificationsModule” isimli s\u0131n\u0131flar\u0131 import ediyoruz. Bu s\u0131n\u0131flardan “SimpleNotificationsModule” isimli olan\u0131 uygulamaya d\u0131\u015far\u0131dan laz\u0131m olan yap\u0131lar\u0131 import edece\u011finden dolay\u0131 “imports” \u00f6zelli\u011fine “SimpleNotificationsModule.forRoot()” \u015feklinde \u00e7a\u011f\u0131rarak tan\u0131ml\u0131yoruz. En nihayetinde “.forRoot” metodu bu nesne i\u00e7erisinde import edilmesi gereken ilgili yap\u0131lar\u0131 elde etmemizi sa\u011flamaktad\u0131r.<\/p>\n
“NotificationsService” s\u0131n\u0131f\u0131 ise notifikasyon i\u015fleminde kullanaca\u011f\u0131m\u0131z servis nesnesini kullan\u0131laca\u011f\u0131 yere constructerdan sunaca\u011f\u0131 i\u00e7in “providers” \u00f6zelli\u011fine tan\u0131mlayarak global eri\u015filebilir hale getiriyoruz.<\/p>\n
S\u0131ra \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131m\u0131z html sayfas\u0131na notifikasyona ait “selector” deyimini vermeye geldi. \u00d6rnekte “app.component.html” dosyas\u0131 \u00fczerinde \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131 i\u00e7in ilgili i\u015flemi bu dosya \u00fczerinde \u00f6rneklendiriyoruz.<\/p>\n
\r\n<input type="text" #txtAdSoyad \/>\r\n<button (click)="AdSoyadGoster(txtAdSoyad.value)">G\u00f6ster<\/button>\r\n<br>\r\n<simple-notifications [options]="notificationOptions"><\/simple-notifications>\r\n<\/pre>\n
Burada dikkat ederseniz e\u011fer “simple-notifications” niteli\u011fi notifikasyon \u00f6zelli\u011fini temsil etmektedir. Olu\u015fturulacak notifikasyonun ayarlar\u0131n\u0131 ise [options] attributeu ile tan\u0131mlanan “notificationOptions” isimli ilgili html dosyas\u0131n\u0131n component class\u0131ndan beslenen de\u011fi\u015fkenle ger\u00e7ekle\u015ftirmekteyiz.<\/p>\n
\r\nimport { Component } from '@angular\/core';\r\nimport { NotificationsService } from 'angular2-notifications';\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n constructor(private notificationsService: NotificationsService) { }\r\n public notificationOptions = {\r\n timeOut: 3000, \/\/3 saniye g\u00f6z\u00fckecek.\r\n position: ["top", "right"], \/\/Yukar\u0131da, sa\u011fda g\u00f6sterilecek.\r\n lastOnBottom: true\r\n }\r\n AdSoyadGoster(text: string) {\r\n this.notificationsService.success("Ad Soyad", text);\r\n }\r\n}\r\n<\/pre>\n
Ayriyetten butonun click event\u0131na ba\u011flanan “AdSoyadGoster” fonksiyonu tetiklendi\u011fi zaman constructerdan gelen “NotificationsService” nesnesi \u00fczerinden “.success” fonksiyonu ile notifikasyon devreye sokulmaktad\u0131r. <\/p>\n
“success” fonksiyonuyla beraber di\u011fer yap\u0131sal notifikasyon fonksiyonlar\u0131n\u0131da a\u015fa\u011f\u0131da ele al\u0131rsak e\u011fer;<\/p>\n\n\n\n\n\n\n\n\n\n
Fonksiyon<\/th>\n A\u00e7\u0131klama<\/th>\n<\/tr>\n<\/thead>\n
alert<\/td>\n <\/td>\n<\/tr>\n
error<\/td>\n Ba\u015far\u0131s\u0131zl\u0131k, olumsuzluk durumlar\u0131nda kullan\u0131l\u0131r.<\/td>\n<\/tr>\n
info<\/td>\n Bilgi verilirken kullan\u0131l\u0131r.<\/td>\n<\/tr>\n
warn<\/td>\n Uyar\u0131, ikaz durumlar\u0131nda kullan\u0131l\u0131r.<\/td>\n<\/tr>\n
success<\/td>\n \u0130\u015flem ba\u015far\u0131l\u0131ysa kullan\u0131l\u0131r.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u015feklinde tarif edebiliriz.<\/p>\n
T\u00fcm bu i\u015flemleri ger\u00e7ekle\u015ftirdikten sonra uygulamay\u0131 kaydedip yay\u0131nlad\u0131\u011f\u0131n\u0131zda a\u015fa\u011f\u0131daki gibi bildiri yap\u0131lanmas\u0131yla kar\u015f\u0131la\u015fabilirsiniz.
\n $\"Angular$ <\/a><\/p>\n
Evet. Bu i\u00e7eri\u011fimizde de olduk\u00e7a kullan\u0131\u015fl\u0131 ve gayet \u015f\u0131k olan Angular Notifications \u00fczerine detayl\u0131 bir entegrasyon makalesi olu\u015fturmu\u015f olduk.<\/p>\n
Faydalanman\u0131z ve yarar\u0131n\u0131 Angular uygulamalar\u0131nda bol bol g\u00f6rmeniz dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Her web site uygulamas\u0131nda oldu\u011fu gibi Angular uygulamalar\u0131nda da belirli i\u015flemler neticesinde son kullan\u0131c\u0131ya iletilmesi gereken bildiriler mevcuttur ve bu bildirileri kullan\u0131c\u0131n\u0131n etkile\u015fimine e\u015flik edecek g\u00f6rsellikte sunaca\u011f\u0131m\u0131z yap\u0131lara ihtiyac\u0131m\u0131z vard\u0131r. Bu yap\u0131larda standart...<\/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":[2274,2273,2275,2276,2277,2187,2278,2280,2279,2282,2281],"class_list":["post-7716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-angular-notifications","tag-angular-notifications","tag-angular-notifications-entegrasyonu","tag-angular-notifications-kullanimi","tag-angular2-notifications","tag-integrated-terminal","tag-ngular2-notifications","tag-notificationsservice","tag-npm-install","tag-simple-notifications","tag-simplenotificationsmodule"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7716","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=7716"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7716\/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=7716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Fonksiyon<\/th>\n	A\u00e7\u0131klama<\/th>\n<\/tr>\n<\/thead>\n
alert<\/td>\n	<\/td>\n<\/tr>\n
error<\/td>\n	Ba\u015far\u0131s\u0131zl\u0131k, olumsuzluk durumlar\u0131nda kullan\u0131l\u0131r.<\/td>\n<\/tr>\n
info<\/td>\n	Bilgi verilirken kullan\u0131l\u0131r.<\/td>\n<\/tr>\n
warn<\/td>\n	Uyar\u0131, ikaz durumlar\u0131nda kullan\u0131l\u0131r.<\/td>\n<\/tr>\n
success<\/td>\n	\u0130\u015flem ba\u015far\u0131l\u0131ysa kullan\u0131l\u0131r.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \u015feklinde tarif edebiliriz.<\/p>\n T\u00fcm bu i\u015flemleri ger\u00e7ekle\u015ftirdikten sonra uygulamay\u0131 kaydedip yay\u0131nlad\u0131\u011f\u0131n\u0131zda a\u015fa\u011f\u0131daki gibi bildiri yap\u0131lanmas\u0131yla kar\u015f\u0131la\u015fabilirsiniz. \n $\"Angular$ <\/a><\/p>\n Evet. Bu i\u00e7eri\u011fimizde de olduk\u00e7a kullan\u0131\u015fl\u0131 ve gayet \u015f\u0131k olan Angular Notifications \u00fczerine detayl\u0131 bir entegrasyon makalesi olu\u015fturmu\u015f olduk.<\/p>\n Faydalanman\u0131z ve yarar\u0131n\u0131 Angular uygulamalar\u0131nda bol bol g\u00f6rmeniz dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, Her web site uygulamas\u0131nda oldu\u011fu gibi Angular uygulamalar\u0131nda da belirli i\u015flemler neticesinde son kullan\u0131c\u0131ya iletilmesi gereken bildiriler mevcuttur ve bu bildirileri kullan\u0131c\u0131n\u0131n etkile\u015fimine e\u015flik edecek g\u00f6rsellikte sunaca\u011f\u0131m\u0131z yap\u0131lara ihtiyac\u0131m\u0131z vard\u0131r. Bu yap\u0131larda standart...<\/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":[2274,2273,2275,2276,2277,2187,2278,2280,2279,2282,2281],"class_list":["post-7716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-angular-notifications","tag-angular-notifications","tag-angular-notifications-entegrasyonu","tag-angular-notifications-kullanimi","tag-angular2-notifications","tag-integrated-terminal","tag-ngular2-notifications","tag-notificationsservice","tag-npm-install","tag-simple-notifications","tag-simplenotificationsmodule"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7716","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=7716"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7716\/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=7716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}