AngularJS Modülleri

By: James Hartman James Hartman
Hours Güncellenmiş

AngularJS Modülü nedir?

Bir modül, ng-app direktifini kullanarak tüm HTML sayfasına uygulanan uygulama işlevselliğini tanımlar. Hizmetler, yönergeler ve filtreler gibi işlevleri, farklı uygulamalarda yeniden kullanılmasını kolaylaştıracak şekilde tanımlar.

Önceki eğitimlerimizin hepsinde, 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.

AngularJS'de modül nasıl oluşturulur

Modülün ne olduğuna başlamadan önce, modülü olmayan bir AngularJS uygulaması örneğine bakalım ve ardından uygulamanızda modüllerin bulunmasının gerekliliğini anlayalım.

adında bir dosya oluşturmayı düşünelim. “DemoController.js” ve aşağıdaki kodu dosyaya ekliyoruz

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

Yukarıdaki kodda uygulamamız içerisinde kontrolör görevi görecek “DemoController” adında bir fonksiyon oluşturduk.

Bu kontrolcüde sadece a ve b adlı 2 değişkenin toplamasını gerçekleştiriyoruz ve bu değişkenlerin toplamasını yeni bir değişken olan c'ye atayıp onu kapsam nesnesine geri atıyoruz.

Şimdi ana uygulamamız olacak ana Sample.html’mizi oluşturalım. Aşağıdaki kod parçasını HTML sayfamıza ekleyelim.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

Yukarıdaki kodda DemoController'ımızı dahil ediyoruz ve ardından $scope.c değişkeninin değerini bir ifade aracılığıyla çağırıyoruz.

Ancak ng-app direktifimize dikkat edin, boş bir değeri var.

  • Bu temel olarak ng-app direktifi kapsamında çağrılan tüm denetleyicilere küresel olarak erişilebileceği anlamına gelir. Birden fazla denetleyiciyi birbirinden ayıran bir sınır yoktur.
  • Günümüz programlamasında, denetleyicilerin herhangi bir modüle bağlı olmaması ve bunların küresel olarak erişilebilir hale getirilmesi kötü bir uygulamadır. Kontrolörler için tanımlanmış bazı mantıksal sınırların olması gerekir.

İşte modüllerin devreye girdiği yer burasıdır. Modüller, sınırların ayrılmasını sağlamak ve denetleyicilerin 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ılan koddaki temel farklılıklara dikkat edelim

  1. 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. Yukarıdaki örneğimizde, 2 kapsam nesnesinin eklenmesi rolünü yerine getiren bir denetleyici içeren bir modülümüz var. Dolayısıyla, bu modülün yalnızca uygulama için matematiksel hesaplamaların işlevselliğini gerçekleştireceğini söyleyen mantıksal sınırı olan bir modüle sahip olabiliriz.

  2. sampleApp.controller('DemoController', function($scope)

    Artık kontrolcümüzü AngularJS modülümüz “SampleApp”a bağlıyoruz. Bu, ana HTML kodumuzdaki 'sampleApp' modülüne referans vermezsek denetleyicimizin işlevselliğine referans veremeyeceğimiz anlamına gelir.

Ana HTML kodumuz aşağıda gösterildiği gibi görünmeyecek

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Yukarıda yazılan kod ile önceki kodumuz arasındaki temel farklara dikkat edelim.

<body ng-app="'sampleApp'">

Body etiketimizde,

  • Boş bir ng-app direktifi yerine artık 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.

AngularJS'deki Modüller ve Kontrolörler

In Açısal.JSGünümüzün modern web uygulamalarını geliştirmek için kullanılan model, birden fazla işlevsellik düzeyini mantıksal olarak ayırmak için birden fazla modül ve denetleyici oluşturmaktır.

Normalde modüller ayrı ayrı depolanır Javascript ana uygulama dosyasından farklı olacak dosyalar.

Bunun nasıl başarılabileceğine dair bir örneğe bakalım.

Aşağıdaki örnekte,

  • Biri toplama, diğeri çıkarma işlevini gerçekleştirmek için 2 modül tutacak 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 toplama için modüle, diğerinde ise çıkarma için modüle erişeceğiz.

) 1 Adım Çoklu modüller ve denetleyiciler 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 önemli noktalara dikkat edelim

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Oluşturulan 2 ayrı Angular Modül var, bunlardan birine 'AdditionApp', ikincisine 'SubtractionApp' adı veriliyor.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Her modül için tanımlanmış 2 ayrı kontrolör bulunmaktadır, bunlardan birine DemoAddController, diğerine ise DemoSubtractController adı verilmektedir. Her denetleyicinin sayıların toplanması ve çıkarılması için ayrı bir mantığı vardır.

) 2 Adım Ana uygulama dosyalarınızı oluşturun. ApplicationAddition.html adında bir dosya oluşturalım ve aşağıdaki kodu ekleyelim.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

Yukarıda yazılan koddaki önemli noktalara dikkat edelim

  1. <script src="/lib/Utilities.js"></script>

    Ana uygulama dosyamızdaki Utilities.js dosyamıza referans veriyoruz. Bu, bu dosyada tanımlanan herhangi bir AngularJS modülüne referans vermemizi sağlar.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    'AdditionApp' modülüne ve DemoAddController'a ng-app direktifini kullanarak erişiyoruz ve ng-kontrolör respectivamente.

  3. {{c}}

    Yukarıda bahsedilen modül ve denetleyiciye referans verdiğimiz için $scope.c değişkenine bir ifade aracılığıyla referans verebiliriz. İfade, 'DemoAddController' Denetleyicisinde gerçekleştirilen 2 kapsam değişkeni a ve b'nin eklenmesinin sonucu olacaktır.

    Aynı yöntemi çıkarma fonksiyonu için de yapacağız.

) 3 Adım Ana uygulama dosyalarınızı oluşturun. “ApplicationSubtraction.html” adında bir dosya oluşturalım ve aşağıdaki kodu ekleyelim.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Yukarıda yazılan koddaki önemli noktalara dikkat edelim

  1. <script src="/lib/Utilities.js"></script>

    Ana uygulama dosyamızdaki Utilities.js dosyamıza referans veriyoruz. Bu, bu dosyada tanımlanan herhangi bir modüle referans vermemizi sağlar.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    'SubtractionApp modülüne ve DemoSubtractController'a sırasıyla ng-app direktifini ve ng-controller'ı kullanarak erişiyoruz.

  3. {{d}}

    Yukarıda bahsedilen modül ve denetleyiciye referans verdiğimiz için $scope.d değişkenine bir ifade aracılığıyla referans verebiliriz. İfade, gerçekleştirilen 2 kapsam değişkeni a ve b'nin çıkarılmasının sonucu olacaktır. 'DemoSubtractController' kontrolör

ÖZET

  • AngularJS modülleri kullanılmadan denetleyiciler küresel bir kapsama sahip olmaya başlar ve bu da kötü programlama uygulamalarına yol açar.
  • Modüller iş mantığını ayırmak için kullanılır. Bu farklı modüller içerisinde mantıksal olarak ayrılacak şekilde birden fazla modül oluşturulabilir.
  • Her AngularJS modülü, kendisine tanımlanmış ve atanmış kendi denetleyici setine sahip olabilir.
  • Modülleri ve denetleyicileri tanımlarken normalde ayrı ayrı tanımlanırlar. JavaSenaryo Dosyalar. Bunlar JavaDaha sonra komut dosyalarına ana uygulama dosyasında başvurulur.