<\/div>\n

Merhaba,<\/p>\n

AngularJS, bir tek sayfa \u00fczerinde etkile\u015fim sa\u011flayabilmemiz i\u00e7in birbirinden ba\u011f\u0131ms\u0131z farkl\u0131 par\u00e7alar \u00fczerinde bizlere \u00e7al\u0131\u015fma imkan\u0131 vermektedir. Dolay\u0131s\u0131yla bu par\u00e7alar\u0131 bir b\u00fct\u00fcn olarak bir araya getirme ihtiyac\u0131 do\u011fdu\u011fu vakitte de devreye mod\u00fcl yap\u0131lar\u0131 girmektedir. \u0130\u015fte farkl\u0131 yap\u0131lar\u0131\/b\u00f6l\u00fcmleri\/par\u00e7alar\u0131 vs. bir arada tutma ya da bir araya getirme g\u00f6revini icra eden mekanizmam\u0131z mod\u00fcl yap\u0131s\u0131d\u0131r.<\/p>\n

Mod\u00fcl Yap\u0131s\u0131 Nedir?<\/h3>\n
C#, Java vs. dillerinden Main() metodunu bilirsiniz ki, uygulamadaki birbirinden ba\u011f\u0131ms\u0131z bir\u00e7ok par\u00e7ay\u0131 bir araya getirme g\u00f6revine sahip bir Thread’dir. AngularJS bir Main fonksiyonu bar\u0131nd\u0131rmad\u0131\u011f\u0131na g\u00f6re birbirinden farkl\u0131 par\u00e7alar\u0131 bir araya getirme g\u00f6revini mod\u00fcl yap\u0131s\u0131 y\u00fcklenmekte ve i\u015flemektedir.<\/p>\n

AngularJS’de Mod\u00fcl Nas\u0131l Olu\u015fturulur?<\/h3>\n

Bunun i\u00e7in a\u015fa\u011f\u0131daki prototipi inceleyebilirsiniz.<\/p>\n

\r\nvar [Mod\u00fcl\u00fc Temsil Edecek De\u011fi\u015fken] = angular.modul("Mod\u00fcl Ad\u0131", []);\r\n<\/pre>\nYukar\u0131daki prototipte angular.modul()<\/em> fonksiyonu ile mod\u00fcl tan\u0131mlanmaktad\u0131r. Fonksiyonun ilk parametresi mod\u00fcl\u00fcn ad\u0131n\u0131 temsil ederken, ikinci parametre mod\u00fcl i\u00e7in gerekli olan ba\u011f\u0131ml\u0131l\u0131klar\u0131 ya da di\u011fer mod\u00fclleri ifade eder. Bu par\u00e7alar birden fazla olabilece\u011finden dolay\u0131 bunlar\u0131 bir diziyle tan\u0131mlamam\u0131z gerekecektir. Yani buradan anlayaca\u011f\u0131m\u0131z ikinci parametre bir mod\u00fcl\u00fc farkl\u0131 bir mod\u00fcl ya da yap\u0131yla ba\u011flamam\u0131z\u0131 sa\u011flayacak i\u015flevselli\u011fe sahiptir. Bu prototipte ba\u015fka mod\u00fcller ile ba\u011flant\u0131 olmad\u0131\u011f\u0131ndan dolay\u0131 bo\u015f bir dizi g\u00f6nderilmektedir. Bu konuya sonraki yaz\u0131lar\u0131m\u0131zda de\u011finece\u011fiz.<\/p>\n
\u015eimdi de i\u00e7eri\u011fin devam\u0131n\u0131 getirebilmek ve bir b\u00fct\u00fcn olarak sonland\u0131rabilmek i\u00e7in controller yap\u0131s\u0131 \u00fczerinede biraz giri\u015f yapal\u0131m.<\/p>\n
AngularJS’de Controller’\u0131n G\u00f6revi Nedir? ve Nas\u0131l Tan\u0131mlan\u0131r?<\/h3>\nAngularJS’de controller dedi\u011fimiz mekanizma asl\u0131nda teknik olarak bildi\u011fimiz bir JavaScript fonksiyonudur. Conroller’\u0131n g\u00f6revi bilinen klasik MVC mimarisindeki i\u015fleyi\u015fin birebir ayn\u0131s\u0131d\u0131r. \u0130\u00e7erisinde modeli i\u015flemekte, programatiksel i\u015flemleri ger\u00e7ekle\u015ftirmektedir. Ve nihayetinde yap\u0131lan \u00e7al\u0131\u015fman\u0131n neticesini View’e yans\u0131tmaktad\u0131r.<\/p>\n
A\u015fa\u011f\u0131da bir controller yap\u0131s\u0131n\u0131n nas\u0131l olu\u015fturuldu\u011fu \u00f6rneklendirilmi\u015ftir.<\/p>\n
\r\n    <script>\r\n        var OrnekController = function ($scope) {\r\n\r\n        }\r\n    <\/script>\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere bildi\u011fimiz JavaScript fonksiyonu oldu bize AngularJS controller\u0131 \ud83d\ude42<\/p>\n
Ger\u00e7i burada muhtemelen sizinde dikkatinizi \u00e7eken bir $scope parametresi mevcuttur.<\/p>\n
Peki nedir bu $scope parametresi?<\/strong>
\nController ile View aras\u0131ndaki k\u00f6pr\u00fcd\u00fcr diyebiliriz. Hani Asp.NET MVC mimarisinde controllerdan viewe g\u00f6nderilen modeli viewde @model<\/em> keyword\u00fc ile yakal\u0131yoruz ya hah i\u015fte bu yap\u0131n\u0131n AngularJS’de ki kar\u015f\u0131l\u0131\u011f\u0131 $scope parametresidir.<\/p>\n
AngularJS’de Controller \u0130le Mod\u00fcl\u00fc Birbirine Ba\u011flama<\/h3>\n\u0130\u015fte \u015fimdi as\u0131l meselemize geldik. Olu\u015fturdu\u011fumuz mod\u00fcl ile controller aras\u0131nda nas\u0131l bir ba\u011f kuraca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz.<\/p>\n
Bu i\u015flem i\u00e7in olu\u015fturdu\u011fumuz mod\u00fcl\u00fcn controller fonksiyonunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n
\r\n    <script>\r\n        \/\/Mod\u00fcl olu\u015fturuluyor.\r\n        var Uygulama = angular.module("UygulamaModulu", []);\r\n        \/\/Controller olu\u015fturuluyor.\r\n        var OrnekController = function ($scope) {\r\n            \r\n        }\r\n        \/\/Mod\u00fcle controller ekleniyor.\r\n        Uygulama.controller("ornekController", OrnekController);\r\n    <\/script>\r\n<\/pre>\nBenzer mant\u0131kla mod\u00fcle eklenecek controller a\u015fa\u011f\u0131daki gibi fonksiyonu kullanma an\u0131nda da tan\u0131mlanabilir.<\/p>\n
\r\n    <script>\r\n        \/\/Mod\u00fcl olu\u015fturuluyor.\r\n        var Uygulama = angular.module("UygulamaModulu", []);\r\n\r\n        \/\/Mod\u00fcle controller ekleniyor.\r\n        Uygulama.controller("ornekController", function ($scope) {\r\n            \r\n        });\r\n    <\/script>\r\n<\/pre>\nAngularJS Uygulamas\u0131nda Mod\u00fcl ve Controller Kullan\u0131m\u0131<\/h3>\nSon olarak \u015fu ana kadar \u00fczerine yo\u011funla\u015ft\u0131\u011f\u0131m\u0131z yap\u0131lar\u0131n b\u00fct\u00fcnsel nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 \u00f6rnek bir proje \u00fczerinden inceleyelim.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="HesapMakinesi">\r\n<!-- Mod\u00fcl ng-app direktifine veriliyor.  -->\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n    <script>\r\n        \/\/Mod\u00fcl olu\u015fturuluyor.\r\n        var Uygulama = angular.module("HesapMakinesi", []);\r\n        \/\/Controller olu\u015fturuluyor.\r\n        var HesapController = function ($scope) {\r\n            var DegerlerModel = {\r\n                Sayi1: 0,\r\n                Sayi2: 0\r\n            };\r\n            $scope.Hesapla = function (Sayi1, Sayi2) {\r\n                if (Sayi1 != null && Sayi2 != null)\r\n                    return Sayi1 * Sayi2;\r\n                return 0;\r\n            };\r\n        }\r\n        \/\/Mod\u00fcle controller ekleniyor.\r\n        Uygulama.controller("HesapController", HesapController);\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <div ng-controller="HesapController">\r\n        <!-- Modele eklenen controller ng-controller direktifine ekleniyor.  -->\r\n        Say\u0131 1 = <input type="text" ng-model="DegerlerModel.Sayi1" \/><br \/>\r\n        Say\u0131 2 = <input type="text" ng-model="DegerlerModel.Sayi2" \/><br \/>\r\n        <strong ng-bind="Hesapla(DegerlerModel.Sayi1, DegerlerModel.Sayi2)"><\/strong>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki \u00e7al\u0131\u015fmada basit bir matematiksel i\u015flemi yapabilmek i\u00e7in bir AngularJS temelli in\u015fa olu\u015fturmu\u015f bulunmaktay\u0131z.
\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, AngularJS, bir tek sayfa \u00fczerinde etkile\u015fim sa\u011flayabilmemiz i\u00e7in birbirinden ba\u011f\u0131ms\u0131z farkl\u0131 par\u00e7alar \u00fczerinde bizlere \u00e7al\u0131\u015fma imkan\u0131 vermektedir. Dolay\u0131s\u0131yla bu par\u00e7alar\u0131 bir b\u00fct\u00fcn olarak bir araya getirme ihtiyac\u0131 do\u011fdu\u011fu vakitte de devreye mod\u00fcl yap\u0131lar\u0131...<\/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,2044,2040,2045,2046,2041,51,2038,2039],"class_list":["post-7028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-scope","tag-angularjs","tag-angularjs-controller","tag-angularjs-controller-nasil-kullanilir","tag-angularjs-dongu","tag-angularjs-modul","tag-angularjs-modul-nasil-kullanilir","tag-angularjs-repeat","tag-dongu","tag-ng-repeat","tag-repeat"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7028","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=7028"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7028\/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=7028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}