AngularJS Modülü nedir?
Bir modül, ng-app yönergesi kullanılarak tüm HTML sayfasına uygulanan uygulama işlevselliğini tanımlar. Hizmetler, yönergeler ve filtreler gibi işlevleri, farklı uygulamalarda yeniden kullanmayı kolaylaştıracak şekilde tanımlar.
Önceki eğitimlerimizin tümünde, ana Angular uygulamanızı tanımlamak için kullanılan ng-app direktifini fark etmişsinizdir. Bu, Angular.JS'deki modüllerin temel kavramlarından biridir.
Bu eğitimde öğreneceksiniz-
- AngularJS'de bir modül nasıl oluşturulur
- Modüller ve Kontrolörler
AngularJS'de bir modül nasıl oluşturulur
Modülün ne olduğu ile başlamadan önce, modülsüz bir AngularJS uygulaması örneğine bakalım ve ardından uygulamanızda modüllerin olması gerekliliğini anlayalım.
"DemoController.js" adlı bir dosya oluşturmayı ve aşağıdaki kodu dosyaya eklemeyi düşünelim
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Yukarıdaki kodda, uygulamamız içinde bir kontrolör görevi görecek olan "DemoController" adlı bir fonksiyon oluşturduk.
Bu denetleyicide, sadece 2 değişken a ve b'yi ekliyoruz ve bu değişkenlerin eklenmesini yeni bir değişken olan c'ye atıyoruz ve onu tekrar kapsam nesnesine atıyoruz.
Şimdi ana uygulamamız olacak ana Sample.html'mizi oluşturalım. Aşağıdaki kod parçacığını HTML sayfamıza ekleyelim.
Guru99 Global Etkinliği
{{c}}Yukarıdaki kodda, DemoController'ımızı dahil ediyoruz ve ardından bir ifade aracılığıyla $cope.c değişkeninin değerini çağırıyoruz.
Ancak ng-app direktifimize dikkat edin, boş bir değeri var.
- Bu, temel olarak ng-app yönergesi bağlamında çağrılan tüm denetleyicilere küresel olarak erişilebileceği anlamına gelir. Birden çok denetleyiciyi birbirinden ayıran bir sınır yoktur.
- Günümüz programlamasında, bu, herhangi bir modüle bağlı olmayan denetleyicilere sahip olmak ve onları küresel olarak erişilebilir kılmak kötü bir uygulamadır. Denetleyiciler için tanımlanmış bazı mantıksal sınırlar olmalıdır.
İşte modüllerin devreye girdiği yer burasıdır. Modüller, bu sınır ayrımını oluşturmak ve kontrol cihazlarının işlevselliğe göre ayrılmasına yardımcı olmak için kullanılır.
Modülleri uygulamak için yukarıdaki kodu değiştirelim ve denetleyicimizi bu modüle ekleyelim
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Yukarıda yazılı koddaki temel farklılıklara dikkat edelim
var sampleApp = angular.module('sampleApp',[]);Özellikle 'sampleApp' adında bir AngularJS modülü oluşturuyoruz. Bu, bu modülün içereceği işlevsellik için mantıksal bir sınır oluşturacaktır. Dolayısıyla, yukarıdaki örneğimizde, 2 kapsam nesnesinin eklenmesi rolünü gerçekleştiren bir denetleyiciyi içeren bir modülümüz var. Dolayısıyla, bu modülün uygulama için yalnızca matematiksel hesaplamaların işlevselliğini yerine getireceğini söyleyen mantıksal sınırı olan bir modüle sahip olabiliriz.
sampleApp.controller('DemoController', function($scope)Şimdi denetleyiciyi AngularJS modülümüz olan "SampleApp" e bağlıyoruz. Bu, ana HTML kodumuzda 'sampleApp' modülüne atıfta bulunmazsak, denetleyicimizin işlevselliğine atıfta bulunamayacağımız anlamına gelir.
Ana HTML kodumuz aşağıda gösterildiği gibi görünmeyecektir
Guru99 Global Event
{{c}}Yukarıda yazılan koddaki ve önceki kodumuzdaki temel farklılıklara dikkat edelim.
Vücut etiketimizde,
- Boş bir ng-app yönergesine sahip olmak yerine, şimdi sampleApp modülünü çağırıyoruz.
- Bu uygulama modülünü çağırarak, artık 'DemoController' denetleyicisine ve demo denetleyicide bulunan işlevselliğe erişebiliriz.
Modüller ve Kontrolörler
Angular.JS'de, günümüz web uygulamalarını geliştirmek için kullanılan model, birden çok işlevsellik düzeyini mantıksal olarak ayırmak için birden çok modül ve denetleyici oluşturmaktır.
Normalde modüller, ana uygulama dosyasından farklı olan ayrı Javascript dosyalarında saklanır.
Bunun nasıl başarılabileceğine dair bir örneğe bakalım.
Aşağıdaki örnekte,
- Biri toplama işlevini gerçekleştirmek, diğeri çıkarma işlevini gerçekleştirmek için 2 modül tutacak olan Utilities.js adında bir dosya oluşturacağız.
- Daha sonra 2 ayrı uygulama dosyası oluşturacağız ve her uygulama dosyasından Utility dosyasına erişeceğiz.
- Bir uygulama dosyasında ekleme için modüle erişeceğiz ve diğerinde çıkarma için modüle erişeceğiz.
Adım 1) Birden çok modül ve denetleyici için kodu tanımlayın.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Yukarıda yazılan koddaki kilit noktaları not edelim
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Biri 'AdditionApp', ikincisi 'SubtractionApp' adı verilen 2 ayrı Açısal Modül oluşturulmuştur.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Her modül için tanımlanmış 2 ayrı denetleyici vardır, bunlardan biri DemoAddController ve diğeri DemoSubtractController'dir. Her denetleyicinin, sayıların toplanması ve çıkarılması için ayrı mantığı vardır.
Adım 2) Ana uygulama dosyalarınızı oluşturun. ApplicationAddition.html adında bir dosya oluşturalım ve aşağıdaki kodu ekleyelim
Addition Addition :{{c}}Yukarıda yazılan koddaki kilit noktaları not edelim
Ana uygulama dosyamızda Utilities.js dosyamıza referans veriyoruz. Bu, bu dosyada tanımlanan herhangi bir AngularJS modülüne başvurmamızı sağlar.
Sırasıyla ng-app yönergesini ve ng-denetleyicisini kullanarak 'AdditionApp' modülüne ve DemoAddController'a erişiyoruz.
{{c}}Yukarıda bahsedilen modüle ve denetleyiciye başvurduğumuz için, $ kapsam.c değişkenine bir ifade aracılığıyla başvurabiliriz. İfade, 'DemoAddController' Denetleyicisinde gerçekleştirilen 2 kapsam değişkeni a ve b'nin eklenmesinin sonucu olacaktır.
Çıkarma işlevi için yapacağımız gibi.
Adım 3) Ana uygulama dosyalarınızı oluşturun. "ApplicationSubtraction.html" adlı bir dosya oluşturalım ve aşağıdaki kodu ekleyelim
Addition Subtraction :{{d}}Yukarıda yazılan koddaki kilit noktaları not edelim
Ana uygulama dosyamızda Utilities.js dosyamıza referans veriyoruz. Bu, bu dosyada tanımlanan herhangi bir modüle başvurmamızı sağlar.
Sırasıyla ng-app yönergesini ve ng-denetleyicisini kullanarak 'SubtractionApp modülüne ve DemoSubtractController'a erişiyoruz.
{{d}}Yukarıda bahsedilen modüle ve denetleyiciye başvurduğumuz için, $ kapsam.d değişkenine bir ifade aracılığıyla başvurabiliriz. İfade, 'DemoSubtractController' Denetleyicisinde gerçekleştirilen 2 kapsam değişkeninin a ve b çıkarılmasının sonucu olacaktır.
Özet
- AngularJS modülleri kullanılmadan, kontrolörler kötü programlama uygulamalarına yol açan global bir kapsama sahip olmaya başlar.
- Modüller, iş mantığını ayırmak için kullanılır. Bu farklı modüller içinde mantıksal olarak ayrılmak için birden fazla modül oluşturulabilir.
- Her bir AngularJS modülünün tanımlanmış ve atanmış kendi kontrolör seti olabilir.
- Modülleri ve denetleyicileri tanımlarken, normalde ayrı JavaScript dosyalarında tanımlanırlar. Bu JavaScript dosyalarına daha sonra ana uygulama dosyasında başvurulur.