AngularJs'de Controller nedir?
AngularJs'deki bir Denetleyiciler, verileri Görünümden alır, verileri işler ve ardından bu verileri son kullanıcıya görüntülenen görünüme gönderir. Denetleyici, temel iş mantığınıza sahip olacaktır.
Kontrolör veri modelini kullanacak, gerekli işlemi gerçekleştirecek ve ardından çıktıyı görünüme geçirecek ve bu da son kullanıcıya gösterilecektir.
Bu eğitimde öğreneceksiniz-
- Angular perspektifinden Controller ne yapar?
- Temel bir Denetleyici nasıl oluşturulur
- Denetleyicide Yöntemler nasıl tanımlanır
- Harici Dosyalarda ng-controller kullanma
- Denetleyicinin birincil sorumluluğu, görünüme aktarılan verileri kontrol etmektir. Kapsam ve görünümün iki yönlü iletişim vardır.
- Görünümün özellikleri kapsamda "fonksiyonlar" çağırabilir. Ayrıca, görünümdeki olaylar kapsamda "yöntemleri" çağırabilir. Aşağıdaki kod parçacığı, bir işlevin basit bir örneğini verir.
- Denetleyiciyi tanımlarken tanımlanan işlev ($ kapsam) ve $ kapsam.firstName ve $ kapsam.lastName birleştirmesini döndürmek için kullanılan dahili bir işlev.
- AngularJS'de bir işlevi değişken olarak tanımladığınızda, bu bir Yöntem olarak bilinir.
- Bu şekilde veriler denetleyiciden kapsama geçer ve ardından veriler kapsamdan görünüme geri ve ileri gider.
- Kapsam, modeli görünüme maruz bırakmak için kullanılır. Model, görünümdeki olaylar aracılığıyla tetiklenebilen kapsamda tanımlanan yöntemler aracılığıyla değiştirilebilir. Kapsamdan modele iki yönlü model bağlama tanımlayabiliriz.
- Denetleyiciler ideal olarak DOM'u işlemek için kullanılmamalıdır. Bu, daha sonra göreceğimiz direktiflerle yapılmalıdır.
- En iyi uygulama, denetleyicinin işlevselliğe dayalı olmasıdır. Örneğin, giriş için bir formunuz varsa ve bunun için bir denetleyiciye ihtiyacınız varsa, "form denetleyicisi" adında bir denetleyici oluşturun.
- Önyükleme kitaplıkları ile birlikte kullanılacak olan önyükleme CSS stil sayfalarına referanslar ekliyoruz.
- Angularjs kitaplıklarına referanslar ekliyoruz. Öyleyse şimdi angular.js ile ne yaparsak yapalım bu kütüphaneden referans alınacaktır.
- Web sayfamızı belirli kontrollere daha duyarlı hale getirmek için önyükleme kitaplığına referanslar ekliyoruz.
- DOM işleme için kullanılacak jquery kitaplıklarına referanslar ekledik. Bu, Angular için gereklidir çünkü Angular'daki bazı işlevler bu kitaplığa bağlıdır.
- Öncelikle, herhangi bir geleneksel web uygulamasında olduğu gibi dosyalarımızı 2 klasöre ayırıyoruz. "CSS" klasörümüz var. Tüm basamaklı stil sayfası dosyalarımızı içerecek ve ardından tüm JavaScript dosyalarımızı içeren "lib" klasörümüze sahip olacağız.
- Bootstrap.css dosyası CSS klasörüne yerleştirilir ve web sitemize iyi bir görünüm ve his eklemek için kullanılır.
- Angular.js, angularJS sitesinden indirilen ve lib klasörümüzde tutulan ana dosyamızdır.
- App.js dosyası, denetleyiciler için kodumuzu içerecektir.
- Bootstrap.js dosyası, web uygulamamıza önyükleme işlevselliği eklemek için bootstrap.cs dosyasını desteklemek için kullanılır.
- Jquery dosyası, sitemize DOM işleme işlevselliği eklemek için kullanılacaktır.
Angular'ın bakış açısından Controller ne yapar?
Aşağıda, Angular JS Controller'ın çalışmasının basit bir tanımı bulunmaktadır.
Temel bir Denetleyici nasıl oluşturulur
Bir denetleyici oluşturmaya başlamadan önce, ilk olarak temel HTML sayfası kurulumumuzu yerine getirmemiz gerekir.
Aşağıdaki kod parçacığı, "Etkinlik Kaydı" başlığı olan ve Bootstrap, jquery ve Angular gibi önemli kitaplıklara referanslar içeren basit bir HTML sayfasıdır.
Varsayılan olarak yukarıdaki kod parçacığı tüm örneklerimizde mevcut olacaktır, böylece sonraki bölümlerde yalnızca belirli angularJS kodunu gösterebiliriz.
İkinci olarak, kurs süresince başlayacağımız dosyalarımıza ve dosya yapımıza bakalım.
Angular.js'nin nasıl kullanılacağına dair bir örnek görelim,
Burada yapmak istediğimiz, sayfa tarayıcıda görüntülendiğinde "AngularJS" kelimelerini hem metin biçiminde hem de bir metin kutusunda görüntülemektir.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kod Açıklaması:
- Ng uygulama anahtar bu uygulama açısal bir uygulama olarak ele alınması gerektiğini belirtmek için kullanılır. 'Ng' ön ekiyle başlayan her şey yönerge olarak bilinir. "DemoApp", Angular.JS uygulamamıza verilen addır.
- Bir div etiketi oluşturduk ve bu etikete Controller "DemoController" adıyla birlikte bir ng-controller yönergesi ekledik. Bu, temel olarak div etiketimizin Demo Denetleyicinin içeriğine erişmesini sağlar. Denetleyicide tanımlanan işlevselliğe erişebilmenizi sağlamak için, yönerge altında denetleyicinin adını belirtmeniz gerekir.
- Ng-model direktifini kullanarak bir model bağlama oluşturuyoruz. Bunun yaptığı şey, "tutorialName" üye değişkenine bağlanacak Eğitim Adı için metin kutusunu bağlamaktır.
- Kullanıcının Eğitim Adı için metin kutusuna yazdığı bilgileri görüntülemek için kullanılacak "öğreticiAdı" adlı bir üye değişkeni oluşturuyoruz.
- DemoApp uygulamamıza eklenecek bir modül oluşturuyoruz. Yani bu modül artık uygulamamızın bir parçası haline geliyor.
- Modülde, tutorialName değişkenimize varsayılan bir "AngularJS" değeri atayan bir işlev tanımlıyoruz.
Komut başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
TutorialName değişkenine "Angular JS" değerini atadığımız için, bu metin kutusunda ve düz metin satırında görüntülenir.
Denetleyicide Yöntemler nasıl tanımlanır
Normalde, iş mantığını ayırmak için denetleyicide birden çok yöntem tanımlamak istenir.
Örneğin, denetleyicinizin 2 temel şey yapmasını istiyorsanız,
- 2 numara eklemeyi gerçekleştirin
- 2 sayının çıkarılmasını gerçekleştirin
Daha sonra, denetleyicinizin içinde ideal olarak 2 yöntem oluşturursunuz, biri toplama işlemini, diğeri çıkarma işlemini gerçekleştirir.
Angular.JS denetleyicisi içinde özel yöntemleri nasıl tanımlayabileceğinize dair basit bir örnek görelim. Denetleyici basitçe bir dizge döndürecektir.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kod Açıklaması:
- Burada, sadece "AngularJS" dizesini döndüren bir fonksiyon tanımlıyoruz. İşlev, tutorialName adlı üye değişkeni aracılığıyla kapsam nesnesine eklenir.
- Komut başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Harici Dosyalarda ng-controller kullanma
Tüm işlevselliğin tek bir dosyaya yerleştirildiği bir "HelloWorld" örneğine bakalım. Şimdi denetleyicinin kodunu ayrı dosyalara yerleştirme zamanı.
Bunu yapmak için aşağıdaki adımları takip edelim.
Adım 1) app.js dosyasında, denetleyiciniz için aşağıdaki kodu ekleyin
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Yukarıdaki kod şu şeyleri yapar,
- Denetleyiciyi denetleyici işlevselliği ile birlikte tutacak "uygulama" adlı bir modül tanımlayın.
- "HelloWorldCtrl" adıyla bir kontrolör oluşturun. Bu denetleyici, bir "Merhaba Dünya" mesajı görüntüleme işlevine sahip olmak için kullanılacaktır.
- Kapsam nesnesi, denetleyiciden görünüme bilgi iletmek için kullanılır. Yani bizim durumumuzda, kapsam nesnesi "mesaj" adlı bir değişkeni tutmak için kullanılacaktır.
- Değişken mesajını tanımlıyor ve ona "Merhaba Dünya" değerini atıyoruz.
Adım 2) Şimdi, Sample.html dosyanıza ng-controller direktifini içerecek bir div sınıfı ekleyin ve ardından üye değişkeni "message" a bir referans ekleyin.
Ayrıca, denetleyicinizin kaynak kodunu içeren app.js komut dosyasına bir referans eklemeyi unutmayın.
Event Registration Guru99 Global Event
{{message}}
Yukarıdaki kod doğru girilirse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Özet
- Denetleyicinin birincil sorumluluğu, sırayla görünüme iletilen bir kapsam nesnesi oluşturmaktır.
- Ng-app, ng-controller ve ng-model direktiflerini kullanarak basit bir kontrolör nasıl oluşturulur?
- Bir angularjs modülündeki çeşitli işlevleri ayırmak için kullanılabilen bir denetleyiciye özel yöntemler nasıl eklenir.
- Bu katmanı Görünüm katmanından ayırmak için denetleyiciler harici dosyalarda tanımlanabilir. Bu normalde web uygulamaları oluştururken en iyi uygulamadır.