AngularJS te controller ların görevi, view ile data arasındaki iletimi $scope aracılığıyla sağlamak olarak gözüküyor. Fonksiyonların yazıldığı katman olarak gözüküyor. View a koyduğunuz bir butona tıklayınca çalışması gereken fonksiyonun yazıldığı yer olarak gözüküyor. Lakin DEĞİLLLL.

Öncelikle biraz altbilgi verelim;

MVC ye aşina olanlar bilir. Bilmeyen arkadaşlar http://angulartr.com/mvc-nedir-en-basit-aciklamasi-ile/ adresindeki yazıma gözatabilirler.

AngularJS’ te controller lar, Diğer MVC Frameworklerde olduğu gibi, sadece uygulamanızı yönetmek, kontrol etmek için vardırlar. Tüm sorumluluğu alırlar. İşleri kontrol eder ve yoluna koyarlar ama ASLA ve ASLA business logic barındırmazlar.

Bu ne demek oluyor ?

Artık düzenli kod yazacağız demek oluyor. Jquery ile çalışmış olanlar bilir, DOM manipülasyonlar, XHR Requestler, fonksiyonlar hepsi iç içe girmek durumunda kalıyordu. Hatta elementler için inanılmaz yerlerde inanılmaz şekillerde eventler kurulduğunu gördüm. Samanlıkta iğne aramak gibiydi.

İşte AngularJS’ in yapısı gereği zaten DOM Manipülasyonunu biz yapmıyoruz. XHR Requestler Service katmanında olacak, Eventler ise, Directive dediğimiz katmanlarda yazılacak. Sakın kafanız karışmasın, korkmayın. Düzen demek kolaylık demektir.

“AngularJS Controller’ a Giriş”

AngularJS’ te controller oluşturabilmek için öncelikle bir angular projesi açmış olmanız gerekiyor, bind yapısını incelemiş olmanız gerekiyor. Eğer henüz incelemediyseniz http://angulartr.com/angularjs-binding/ adresinden inceleyip bir Angular projesi açın.

Controller yazabilmek için, öncelikle ana bir Angular modülümüz olmalı. Uygulamamızda tüm katmanlar ve alt modüller, bu ana modüle bağlı olacak. Bu sebeple, projemizde javascript dosyası açıp, HTML kodumuza ekliyoruz ve ng-app özelliğine de uygulamamızın ana modülünün ismini yazıyoruz. Aşağıdaki gibi

Ben modül ve controller tanımlamak için app.js isminde bir js dosyası açtım ve projeye ekledim. Siz isim konusunda özgürsünüz.

Çok ilerisi için bilgi : Angular’ ın daha ilk derslerinde olduğumuz için birazdan yapacağım işlemleri tek bir app.js dosyasında yapıyorum. Ama projemiz büyüdüğünde (controllers, services, directives), her katman kendi js dosyalarında yazılacak, bilginize.

app.js dosyamın içinde ana modülümü tanımlıyorum.

Gördüğünüz gibi, ng-app değerine verdiğim ismi buraya yazdım.

Dikkat : Parantez içinde bir köşeli parantez yani dizi açıldığını ve şimdilik içinin boş olduğunu görüyorsunuz. İşte ileride tanımlayacağım tüm alt modüllerin ismini bu diziye ekleyeceğim. angular.module ün içinde 2.parametre olarak dizi varsa, bu kod ile modül tanımlanır. 2.parametre yoksa, bu kod ile tanımlanmış olan modülden referans elde edilir.

app.js dosyamızda controller’ ımızı tanımlıyoruz ve son görüntüsü aşağıdaki gibi oluyor.

Gördüğünüz gibi ana modülden angular.module(‘ilkUygulamam’) ile referans aldım ve AngularJS modül yapısının controller metodunu kullanarak bir controller açtım. İlk parametreye controller ın ismini yazdım. ardından controllerın içeriğini yazmak için function ile bir metod açtım. Artık controllerın içini yazabilir durumdayım. function içinde $scope değişkenini bulunuyor. İşte bu değişken javascript teki “this” ile benzer işlev gösteriyor. $scope değişkeni ile controller’ ı referans alıyorum, $scope. ile controller değişken ve metod atayabileceğim. Bunların hepsini birazdan göreceksiniz.

Controller’a değişken(Model) atamak

Controller’ ımızda değişkenler ve metodlar olacak demiştik. İşte ilk değişkenimizi yani modelimizi set ediyoruz. AngularJS te değişkenlere model denir.

Görüldüğü üzere mesaj değişkenimizi $scope objesine bir property olarak ekledik. Bu sayede controller’ ımızın değişkeni oldu. Niye ??? Çünkü controllerımızın kendisine $scope ile erişiyoruz demiştik.

Controller’ ı View’ a Eklemek

Controller’ ımızı yazdık, çok güzel. Peki Nasıl kullanacağız, tabiki view’ a ekleyerek. Aşağıda bunu gerçekleştiriyoruz.

Burası çok önemli!

controller’ ımızı view’a ng-controller ile ekliyoruz. Yukarıda div elementine ekledim. Dikkat etmeniz gereken kısım burada başlıyor. Sayfanızda pek çok parça olacak ve hepsinin içeriği farklı olacak. Her parçanın kendi controller’ ı olabilir. Sayfanızdaki controller lar eklendikleri elementler de çalışır. Benim ilkController adındaki controllerım sadece eklendiği div elementinde etkinlik gösterecektir. Sayfamda bir div elementi daha olsa onda etki göstermez. İşte buna scope diyoruz. Yani etki alanı.

Controller ların etki alanı(scope) eklendikleri elementin sınırları içinde geçerlidir.

Yukarıda yaptıklarımızı canlı deneyebileceğiniz widget’ ı aşağıya ekledim.

Dikkat : HTML de app.js dosyası yok. Widget a dosya ekleyemediğim için javascript tabına yazdım app.js in içeriğini, kafanız karışmasın. Sizin projenizde herşey yukarıda verdiğim kodtaki gibi app.js de olacak.

AngularJS Controllers on jsbin.com

Gördüğünüz gibi view’ da başarılı bir şekilde merhaba yazıyor.

Şimdiye kadar Ne yapmış olduk

  • Ana modül tanımladık
  • Controller yazıp, ana modüle bağladık
  • Controller da değişken(model) oluşturup, değerini set ettik
  • Controller’ ı view’a ekledik
  • View’ a eklediğimiz controller ın etki alanı içerisinde, controller daki model bind ettik.

Controller’ da method (fonksiyon) tanımlama

Uygulamamızda elbet kullanıcıların etkileşime geçeceği butonlar olacaktır. Bu butonlar vasıtasıyla controller daki metodlar çalışacak ve işlemler gerçekleşecektir. Hemen bir örnek yapalım.

$scope ta set ettiğimiz mesajın harflerini büyük harfe çeviren bir metod yazıyoruz.

Şimdi $scope ta tanımladığımız buyut metodunu view’ dan tetiklenebilir hale getiriyoruz.

 

Gördüğünüz gibi bir buton ekledim ve ng-click değerine ilkController controllerında oluşturduğum buyut metodunu bağladım. Bu sayede Büyüt’ e tıkladığımda mesajın karakterleri büyük harf olacak. Aşağıda son kodu paylaştım test edebilirsiniz.

AngularJS Controllers on jsbin.com

Artık Controller hakkında temel bilgilere sahipsiniz. İlerleyen konularda, tam manasıyla kullanmaya başlayacağız. Lakin http://angulartr.com/angularjs-controller-as-syntax/ adresindeki Controller as syntax konusunada mutlaka bakmanızı öneriyorum.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir