<\/div>\n

Merhaba,<\/p>\n

Bir \u00f6nceki AngularJS \u2013 Mod\u00fcl Yap\u0131s\u0131 Nedir ve Nas\u0131l Kullan\u0131l\u0131r?<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda AngularJS’de mod\u00fcl yap\u0131s\u0131n\u0131 ele al\u0131rken bir yandan da ucundan k\u0131y\u0131s\u0131ndan controller yap\u0131s\u0131n\u0131da de\u011ferlendirmi\u015ftik. \u015eimdi ise AngularJS’de Controller yap\u0131s\u0131n\u0131 daha detayl\u0131 bir \u015fekilde de\u011ferlendirece\u011fiz.<\/p>\n

AngularJS’de controller katman\u0131, esas olarak programatik k\u0131s\u0131mlar\u0131 kapsayan bir yap\u0131 te\u015fkil etmektedir. Bu yap\u0131da; model olu\u015fturabilir, de\u011fi\u015fken tan\u0131mlayabilir, metotlar olu\u015fturup i\u00e7erisinde i\u015flemler yapabilir ve algoritmik t\u00fcm i\u015flevleri in\u015fa edebiliriz.<\/p>\n

Yukar\u0131da adresini vermi\u015f oldu\u011fum makalede controller yap\u0131lar\u0131n\u0131 mod\u00fcl i\u00e7erisinde tuttu\u011fumuzu incelemi\u015ftik. O y\u00fczden e\u011fer incelemediyseniz ilk i\u015f ilgili makaleyi detayl\u0131ca okuyunuz. Ard\u0131ndan kald\u0131\u011f\u0131n\u0131z bu noktadan devam edebilirsiniz.<\/p>\n

AngularJS’de bir controller yap\u0131s\u0131nu a\u015fa\u011f\u0131daki gibi \u00f6rneklendirebiliriz.<\/p>\n

\r\n    <script>\r\n        var Uygulama = angular.module("Uygulama", []);\r\n        Uygulama.controller("UygulamaController", function ($scope) {\r\n\r\n        });\r\n    <\/script>\r\n<\/pre>\nBurada mod\u00fcle controller fonksiyonu arac\u0131l\u0131\u011f\u0131yla “UygulamaController” isminde bir controller eklenmektedir.<\/p>\n
Controller’da bulunan $scope parametresi arac\u0131l\u0131\u011f\u0131yla view katman\u0131na ta\u015f\u0131nacak olan yap\u0131lar olu\u015fturulmaktad\u0131r. <\/p>\n
\r\n    <script>\r\n        var Uygulama = angular.module("Uygulama", []);\r\n        Uygulama.controller("UygulamaController", function ($scope) {\r\n            \/\/De\u011fi\u015fken tan\u0131mlama.\r\n            $scope.Adi = "Gen\u00e7ay";\r\n            \/\/Model tan\u0131mlama.\r\n            var Bilgiler = {\r\n                DogumTarihi: 1992,\r\n                Memleket: "Artvin",\r\n                Askerlik: true\r\n            };\r\n            \/\/Modeli ta\u015f\u0131ma.\r\n            $scope.BilgilerModel = Bilgiler;\r\n            \/\/Fonksiyon olu\u015fturma.\r\n            $scope.YasHesapla = function () {\r\n                return 2018 - Bilgiler.DogumTarihi;\r\n            };\r\n        });\r\n    <\/script>\r\n<\/pre>\nYukar\u0131da g\u00f6rm\u00fc\u015f oldu\u011funuz gibi de\u011fi\u015fken, model ve bir fonksiyonun nas\u0131l olu\u015fturuldu\u011funu g\u00f6rm\u00fc\u015f olduk. $scope parametresine “.(nokta)” operat\u00f6r\u00fcyle tan\u0131mlanan de\u011fi\u015fkenlere bu yap\u0131lar yukar\u0131daki gibi atanmaktad\u0131r.<\/p>\n
Olu\u015fturmu\u015f oldu\u011fumuz bu yap\u0131y\u0131 a\u015fa\u011f\u0131daki gibi kullanabiliriz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n    <script>\r\n        var Uygulama = angular.module("Uygulama", []);\r\n        Uygulama.controller("UygulamaController", function ($scope) {\r\n            \/\/De\u011fi\u015fken tan\u0131mlama.\r\n            $scope.Adi = "Gen\u00e7ay";\r\n            \/\/Model tan\u0131mlama.\r\n            var Bilgiler = {\r\n                DogumTarihi: 1992,\r\n                Memleket: "Artvin",\r\n                Askerlik: true\r\n            };\r\n            \/\/Modeli ta\u015f\u0131ma.\r\n            $scope.BilgilerModel = Bilgiler;\r\n            \/\/Fonksiyon olu\u015fturma.\r\n            $scope.YasHesapla = function () {\r\n                return 2018 - Bilgiler.DogumTarihi;\r\n            };\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body ng-app="Uygulama">\r\n    <div ng-controller="UygulamaController">\r\n        {{Adi}}\r\n        <br \/>\r\n        {{BilgilerModel.DogumTarihi + " " + BilgilerModel.Memleket + " " + BilgilerModel.Askerlik}}\r\n        <br \/>\r\n        {{YasHesapla()}}\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n$scope parametresindeki yap\u0131lara eri\u015fmek i\u00e7in view katman\u0131nda direkt ilgili yap\u0131n\u0131n tan\u0131mlanan ad\u0131n\u0131 yazmam\u0131z yeterli olacakt\u0131r.<\/p>\n
Son olarak makalemizin giri\u015fiyle ba\u011fda\u015ft\u0131racak \u015fekilde bir husustan da bahsetmek istiyorum ki, o da \u015fudur;
\nK\u0131sa yoldan mod\u00fcl ve controller olu\u015fturmak istiyorsan\u0131z e\u011fer a\u015fa\u011f\u0131daki y\u00f6ntemi deneyebilirsiniz.<\/p>\n
\r\n    <script>\r\n        var Uygulama = angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {\r\n \r\n        });\r\n    <\/script>\r\n<\/pre>\nYani direkt olarak module fonksiyonu \u00fczerinden controller fonksiyonunu \u00e7a\u011f\u0131rarakta hareket edebilirsiniz.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere.
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim.<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki AngularJS \u2013 Mod\u00fcl Yap\u0131s\u0131 Nedir ve Nas\u0131l Kullan\u0131l\u0131r? ba\u015fl\u0131kl\u0131 yaz\u0131mda AngularJS’de mod\u00fcl yap\u0131s\u0131n\u0131 ele al\u0131rken bir yandan da ucundan k\u0131y\u0131s\u0131ndan controller yap\u0131s\u0131n\u0131da de\u011ferlendirmi\u015ftik. \u015eimdi ise AngularJS’de Controller yap\u0131s\u0131n\u0131 daha detayl\u0131 bir...<\/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":[2042,2024,2043,2047,2048,285],"class_list":["post-7036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-scope","tag-angularjs","tag-angularjs-controller","tag-angularjsde-controller-kullanimi","tag-angularjsde-controller-ne-ise-yarar","tag-controller"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7036","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=7036"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7036\/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=7036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}