Ng-Controller Örneği ile AngularJS Kontrolörleri
James Hartman
AngularJS'de Denetleyici Nedir?
A kontrolör AngularJS'de 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şlemleri gerçekleştirecek ve ardından çıktıyı son kullanıcıya görüntülenecek görünüme aktaracaktır.
Angular Perspektifinden Kontrolör Ne Yapar?
Aşağıda AngularJS Controller'ın çalışma şeklinin basit bir tanımı yer almaktadır:
- Denetleyicinin birincil sorumluluğu görünüme iletilen verileri kontrol etmektir. Kapsam ve görünüm iki yönlü iletişime sahiptir.
- Görünümün özellikleri kapsamdaki "işlevleri" çağırabilir. Ayrıca görünümdeki olaylar kapsamdaki “yöntemleri” çağırabilir. Aşağıdaki kod parçacığı bir fonksiyonun basit bir örneğini vermektedir.
- The fonksiyon($kapsam) bu, denetleyiciyi ve $scope.firstName ve $scope.lastName öğelerinin birleşimini döndürmek için kullanılan dahili işlevi tanımlarken tanımlanır.
- In angularjsBir işlevi değişken olarak tanımladığınızda buna Yöntem denir.
- Bu şekilde veriler denetleyiciden kapsama aktarılır ve ardından veriler kapsamdan görünüme aktarılır.
- Kapsam, modeli görünüme göstermek için kullanılır. Model, görünümdeki olaylar yoluyla tetiklenebilecek 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 manipüle etmek için kullanılmamalıdır. Bu, daha sonra göreceğimiz yönergeler tarafından 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ı verilen bir denetleyici oluşturun.
AngularJS'de Temel Denetleyici Nasıl Oluşturulur
AngularJS'de denetleyici oluşturma adımları aşağıda verilmiştir:
Adım 1) Temel bir HTML Sayfası oluşturun
Bir denetleyicinin oluşturulmasına başlamadan önce, temel HTML sayfa kurulumumuzu yerine getirmemiz gerekir.
Aşağıdaki kod parçacığı, “Etkinlik Kaydı” başlığını taşıyan ve önemli kütüphanelere referanslar içeren basit bir HTML sayfasıdır. Bootstrap, jquery ve Angular.
- Bootstrap kütüphaneleriyle birlikte kullanılacak olan bootstrap CSS stil sayfalarına referanslar ekliyoruz.
- Angularjs kütüphanelerine referanslar ekliyoruz. Artık angular.js ile bundan sonra 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 manipülasyonu 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ğımlı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.
Adım 2) Dosyaları ve dosya yapısını kontrol edin
İkinci olarak dersimiz boyunca başlayacağımız dosyalarımıza ve dosya yapımıza bakalım.
- Öncelikle herhangi bir geleneksel web uygulamasında yapıldığı 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 dosyalarımızı içeren “lib” klasörümüze sahip olacağız. JavaSenaryo dosyaları.
- Bootstrap.css dosyası CSS klasörüne yerleştirilir ve web sitemize iyi bir görünüm ve his katmak için kullanılır.
- angular.js, angularJS sitesinden indirilen ve lib klasörümüzde saklanan ana dosyamızdır.
- App.js dosyası denetleyicilere yönelik kodumuzu içerecektir.
- Bootstrap.js dosyası, web uygulamamıza bootstrap işlevselliği eklemek amacıyla bootstrap.cs dosyasını desteklemek için kullanılır.
- Jquery dosyası sitemize DOM manipülasyon işlevselliği eklemek için kullanılacaktır.
Adım 3) Çıktıyı görüntülemek için AngularJS kodunu kullanın
Burada yapmak istediğimiz şey, sayfa tarayıcıda görüntülendiğinde hem metin biçiminde hem de bir metin kutusunda "AngularJS" sözcüklerini görüntülemektir. Bunu yapmak için angular.js'nin nasıl kullanılacağına dair bir örneğe bakalım:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.tutorialName = "Angular JS";
});
</script>
</body>
</html>
Kod Açıklaması:
- The ng-uygulaması anahtar sözcüğü bu uygulamanın açısal bir uygulama olarak değerlendirilmesi gerektiğini belirtmek için kullanılmaktadır. Önekle başlayan herhangi bir şey 'ng' olarak bilinir Direktifler. “DemoApp” Angular.JS uygulamamıza verilen isimdir.
- Bir div etiketi oluşturduk ve bu etiketin içine Denetleyicimizin “DemoController” ismiyle birlikte bir ng-controller direktifi ekledik. Bu temel olarak div etiketimizin Demo Denetleyicinin içeriğine erişmesini sağlar. Denetleyici içinde tanımlanan işlevselliğe erişebildiğinizden emin olmak için yönergenin altında denetleyicinin adını belirtmeniz gerekir.
- ng-model yönergesini kullanarak bir model bağlaması oluşturuyoruz. Bunun yaptığı şey, Tutorial Name için metin kutusunun üye değişkeni “tutorialName”e bağlanmasıdır.
- Kullanıcının Tutorial Name metin kutusuna yazdığı bilgileri görüntülemek için kullanılacak olan “tutorialName” adında bir üye değişkeni oluşturuyoruz.
- DemoApp uygulamamıza eklenecek bir modül oluşturuyoruz. Böylece bu modül artık uygulamamızın bir parçası haline geliyor.
- Modülde, öğreticiName değişkenimize varsayılan “AngularJS” değerini atayan bir fonksiyon 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.
AngularJS Denetleyicilerinde Yöntemler Nasıl Tanımlanır
Normalde iş mantığını ayırmak için denetleyicide birden fazla yöntem tanımlamak gerekir.
Örneğin, denetleyicinizin 2 temel şeyi yapmasını istediğinizi varsayalım:
- 2 sayının toplama işlemini gerçekleştirin
- 2 sayının çıkarılmasını gerçekleştirin
Daha sonra ideal olarak denetleyicinizin içinde biri toplama, diğeri çıkarma işlemini gerçekleştirecek 2 yöntem oluşturursunuz.
Angular.JS denetleyicisinde özel yöntemleri nasıl tanımlayabileceğinize dair basit bir örnek görelim. Denetleyici yalnızca bir dize döndürecektir.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name :<input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
$scope.tutorialName = "Angular JS";
$scope.tName = function() {
return $scope.tName;
};
});
</script>
</body>
</html>
Kod Açıklaması:
- Burada sadece “AngularJS” dizesini döndüren bir fonksiyon tanımlıyoruz. İşlev, kapsam nesnesine, öğreticiAdı adı verilen bir üye değişken aracılığıyla 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ı:
Ng-Controller Örneği ile AngularJS Kontrol Cihazı
Tüm işlevlerin tek bir dosyaya yerleştirildiği bir “HelloWorld” örneğine bakalım. Artık denetleyicinin kodunu ayrı dosyalara yerleştirmenin zamanı geldi.
Bunun için aşağıdaki adımları takip edelim:
) 1 Adım app.js dosyasına, denetleyiciniz için aşağıdaki kodu ekleyin
angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
$scope.message = "Hello World"
});
Yukarıdaki kod aşağıdaki işlemleri yapar:
- Denetleyiciyi denetleyici işlevselliğiyle birlikte tutacak "app" adlı bir modül tanımlayın.
- “HelloWorldCtrl” adında bir denetleyici oluşturun. Bu denetleyici, "Merhaba Dünya" mesajını görüntüleme işlevine sahip olmak için kullanılacaktır.
- Kapsam nesnesi, denetleyiciden görünüme bilgi aktarmak için kullanılır. Yani bizim durumumuzda kapsam nesnesi "mesaj" adı verilen bir değişkeni tutmak için kullanılacaktır.
- Değişken mesajını tanımlayıp ona “Merhaba Dünya” değerini atadık.
) 2 Adım Şimdi Sample.html dosyanıza ng-controller direktifini içerecek bir div sınıfı ekleyin ve ardından “message” üye değişkenine bir referans ekleyin.
Ayrıca denetleyicinizin kaynak kodunu içeren app.js komut dosyasına bir referans eklemeyi de unutmayın.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Yukarıdaki kod doğru girildiğinde tarayıcıda kodunuzu çalıştırdığınızda aşağıdaki çıktı gösterilecektir.
Çıktı:
ÖZET
- Denetleyicinin birincil sorumluluğu, görünüme aktarılan bir kapsam nesnesi oluşturmaktır.
- Ng-app, ng-controller ve ng-model direktiflerini kullanarak basit bir denetleyici nasıl oluşturulur?
- Bir angularjs modülü içindeki çeşitli işlevleri ayırmak için kullanılabilecek bir denetleyiciye özel yöntemler nasıl eklenir?
- Bu katmanı Görünüm katmanından ayırmak için harici dosyalarda denetleyiciler tanımlanabilir. Bu normalde web uygulamaları oluştururken en iyi uygulamadır.
