Angular JS – Controller

Selam Arkadaslar

Yazmaya uzuuun bir ara verdikten sonar yine sizlerleyim 🙂 Angular JS konusuna devam edeceğiz. İlk yazımda AngularJS nedir mantığı nedir kısaca bahsettik. Bu yazıda ise MVC nin C sinden bahsedeceğim.

Controller

Controller MVC nin View’i yani son kullanıcının gördüğü ile model yani business logic katmanlarının iletişime geçtiği katmandır.  Yani kod yardimi ve model katmanı ile elde ettigimiz bir veriyi HTML kodlarına gönderme işini üstlenir. Aşağıdaki diagram bize Controller’ın görevini anlamakta biraz daha yardımcı olacaktır.

angularJs_mvc_framwork

Şimdi gelin isterseniz küçük bir örnek ile Controller ne işe yarıyor görelim. Öncelikle JS dosyaları ile çalışacağımızı belirtmek isterim herhangi bir editöre ihtiyacınız olmayacaktır Notepad++ işinizi görecektir. Tabi AngularJS kütüphanesinide buradan indirip eklemeyi unutmayın lütfen.

HTML dosyamizi asagidaki gibi oluşturuyoruz.

<!DOCTYPEhtml>
<htmllang="en" data-ng-app="app">
<head>
<metacharset="UTF-8">
<title>MEZOBLOGANGULARSAMPLE</title>
<scriptsrc="controller/controller1.js"></script>
<scriptsrc="js/angular.min.js"></script>
</head>
<body>
<divng-controller="controller1asc">
<inputtype="button" value="DenemeButonu" ng-click="c.myMethod()">
</div>
</body>
</html>
									

Ardından birde buradaki ng controller karşısında yer alan Controller1 adlı dosyamızı ekleyip içersine şu kodları eklemeliyiz.

varapp=angular.module("app",[]);

app.controller("controller1",function(){
this.myMethod=function(){
alert("HelloWorld");
}
});
									

Eklemiş olduğumuz ng-controller tagı ile html üzerinde çalışacak olan AngularJS kodlarının nereyi hedef alarak metotları araması ve çalıştırması gerektiğini belirtmiş olduk.

Bu yöntem ile bir angularjs uygulamasının içersine bir controller tanımlayarak bu controller içersine yazdığımız her kodu ve aldığımız her değeri html elemanlari üzerine aktarmamızın ne kadar kolay olduğunu görmüş olduk . Son olarak bu işlemin çıktısı aşağıdaki gibi olacaktır. Butona tıklandığında controller içersindeki metot çalışacaktır.

angularController2

Umarım yararlı olur

Bilgiyle Kalın

M.Zeki OSMANCIK

Leave a Reply

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box