Ng-Controller Örneği ile AngularJS Kontrolörleri
James Hartman
⚡ Akıllı Özet
AngularJS'de bir Controller, bir ekranın iş mantığını barındırır. Kapsam nesnesi aracılığıyla veri alır, işler ve sonucu görünüme geri sunar.ping Uygulama mantığından arındırılmış sunum işaretlemesi.
AngularJS'de Denetleyici Nedir?
A kontrolör AngularJS'de, `Controller`, verileri `View`'dan alır, işler ve ardından bu verileri son kullanıcıya gösterilen `View`'a gönderir. `Controller`, temel iş mantığınızı barındırır. Veri modelini kullanır, gerekli işlemleri gerçekleştirir ve ardından çıktıyı `View`'a iletir.
⚠️ Sürüm notu: AngularJS (1.x dalı) 31 Aralık 2021 tarihinde kullanım ömrünün sonuna ulaştı ve artık güvenlik yamaları almıyor. Aşağıdaki kavramlar eski uygulamalar için hala geçerlidir; modern Angular'da aynı rolü bir denetleyici yerine bir bileşen sınıfı üstlenir.
Denetleyicinin ne olduğunu bilmek, akıllarda tek bir soruyu bırakıyor: Gerçekte görünümle nasıl iletişim kuruyor? Bir sonraki bölümde bu soruya cevap veriliyor.
Angular perspektifinden Controller'ın işlevi nedir?
Aşağıda bir AngularJS Controller'ın çalışma prensibinin basit bir tanımı verilmiştir:
- 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 özellikleri ve olayları, kapsamdaki işlevleri çağırabilir. Aşağıdaki kod parçası bunu göstermektedir. fonksiyon($kapsam) Denetleyici ile birlikte tanımlanan ve dahili bir fonksiyon döndüren bir işlev.
$scope.firstNamehem de$scope.lastNamekatıldı. İçinde angularjsBir değişken olarak tanımlanan bir fonksiyon, bir Metottur.
- Veriler denetleyiciden kapsama alanına, ardından da kapsama alanı ve görünüm arasında gidip gelir.
- Bu kapsam, modeli görünüme sunar. Model, görünümden gelen olaylar tarafından tetiklenen ve kapsam üzerinde tanımlanan yöntemler aracılığıyla değiştirilebilir.
- Denetleyiciler DOM'u manipüle etmek için kullanılmamalıdır. Bu, diğer denetleyicilerin görevidir. direktifler.
- En iyi uygulama, denetleyicileri işlevselliğe dayandırmaktır. Bir denetleyiciye ihtiyaç duyan bir giriş formunuz varsa, "form denetleyicisi" adında bir denetleyici oluşturun.
Mekanizma anlaşıldıktan sonra, bir sonraki bölümde boş bir sayfadan bir denetleyici oluşturulacaktır.
AngularJS'de Temel Denetleyici Nasıl Oluşturulur
Aşağıda AngularJS'de bir denetleyici (controller) oluşturma adımları verilmiştir.
Adım 1) Temel bir HTML Sayfası oluşturun
Bir denetleyici oluşturmadan önce, temel HTML sayfasının hazır olması gerekir. Aşağıdaki kod parçası, "Etkinlik Kaydı" başlıklı basit bir sayfadır ve şu referansı içerir: Bootstrap ve AngularJS.
- Referanslar Bootstrap CSS stil sayfası, birlikte kullanılır. Bootstrap kütüphane.
- AngularJS kütüphanesine bir referans. Bundan sonra AngularJS ile yapılan her şey bu dosyadan çözümlenir.
- Bir referans Bootstrap Bu kütüphane, bazı kontrollerin duyarlı olmasını sağlar.
⚠️ Düzeltme: Orijinal kurulumda jQuery yüklendi ve AngularJS'nin ona bağımlı olduğu belirtildi. Ancak bu doğru değil. AngularJS, jQuery API'sinin yerleşik bir alt kümesi olan jqLite ile birlikte gelir ve yalnızca jQuery yüklendiğinde tam jQuery'ye yükseltilir. önce Bu referans kaldırıldı.
Adım 2) Dosyaları ve dosya yapısını kontrol edin
- Dosyalar, geleneksel bir web uygulamasında olduğu gibi iki klasöre ayrılmıştır: stil sayfaları için "css" ve diğer dosyalar için "lib". JavaSenaryo dosyaları.
- bootstrap.css dosyası css klasöründe yer alır ve siteye görünümünü ve işlevselliğini kazandırır.
- angular.js, AngularJS sitesinden indirilen ve lib klasöründe saklanan ana kütüphanedir.
- app.js dosyası, denetleyiciler için gerekli kodları içerecektir.
Adım 3) Çıktıyı görüntülemek için AngularJS kodunu kullanın
Buradaki amaç, sayfa tarayıcıda açıldığında "AngularJS" kelimelerini hem düz metin olarak hem de bir metin kutusu içinde görüntülemektir.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName}} </div> <script src="lib/angular.js"></script> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "AngularJS"; }]); </script> </body> </html>
Code Açıklama:
- ng-uygulaması Bu öğeyi bir AngularJS uygulamasının kökü olarak işaretler. Önekli öznitelikler ng- Bunlar yerleşik yönergelerdir. "DemoApp" uygulamaya verilen isimdir.
- Divan taşıyor ng-kontrolör "DemoController" adıyla, bu öğeye ve içindeki her şeye denetleyici kapsamına erişim izni verilir.
- ng modeli Bu kod, "Öğretici Adı" metin kutusunu kapsam özelliğine bağlayarak model bağlamasını oluşturur.
tutorialName. - modül
DemoAppoluşturulur ve denetleyici, varsayılan değer olarak "AngularJS"i atar.tutorialName.
⚠️ Düzeltmeler uygulandı. Orijinal ilanda şu ifade yer alıyordu: chrset="UTF 8"Bu, ne geçerli bir öznitelik ne de geçerli bir kodlama adıdır ve AngularJS iki kez yüklendi — bir kez CDN'den, bir kez de başka bir kaynaktan. lib/angular.jsKütüphanenin iki kez yüklenmesi modül sistemini yeniden kaydeder ve öngörülemeyen davranışlara yol açar. Bağımlılık dizisi ek açıklaması ['$scope', function($scope){…}] Ayrıca bu özellik de eklendi; bu özellik olmadan dosya küçültüldüğü anda denetleyici bozuluyor.
Çıktı:
Çünkü tutorialName “AngularJS” değeri atandığında, bu değer metin kutusunda ve düz metin satırında görünür. Tek bir özellik gösterim için yeterlidir; gerçek denetleyiciler genellikle davranışları da ortaya koyar, bu da bir sonraki bölümde ele alınmaktadır.
AngularJS Denetleyicilerinde Yöntemler Nasıl Tanımlanır
Normalde, iş mantığını ayırmak için bir denetleyicide birden fazla yöntem tanımlanır. Eğer denetleyici iki sayıyı toplamak ve çıkarmak zorunda kalsaydı.tracİki sayı için, her işlem için ayrı bir yöntem oluşturmanız gerekir.
Aşağıdaki örnek, bir AngularJS denetleyicisi içinde dize döndüren özel bir yöntem tanımlar.
<!-- The head and library references are unchanged from Step 3 --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tName()}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "AngularJS"; // A method on the scope, callable from the view as tName() $scope.tName = function() { return $scope.tutorialName; }; }]); </script>
Code Açıklama:
- Bir fonksiyon, kapsam nesnesine üye olarak eklenir.
tNameBu, mevcut değeri döndürür.tutorialName. - Görünüm, yöntemi şu şekilde çağırır:
{{tName()}}Parantezler önemlidir: parantezler olmadan ifade, sonucu değil, fonksiyonun kendisini yazdırır.
⚠️ Düzeltme: orijinal okuma yöntemi $scope.tName = function() { return $scope.tName; };Bu fonksiyon, eğitim materyalinin adını değil, kendisini döndürüyordu; bu nedenle sayfa metin yerine fonksiyon gövdesini görüntülüyordu. Şimdi ise şunu döndürüyor: $scope.tutorialName.
Çıktı:
Şimdiye kadar her şey tek bir dosyada yer alıyordu. Üretim uygulamalarında denetleyiciler ayrı tutulur; bir sonraki bölümde de bu gösterilecektir.
Ng-Controller Örneği ile AngularJS Kontrol Cihazı
Yukarıdaki "HelloWorld" örneği, tüm işlevselliği tek bir dosyaya yerleştirmişti. Şimdi kontrolcü kodunu ayrı bir dosyaya taşımanın zamanı geldi.
) 1 Adım app.js dosyasına, denetleyiciniz için aşağıdaki kodu ekleyin.
angular.module('app', []) .controller('HelloWorldCtrl', ['$scope', function($scope) { $scope.message = "Hello World"; }]);
Yukarıdaki kod aşağıdakileri yapar:
- Denetleyiciyi barındıran "app" adlı bir modül tanımlar.
- “HelloWorldCtrl” adında bir denetleyici oluşturur ve bu denetleyici “Merhaba Dünya” mesajını görüntüler.
- Bu yöntem, denetleyiciden görünüme bilgi aktarmak için kapsam nesnesini kullanır; bu durumda, adı verilen bir değişken aktarılır.
message.
) 2 Adım Sample.html dosyasına, ng-controller yönergesini ve üye değişkenine referansı içeren bir div ekleyin. message. Denetleyici kaynak kodunu içeren app.js dosyasına referans vermeyi unutmayın.
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="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="lib/angular.js"></script> <script src="app.js"></script> </body> </html>
⚠️ Düzeltme: app.js yüklenmelidir. sonra angular.js, çünkü çağırıyor angular.moduleOrijinal dosya da kütüphaneyi iki kez yükledi ve aynı içeriği taşıdı. chrset yazım hatası.
Çıktı:
Şimdiye kadarki tüm örneklerde okuma ve yazma özellikleri doğrudan kullanılmıştır. $scopeAşağıdaki bölümde AngularJS ekibinin bunun yerine önerdiği alternatif ele alınmaktadır.
AngularJS'de controllerAs Söz Dizimi Nasıl Kullanılır?
Doğrudan bağlama $scope Çalışır, ancak denetleyiciler iç içe geçtiği anda belirsizleşir. Örneğin, bir görünüm ifadesi gibi. {{name}} Hangi kontrol cihazının sahibi olduğuna dair hiçbir ipucu vermiyor. nameVe alt kapsamlar üst kapsamlardan prototipik olarak miras aldığı için, miras alınan bir ilkel veri türüne yazan iç içe bir denetleyici, sessizce kendi gölge kopyasını oluşturur. controllerAs Sözdizimi, her denetleyiciye bir takma ad vererek her iki sorunu da ortadan kaldırır.
) 1 Adım Görünümdeki denetleyiciye aşağıdaki yöntemi kullanarak takma ad verin: as Anahtar kelimeyi seçin, ardından her bağlamanın başına bu takma adı ekleyin.
) 2 Adım Denetleyici içinde, özellikleri ekleyin. this yerine $scope.
<div ng-controller="DemoController as demo"> Tutorial Name : <input type="text" ng-model="demo.tutorialName"> This tutorial is {{demo.tutorialName}} </div> <script> app.controller('DemoController', function() { // 'vm' is captured so nested functions keep the right reference var vm = this; vm.tutorialName = "AngularJS"; vm.tName = function() { return vm.tutorialName; }; }); </script>
Üç kazanım elde edilir. Bağlamalar kendi kendini belgeleyen hale gelir, çünkü demo.tutorialName Sahibini adlandırır. Üst öğe takma adla belirtildiğinden, iç içe denetleyiciler artık çakışmaz. outer ve takma adla anılan bir çocuk inner her ikisi de açığa çıkarabilir nameDeğerler ayrıca, salt bir ilkel tür yerine bir nesne aracılığıyla bağlanır, böylece bir adım atılır.ping Çocuk süreçte yapılan bir düzenlemenin asla üst sürece yansımadığı tuzak.
👍 Bahşiş: Ele geçirmek this bir değişkene dönüştürmek gibi vm Denetleyicinin en üstünde. Bir geri çağırma işlevi içinde, this Bu, tamamen başka bir şeye işaret eder ve yakalanan referans, bağlamın doğru kalmasını sağlar.
Bağlama stilini seçmek bir karardır. Bir denetleyiciye neyin dahil olması gerektiğine karar vermek ise başka bir karardır ve aşağıdaki karşılaştırma bu çizgiyi çizmektedir.
AngularJS'de Controller ve Service Arasındaki Fark
Yeni başlayanlar sıklıkla denetleyiciyi (controller) bir servise ait olması gereken işlerle aşırı yüklerler. Aradaki fark ömür ve yeniden kullanılabilirliktir: bir denetleyici yalnızca görünümü ekranda olduğu sürece var olurken, bir servis uygulamanın ömrü boyunca yaşayan tekil bir nesnedir (singleton).
| Görünüş | kontrolör | Hizmet |
|---|---|---|
| Ömür | Görüş açısıyla yaratıldı ve yok edildi. | Tüm uygulama için tek bir örnek. |
| Amaç | Tek bir görünüm için verileri hazırlayın. | Paylaşılan mantık, durum ve sunucu çağrıları |
| Yeniden kullanılabilir | Hayır, görüşüne bağlı. | Evet, her yere enjekte edilebilir. |
| Görüşler arasında durumu korur. | Hayır, devlet navigasyonda kayboldu. | Evet, durum devam ediyor. |
| Tipik içerik | Kapsam özellikleri ve görünüm yöntemleri | HTTP çağrıları, önbellekleme, iş kuralları |
Denetleyicileri sade tutun. İki denetleyicinin aynı mantığa ihtiyacı varsa veya bir değerin görünümler arasında gezinme sırasında korunması gerekiyorsa, onu bir servise taşıyın ve bu servisi gerektiği yere enjekte edin. Pratik bir test, kodun mevcut ekran kapalıyken hala anlamlı olup olmadığını sormaktır. Cevap evet ise, kod bir servise aittir.
