<\/div>\n
Merhaba,<\/p>\n
Bir \u00f6nceki AngularJS Nedir?<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131m\u0131zda AngularJS’nin \u00f6zellik ve getirileri hakk\u0131nda teorik olarak konu\u015fmu\u015ftuk. Bu i\u00e7eri\u011fimizde ise AngularJS’yi teknik olarak temellendirece\u011fiz ve pratikte ana etmenlerin neler oldu\u011funu inceleyece\u011fiz.<\/p>\n
Her\u015feyden \u00f6nce AngularJS’yi kullanaca\u011f\u0131m\u0131z sayfaya a\u015fa\u011f\u0131daki gibi kaynak dosyay\u0131 entegre etmemiz gerekmektedir.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAngularJS’de ilk olarak a\u015fa\u011f\u0131daki be\u015f adet direktifi ele almak bundan sonraki di\u011fer yap\u0131lar ve direktifler i\u00e7in temel te\u015fkil edecektir. Bu be\u015f direktif;<\/p>\n\nng-app<\/strong>
\nng-app y\u00f6nergesi; AngularJS’nin hangi blokta kullanaca\u011f\u0131n\u0131 belirtmektedir. Bu blok <div> gibi <span> gibi vs. herhangi bir html etiketi olabilir.<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body> \r\n<div ng-app="">\r\n        <!-- Burada AngularJS kullan\u0131labilir. -->\r\n<\/div>\r\n<div>\r\n        <!-- Burada AngularJS kullan\u0131lamaz. -->\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi AngularJS ilk div blo\u011funda \u00e7al\u0131\u015ft\u0131r\u0131labilirken, ng-app y\u00f6nergesinin tan\u0131mlanmad\u0131\u011f\u0131 ikinci div blo\u011funda \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n
E\u011fer ki AngularJS’yi t\u00fcm sayfada aktif k\u0131lmak istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi t\u00fcm sayfay\u0131 kapsayan html etiketinde ng-app y\u00f6nergesini tan\u0131mlayabilirsiniz.<\/p>\n\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBu \u015fekilde sayfa i\u00e7erisindeki t\u00fcm alanda AngularJS \u00e7al\u0131\u015faca\u011f\u0131ndan dolay\u0131 kullanabilirsiniz.<\/li>\nng-init<\/strong>
\nng-init y\u00f6nergesi; bir element \u00fczerinden de\u011fi\u015fken, s\u0131n\u0131f, dizi vs. tan\u0131mlamam\u0131z\u0131 sa\u011flayan bir direktiftir.
\nDe\u011fi\u015fken Olu\u015fturma<\/span><\/em><\/strong><\/p>\n\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body> \r\n<div ng-init="x">\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada “x” ad\u0131nda bir de\u011fi\u015fken tan\u0131mlanm\u0131\u015ft\u0131r. Tan\u0131mlanan bu de\u011fi\u015fkene tan\u0131mlama a\u015famas\u0131nda bir varsay\u0131lan de\u011fer atanmam\u0131\u015ft\u0131r. E\u011fer atamak istiyorsak bunu “=(assign)” operat\u00f6r\u00fcyle a\u015fa\u011f\u0131daki gibi ger\u00e7ekle\u015ftirebiliriz.<\/p>\n\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>   \r\n<div ng-init="x=3">\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBirden fazla de\u011fi\u015fkeni de a\u015fa\u011f\u0131daki gibi “;” operat\u00f6r\u00fcyle ay\u0131rarak ger\u00e7ekle\u015ftirebiliriz.<\/p>\n\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>  \r\n<div ng-init="x=3; y='y'; z=true">\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nS\u0131n\u0131f Olu\u015fturma<\/span><\/em><\/strong><\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n<div ng-init="Sinif={x,y,z}">\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada “Sinif” isminde bir s\u0131n\u0131f olu\u015fturulmu\u015ftur ve “=” operat\u00f6r\u00fcyle “{}” scopelar e\u015fli\u011finde i\u00e7erisine “x”, “y” ve “z” isimlerinde propertyler yerle\u015ftirilmi\u015ftir. Burada dikkat edilmesi gereken husus propertyler “,(virg\u00fcl)” ile ayr\u0131lmaktad\u0131rlar. Ayr\u0131ca bu kullan\u0131mda propertylere olu\u015fturulma an\u0131nda bir varsay\u0131lan de\u011fer atanmam\u0131\u015ft\u0131r.<\/p>\n
E\u011fer ki s\u0131n\u0131f i\u00e7erisindeki propertylere varsay\u0131lan de\u011ferlerini vermek istiyorsak a\u015fa\u011f\u0131daki gibi “:” operat\u00f6r\u00fcyle bu i\u015flemi ger\u00e7ekle\u015ftirebiliriz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>    \r\n<div ng-init="Sinif={x:5,y:'Ahmet',z:true}">\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “Sinif” isimli s\u0131n\u0131f\u0131n propertylerine ilk de\u011ferleri bu \u015fekilde atanm\u0131\u015f bulunmaktad\u0131r.<\/p>\n
Dizi Olu\u015fturma<\/span><\/em><\/strong><\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Araba=['Opel', 'Mercedes', 'BMW']">\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “Araba” isminde bir dizi olu\u015fturulmu\u015ftur. Burada dikkat etmeniz gereken nokta ifadeyi “Araba={}” \u015feklinde kullansayd\u0131k bu bir s\u0131n\u0131f olacakt\u0131. Lakin “Araba=[]” \u015feklinde bir syntax bir dizi yap\u0131s\u0131n\u0131 ifade etmektedir. Dizinin i\u00e7erisine “,” ile elemanlar\u0131 belirtmekteyiz.<\/p>\n
Ayriyetten bir referans tipli dizi olu\u015fturmak istiyorsak e\u011fer a\u015fa\u011f\u0131daki gibi bir tan\u0131mlama yapabiliriz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Araba=[{a:1, b:2, c:3}, {a:4, b:5, c:6}, {a:7, b:8, c:9}]">\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBirden Fazla Yap\u0131y\u0131 Olu\u015fturma<\/span><\/em><\/strong>
\nAyn\u0131 anda hem de\u011fi\u015fken hem s\u0131n\u0131f ve hemde dizi gibi yap\u0131lar\u0131 olu\u015fturmak istiyorsak bu yap\u0131lar aras\u0131nda “;” operat\u00f6r\u00fcn\u00fc koymam\u0131z yeterlidir.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="x='x'; y={a:5}; z=['Merhaba','D\u00fcnya']">\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “x” ad\u0131nda bir de\u011fi\u015fken, “y” ad\u0131nda bir s\u0131n\u0131f ve “z” ad\u0131nda bir dizi olu\u015fturulmu\u015ftur.\n<\/li>\n
ng-model<\/strong>
\nng-model y\u00f6nergesi; ad\u0131 \u00fczerinde herhangi bir etkile\u015fimli html etiketinde(<input>) ilgili i\u00e7eri\u011fi elde etmek i\u00e7in model tan\u0131mlamam\u0131z\u0131 sa\u011flayan direktiftir.<\/p>\n\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <input type="text" ng-model="Model" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer texte girilen de\u011feri “Model” isminde tan\u0131mlanan modelle elde edebilmekteyiz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Insan={Adi, SoyAdi}">\r\n        Ad\u0131 : <input type="text" ng-model="Insan.Adi" \/><br \/>\r\n        Soyad\u0131 : <input type="text" ng-model="Insan.SoyAdi" \/>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada ise “Insan” ad\u0131nda tan\u0131mlanan s\u0131n\u0131f\u0131n propertylerine input textlerdeki de\u011ferler ng-model ile ba\u011flanm\u0131\u015ft\u0131r. \u0130\u00e7eri\u011fimizin ilk sat\u0131rlar\u0131nda adresini vermi\u015f oldu\u011fum bir \u00f6nceki makalede Two Way Data Binding(\u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama)<\/em> olay\u0131n\u0131 burada g\u00f6rmekteyiz. Burada modelin de\u011ferleri de\u011fi\u015fti\u011finde viewde, viewdeki de\u011fer de\u011fi\u015fti\u011finde modelde bir yans\u0131ma olu\u015fmaktad\u0131r.\n<\/li>\n
ng-bind<\/strong>
\nng-bind y\u00f6nergesi; \u00f6nceden tan\u0131mlanan modeli bind eden bir direktiftir.<\/p>\n\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <input type="text" ng-model="Deger" \/>\r\n    <div ng-bind="Deger">\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nInputun de\u011ferini okumak i\u00e7in tan\u0131mlanan “Deger” ismindeki model div etiketine bind edilmi\u015ftir. Modeldeki her t\u00fcrl\u00fc de\u011fer de\u011fi\u015fikli\u011fi bu bind sayesinde ve Two Way Data Binding(\u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama)<\/em> prensibi sonucu div etiketine yans\u0131t\u0131lacakt\u0131r.
\n<\/a>
\nBind i\u015flevini bir s\u0131n\u0131f ile a\u015fa\u011f\u0131daki gibi kullanabiliriz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Insan={Adi, SoyAdi}">\r\n        Ad\u0131 = <input type="text" ng-model="Insan.Adi" \/><br \/>\r\n        Soyad\u0131 = <input type="text" ng-model="Insan.SoyAdi" \/><br \/>\r\n        <span ng-bind="Insan.Adi"><\/span>&nbsp;<span ng-bind="Insan.SoyAdi"><\/span>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/a>
\nBirden fazla modeli tek bir seferde bind etmek istiyorsak yukar\u0131daki \u00e7al\u0131\u015fmay\u0131 a\u015fa\u011f\u0131daki gibi de in\u015fa edebiliriz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Insan={Adi, SoyAdi}">\r\n        Ad\u0131 = <input type="text" ng-model="Insan.Adi" \/><br \/>\r\n        Soyad\u0131 = <input type="text" ng-model="Insan.SoyAdi" \/><br \/>\r\n        <span ng-bind="Insan.Adi + ' ' + Insan.SoyAdi"><\/span>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/li>\n\n{{}} \u0130fadesi<\/strong>
\n{{}} ifadesi, AngularJS expressions tan\u0131mlama blo\u011fudur. Bir nevi scope g\u00f6revi g\u00f6rmektedir.<\/p>\n\u0130ki de\u011fi\u015fkenin de\u011ferini a\u015fa\u011f\u0131daki gibi istenilen yere yazd\u0131rabiliriz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Adi='Gen\u00e7ay'; SoyAdi='Y\u0131ld\u0131z'">\r\n        {{Adi + ' ' + SoyAdi}}\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYa da bir nesnenin property de\u011ferlerini.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-init="Insan={Adi:'Gen\u00e7ay', SoyAdi:'Y\u0131ld\u0131z'}">\r\n        {{Insan.Adi + ' ' + Insan.SoyAdi}}\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi istedi\u011fimiz alana istedi\u011fimiz m\u00fcdahaleyi {{}} ifadesi sayesinde yapmaktay\u0131z.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="">\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <input type="text" ng-model="veri" \/>\r\n    {{Deger}}\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada da texte girilen de\u011feri elde eden “veri” isimli modelin de\u011ferini yazd\u0131rmaktay\u0131z.\n<\/li>\n<\/ul>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere AngularJS’nin bu be\u015f direktifi olduk\u00e7a etkili bir kullan\u0131mla birlikte esnek yakla\u015f\u0131m sergilememizi sa\u011flamaktad\u0131r. Bundan b\u00f6yle, bu alt yap\u0131da AngularJS \u00e7al\u0131\u015fmalar\u0131n\u0131 ele alacak ve h\u0131zl\u0131 bir \u015fekilde y\u00fckseli\u015fe ge\u00e7ece\u011fiz \ud83d\ude42<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki AngularJS Nedir? ba\u015fl\u0131kl\u0131 yaz\u0131m\u0131zda AngularJS’nin \u00f6zellik ve getirileri hakk\u0131nda teorik olarak konu\u015fmu\u015ftuk. Bu i\u00e7eri\u011fimizde ise AngularJS’yi teknik olarak temellendirece\u011fiz ve pratikte ana etmenlerin neler oldu\u011funu inceleyece\u011fiz. Her\u015feyden \u00f6nce AngularJS’yi kullanaca\u011f\u0131m\u0131z sayfaya...<\/p>\n","protected":false},"author":1,"featured_media":7002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2022],"tags":[897,2024,2033,2034,2037,2036,2035,2032],"class_list":["post-7005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-operatoru","tag-angularjs","tag-iki-yonlu-veri-baglama","tag-ng-app","tag-ng-bind","tag-ng-init","tag-ng-model","tag-two-way-data-binding"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7005","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=7005"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7002"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}