AngularJS Modülleri

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS'deki modüller, denetleyicileri, servisleri, yönergeleri ve filtreleri tek bir mantıksal sınırın arkasında gruplandıran kaplar görevi görür; böylece ng-app yönergesi, tek bir sayfanın çalışma zamanında gerçekten ihtiyaç duyduğu işlevselliği yükler.

  • 🔘 Tanım: `angular.module`, bir uygulamanın kullandığı her bileşeni kaydeder ve gerektiğinde geri çağırır.
  • ☑️ Oluşturma: Bağımlılık dizisi bir modül oluşturur; bu diziyi atlamak ise mevcut bir modülü getirir.
  • ✅ Bootstrapping: `ng-app`, Angular'ın o bölge için yüklediği modülün adını belirtir.
  • 🧪 ayırma: Modül kapsamlı denetleyiciler, genel adlardan ve denetleyiciler arası çakışmalardan kaçınır.
  • 📊 Sürüm notu: AngularJS desteği Ocak 2022'de sona erdi; Angular bağımsız bileşenleri tercih ediyor.
Devamını Oku

AngularJS modül grubuping ng-app sınırları altında denetleyiciler, hizmetler, yönergeler ve filtreler.

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. Servisler gibi işlevleri tanımlar, direktiflerFiltreleri, farklı uygulamalarda kolayca yeniden kullanılabilecek şekilde tasarlar.

Yukarıdaki çizim bu sınırı özetlemektedir.

Daha önceki tüm çalışmalarımızda EĞİTİMLERAngular uygulamanızın ana tanımını yapmak için kullanılan `ng-app` yönergesini fark etmişsinizdir. Bu, AngularJS'deki modüllerin temel kavramlarından biridir.

⚠️ Sürüm notu: AngularJS desteği Ocak 2022'de sona erdi.. Modern Açısal @NgModule kullanır ve varsayılan olarak bağımsız bileşenler kullanır. Aşağıdaki kod tarihseldir.

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

Modülün ne olduğuna geçmeden önce, bir modül örneğine bakalım. AngularJS uygulaması Öncelikle modül kullanmadan, uygulamanızda modüllere neden ihtiyaç duyulduğunu anlayın.

“DemoController.js” adında bir dosya oluşturalım ve aşağıdaki kodu bu dosyaya ekleyelim.

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 olmak üzere iki değişkenin toplamını gerçekleştiriyoruz ve bu toplamın sonucunu c adlı yeni bir değişkene atıyoruz, ardından bu c değişkenini tekrar a değişkenine geri atıyoruz. kapsam nesne.

Ş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)

    Şimdi denetleyiciyi "sampleApp" adlı AngularJS modülümüze bağlıyoruz. Bu, ana HTML kodumuzda 'sampleApp' modülüne referans vermezsek, denetleyicimizin işlevselliğine referans veremeyeceğimiz anlamına gelir.

Pasör mü, getter mı: açısal modül Modül yalnızca şu durumlarda oluşturulur: bağımlılık Dizi parametresi geçirilir; geçirilmezse çağrı mevcut bir modülü alır.

Ana HTML kodumuz artık aşağıdaki gibi görünecektir.

<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 angularjsgeliştirme için kullanılan desenping Günümüz web uygulamalarında amaç, işlevselliğin farklı seviyelerini mantıksal olarak ayırmak için birden fazla modül ve denetleyici oluşturmaktır.

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

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

Aşağıdaki örnekte,

  • Toplama işlemini ve çıkarma işlemini gerçekleştirecek iki modül içeren Utilities.js adında bir dosya oluşturacağız.tracyon.
  • 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şlemi için kullanılan modüle, diğerinde ise çıkarma işlemi için kullanılan modüle erişeceğiz.tracyon.

) 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',[]);

    İki ayrı AngularJS modülü oluşturuldu; biri 'AdditionApp', diğeri ise 'Sub' olarak adlandırıldı.tractionApp'.

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

    Her modül için tanımlanmış 2 ayrı denetleyici vardır; biri DemoAddController, diğeri ise DemoSub olarak adlandırılır.tractController. Her kontrol ünitesinin toplama ve çıkarma işlemleri için ayrı mantığı vardır.tracsayıların diyaloğu.

) 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>
Kaçırmayın:

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ı şekilde alt kategori için de yapacağız.traction işlevi.

) 3 Adım Ana uygulama dosyalarınızı oluşturun. "ApplicationSub" adında bir dosya oluşturalım.trac"tion.html" dosyasına aşağıdaki kodu ekleyin.

<!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 ">

    'Alt'a erişiyoruz.tractionApp' modülü ve DemoSubtracng-app yönergesini ve ng-controller yönergesini kullanarak tController'ı oluşturun.

  3. {{d}}

    Yukarıda bahsedilen modül ve denetleyiciye atıfta bulunduğumuz için, $scope.d değişkenine bir ifade aracılığıyla erişebiliyoruz. İfade, alt programın sonucu olacaktır.trac'DemoSub'da gerçekleştirilen a ve b olmak üzere 2 kapsam değişkeninin analizi.tractController' Denetleyicisi

SSS

Diziyi sağlamak bir modül oluşturur. Bunu atlamak, kayıtlı modülü alır; bu nedenle birden fazla dosya bir modülü genişletir. enjeksiyon ad.

Hayır. AngularJS yalnızca bulunan ilk ng-app'i başlatır; diğer modüllerin başlatılması için öğelerinde manuel olarak angular.bootstrap çağrısı yapılması gerekir.

config() fonksiyonu sağlayıcılar kayıt olurken çalışır, bu nedenle yalnızca sağlayıcılar ve sabitler oraya enjekte edilir. run() fonksiyonu ise enjektör hazır olduğunda bir kez çalıştırılır.

`ng-app` değeri kayıtlı hiçbir modülle eşleşmiyor. Yazım hataları, tırnak içinde kullanılan isimler veya modül dosyasının AngularJS'den sonra yüklenmesi buna neden olabilir.

Bunu angular.mock.module aracılığıyla yükleyin, ardından inject() ile denetleyicileri çözümleyin. Tarayıcı düzeyindeki kapsama alanı ise sayfayı yönlendirir, geçmişte bu şekildeydi. başınatractor.

@NgModule Angular 2 ile birlikte bu durum değişti ve artık bağımsız bileşenler varsayılan olarak kabul ediliyor ve bağımlılıklarını kendi imports dizileri aracılığıyla belirtiyorlar.

Makine öğrenimi araçları, her angular.module çağrısını okur, bir bağımlılık grafiği oluşturur ve modülleri geçiş riskine göre sıralar. RevGözlemciler her birini doğrular Direktifler haritaping.

GitHub Yardımcı Pilotu Benzer şekilde, aracı benzeri yardımcı programlar tek bir komut isteminden modül, denetleyici ve dosya iskeletleri üretir. Üretilen kodun incelenmesi gerekir.

Bu yazıyı şu şekilde özetleyin: