Apa itu Modul AngularJS?
Sebuah modul mendefinisikan fungsionalitas aplikasi yang diterapkan ke seluruh halaman HTML menggunakan direktif ng-app. Ini mendefinisikan fungsionalitas, seperti layanan, arahan, dan filter, dengan cara yang membuatnya mudah untuk digunakan kembali dalam aplikasi yang berbeda.
Di semua tutorial kami sebelumnya, Anda akan memperhatikan arahan ng-app yang digunakan untuk menentukan aplikasi Angular utama Anda. Ini adalah salah satu konsep kunci modul di Angular.JS.
Dalam tutorial ini, Anda akan belajar-
- Cara Membuat modul di AngularJS
- Modul dan Pengendali
Cara Membuat modul di AngularJS
Sebelum kita mulai dengan apa itu modul, mari kita lihat contoh aplikasi AngularJS tanpa modul dan kemudian pahami perlunya memiliki modul dalam aplikasi Anda.
Mari pertimbangkan untuk membuat file bernama "DemoController.js" dan menambahkan kode di bawah ini ke file
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Pada kode di atas, kita telah membuat sebuah fungsi bernama "DemoController" yang akan bertindak sebagai pengontrol dalam aplikasi kita.
Dalam pengontrol ini, kita hanya melakukan penambahan 2 variabel a dan b dan menugaskan penambahan variabel ini ke variabel baru, c, dan menugaskannya kembali ke objek lingkup.
Sekarang mari kita buat Sample.html utama kita, yang akan menjadi aplikasi utama kita. Mari masukkan potongan kode di bawah ini ke halaman HTML kita.
Acara Global Guru99
{{c}}Dalam kode di atas, kami menyertakan DemoController kami dan kemudian memanggil nilai variabel $ scope.c melalui ekspresi.
Tapi perhatikan arahan ng-app kami, ini memiliki nilai kosong.
- Ini pada dasarnya berarti bahwa semua pengontrol yang dipanggil dalam konteks arahan ng-app dapat diakses secara global. Tidak ada batasan yang memisahkan beberapa pengontrol satu sama lain.
- Sekarang dalam pemrograman modern, ini adalah praktik yang buruk untuk memiliki pengontrol yang tidak terpasang ke modul apa pun dan membuatnya dapat diakses secara global. Harus ada beberapa batasan logis yang ditentukan untuk pengontrol.
Dan di sinilah modul masuk. Modul digunakan untuk membuat pemisahan batas dan membantu dalam memisahkan pengontrol berdasarkan fungsionalitas.
Mari kita ubah kode di atas untuk mengimplementasikan modul dan memasang pengontrol kita ke modul ini
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Mari perhatikan perbedaan utama dalam kode yang tertulis di atas
var sampleApp = angular.module('sampleApp',[]);Kami secara khusus membuat modul AngularJS yang disebut 'sampleApp'. Ini akan membentuk batas logis untuk fungsionalitas yang akan dimuat dalam modul ini. Jadi dalam contoh kami di atas, kami memiliki modul yang berisi pengontrol yang melakukan peran penambahan 2 objek lingkup. Oleh karena itu, kita dapat memiliki satu modul dengan batasan logis yang mengatakan bahwa modul ini hanya akan menjalankan fungsionalitas kalkulasi matematis untuk aplikasi tersebut.
sampleApp.controller('DemoController', function($scope)Kami sekarang memasang pengontrol ke modul AngularJS kami "SampleApp". Ini berarti bahwa jika kita tidak mereferensikan modul 'sampleApp' dalam kode HTML utama kita, kita tidak akan dapat mereferensikan fungsionalitas pengontrol kita.
Kode HTML utama kami tidak akan terlihat seperti yang ditunjukkan di bawah ini
Guru99 Global Event
{{c}}Mari perhatikan perbedaan utama dalam kode yang ditulis di atas dan kode sebelumnya
Di tag tubuh kami,
- Alih-alih memiliki direktif ng-app kosong, kami sekarang memanggil modul sampleApp.
- Dengan memanggil modul aplikasi ini, sekarang kita dapat mengakses pengontrol 'DemoController' dan fungsionalitas yang ada di pengontrol demo.
Modul dan Pengendali
Di Angular.JS, pola yang digunakan untuk mengembangkan aplikasi web modern adalah membuat beberapa modul dan pengontrol untuk memisahkan beberapa tingkat fungsionalitas secara logis.
Biasanya modul akan disimpan dalam file Javascript terpisah, yang akan berbeda dari file aplikasi utama.
Mari kita lihat contoh bagaimana ini bisa dicapai.
Pada contoh di bawah ini,
- Kami akan membuat file bernama Utilities.js yang akan menampung 2 modul, satu untuk melakukan fungsi penjumlahan dan yang lainnya untuk melakukan fungsi pengurangan.
- Kami kemudian akan membuat 2 file aplikasi terpisah dan mengakses file Utilitas dari setiap file aplikasi.
- Di satu file aplikasi kita akan mengakses modul untuk penjumlahan dan di file lainnya, kita akan mengakses modul untuk pengurangan.
Langkah 1) Tentukan kode untuk beberapa modul dan pengontrol.
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;});Mari perhatikan poin-poin penting dalam kode yang tertulis di atas
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Ada 2 Angular Module yang dibuat, yang satu diberi nama 'AdditionApp' dan yang kedua diberi nama 'SubtractionApp'.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Ada 2 pengontrol terpisah yang ditentukan untuk setiap modul, satu disebut DemoAddController dan yang lainnya adalah DemoSubtractController. Setiap pengontrol memiliki logika terpisah untuk penjumlahan dan pengurangan angka.
Langkah 2) Buat file aplikasi utama Anda. Mari buat file bernama ApplicationAddition.html dan tambahkan kode di bawah ini
Addition Addition :{{c}}Mari perhatikan poin-poin penting dalam kode yang tertulis di atas
Kami mereferensikan file Utilities.js kami di file aplikasi utama kami. Ini memungkinkan kami untuk mereferensikan modul AngularJS apa pun yang ditentukan dalam file ini.
Kami mengakses modul 'AdditionApp' dan DemoAddController dengan menggunakan direktif ng-app dan ng-controller.
{{c}}Karena kita mereferensikan modul dan controller yang disebutkan di atas, kita dapat mereferensikan variabel $ scope.c melalui ekspresi. Ekspresi tersebut akan menjadi hasil penambahan 2 variabel scope a dan b yang dilakukan pada Controller 'DemoAddController'
Cara yang sama akan kita lakukan untuk fungsi pengurangan.
Langkah 3) Buat file aplikasi utama Anda. Mari buat file bernama "ApplicationSubtraction.html" dan tambahkan kode di bawah ini
Addition Subtraction :{{d}}Mari perhatikan poin-poin penting dalam kode yang tertulis di atas
Kami mereferensikan file Utilities.js kami di file aplikasi utama kami. Ini memungkinkan kami untuk mereferensikan modul apa pun yang ditentukan dalam file ini.
Kami mengakses modul 'SubtractionApp dan DemoSubtractController dengan menggunakan direktif ng-app dan ng-controller.
{{d}}Karena kita mereferensikan modul dan controller yang disebutkan di atas, kita dapat mereferensikan variabel $ scope.d melalui ekspresi. Ekspresi tersebut akan menjadi hasil pengurangan 2 variabel lingkup a dan b yang dilakukan di Kontroler 'DemoSubtractController'
Ringkasan
- Tanpa menggunakan modul AngularJS, pengontrol mulai memiliki cakupan global yang mengarah ke praktik pemrograman yang buruk.
- Modul digunakan untuk memisahkan logika bisnis. Beberapa modul dapat dibuat untuk dipisahkan secara logis dalam modul yang berbeda ini.
- Setiap modul AngularJS dapat memiliki set pengontrolnya sendiri yang ditentukan dan ditetapkan untuknya.
- Saat mendefinisikan modul dan pengontrol, mereka biasanya ditentukan dalam file JavaScript terpisah. File JavaScript ini kemudian direferensikan di file aplikasi utama.