Apa itu Modul AngularJS?
Modul menentukan fungsi aplikasi yang diterapkan ke seluruh halaman HTML menggunakan arahan ng-app. Ini menentukan fungsi, seperti perkhidmatan, arahan, dan penapis, dengan cara yang memudahkan penggunaannya semula dalam aplikasi yang berbeza.
Dalam semua tutorial kami yang terdahulu, anda akan perhatikan arahan ng-app yang digunakan untuk menentukan aplikasi Angular utama anda. Ini adalah salah satu konsep utama modul di Angular.JS.
Dalam tutorial ini, anda akan belajar-
- Cara Membuat modul di AngularJS
- Modul dan Pengawal
Cara Membuat modul di AngularJS
Sebelum kita memulakan dengan apa itu modul, mari kita lihat contoh aplikasi AngularJS tanpa modul dan kemudian memahami keperluan memiliki modul dalam aplikasi anda.
Mari pertimbangkan untuk membuat fail bernama "DemoController.js" dan menambahkan kod di bawah ke fail
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Dalam kod di atas, kami telah membuat fungsi yang disebut "DemoController" yang akan bertindak sebagai pengawal dalam aplikasi kami.
Dalam pengawal ini, kita hanya melakukan penambahan 2 pemboleh ubah a dan b dan menetapkan penambahan pemboleh ubah ini ke pemboleh ubah baru, c, dan menetapkannya kembali ke objek lingkup.
Sekarang mari buat Sample.html utama kami, yang akan menjadi aplikasi utama kami. Mari masukkan coretan kod di bawah di halaman HTML kami.
Acara Global Guru99
{{c}}Dalam kod di atas, kami memasukkan DemoController kami dan kemudian memanggil nilai pemboleh ubah $ lingkup.c melalui ungkapan.
Tetapi perhatikan arahan ng-app kami, ia mempunyai nilai kosong.
- Ini pada dasarnya bermaksud bahawa semua pengawal yang dipanggil dalam konteks arahan ng-aplikasi dapat diakses secara global. Tidak ada batas yang memisahkan pelbagai pengawal antara satu sama lain.
- Sekarang dalam pengaturcaraan moden, ini adalah amalan yang buruk apabila pengawal tidak melekat pada modul mana pun dan menjadikannya dapat diakses secara global. Harus ada beberapa batas logik yang ditentukan untuk pengawal.
Dan di sinilah modul masuk. Modul digunakan untuk membuat pemisahan sempadan dan membantu memisahkan pengawal berdasarkan fungsi.
Mari ubah kod di atas untuk melaksanakan modul dan pasangkan pengawal kami 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 kita perhatikan perbezaan utama dalam kod yang ditulis di atas
var sampleApp = angular.module('sampleApp',[]);Kami secara khusus membuat modul AngularJS yang disebut 'sampleApp'. Ini akan membentuk batas logik untuk fungsi yang akan dimuatkan oleh modul ini. Jadi dalam contoh di atas, kami mempunyai modul yang mengandungi pengawal yang menjalankan peranan penambahan 2 objek skop. Oleh itu, kita dapat memiliki satu modul dengan had logik yang mengatakan bahawa modul ini hanya akan melaksanakan fungsi pengiraan matematik untuk aplikasi.
sampleApp.controller('DemoController', function($scope)Kami kini melampirkan alat kawalan ke modul AngularJS kami "SampleApp". Ini bermaksud bahawa jika kita tidak merujuk modul 'sampleApp' dalam kod HTML utama kita, kita tidak akan dapat merujuk kefungsian pengawal kita.
Kod HTML utama kami tidak akan kelihatan seperti di bawah
Guru99 Global Event
{{c}}Mari kita perhatikan perbezaan utama dalam kod yang ditulis di atas dan kod sebelumnya
Dalam tanda badan kita,
- Daripada mempunyai arahan ng-aplikasi kosong, kami sekarang memanggil modul sampleApp.
- Dengan memanggil modul aplikasi ini, kita sekarang dapat mengakses pengawal 'DemoController' dan fungsi yang terdapat dalam pengawal demo.
Modul dan Pengawal
Di Angular.JS, corak yang digunakan untuk mengembangkan aplikasi web moden adalah dengan mencipta pelbagai modul dan pengawal untuk memisahkan pelbagai tahap fungsi secara logik.
Biasanya modul akan disimpan dalam fail Javascript yang berasingan, yang akan berbeza dengan fail aplikasi utama.
Mari kita lihat contoh bagaimana ini dapat dicapai.
Dalam contoh di bawah,
- Kami akan membuat fail bernama Utilities.js yang akan memuat 2 modul, satu untuk melaksanakan fungsi penambahan dan satu lagi untuk melaksanakan fungsi penolakan.
- Kami kemudian akan membuat 2 fail aplikasi yang berasingan dan mengakses fail Utiliti dari setiap fail aplikasi.
- Dalam satu fail aplikasi, kita akan mengakses modul untuk penambahan dan yang lain, kita akan mengakses modul untuk pengurangan.
Langkah 1) Tentukan kod untuk pelbagai modul dan pengawal.
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 perkara penting dalam kod yang ditulis di atas
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Terdapat 2 Modul Sudut berasingan yang dibuat, satu yang diberi nama 'AdditionApp' dan yang kedua diberi nama 'SubtractionApp'.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Terdapat 2 pengawal berasingan yang ditentukan untuk setiap modul, satu disebut DemoAddController dan yang lain adalah DemoSubtractController. Setiap pengawal mempunyai logik yang terpisah untuk penambahan dan pengurangan nombor.
Langkah 2) Buat fail aplikasi utama anda. Mari buat fail bernama ApplicationAddition.html dan tambahkan kod di bawah
Addition Addition :{{c}}Mari perhatikan perkara penting dalam kod yang ditulis di atas
Kami merujuk fail Utilities.js kami dalam fail aplikasi utama kami. Ini membolehkan kita merujuk modul AngularJS yang ditentukan dalam fail ini.
Kami mengakses modul 'AdditionApp' dan DemoAddController dengan menggunakan arahan ng-app dan pengawal ng.
{{c}}Oleh kerana kita merujuk modul dan pengawal yang disebutkan di atas, kita dapat merujuk pemboleh ubah $ lingkup.c melalui ungkapan. Ungkapan itu akan menjadi hasil penambahan 2 pemboleh ubah skop a dan b yang dilakukan dalam Pengawal 'DemoAddController'
Cara yang sama akan kita lakukan untuk fungsi pengurangan.
Langkah 3) Buat fail aplikasi utama anda. Mari buat fail bernama "ApplicationSubtraction.html" dan tambahkan kod di bawah
Addition Subtraction :{{d}}Mari perhatikan perkara penting dalam kod yang ditulis di atas
Kami merujuk fail Utilities.js kami dalam fail aplikasi utama kami. Ini membolehkan kita merujuk modul yang ditentukan dalam fail ini.
Kami mengakses modul 'SubtractionApp dan DemoSubtractController dengan menggunakan arahan ng-app dan pengawal ng.
{{d}}Oleh kerana kita merujuk modul dan pengawal yang disebutkan di atas, kita dapat merujuk pemboleh ubah $ lingkup.d melalui ungkapan. Ungkapan tersebut adalah hasil pengurangan 2 pemboleh ubah skop a dan b yang dilakukan dalam Pengawal 'DemoSubtractController'
Ringkasan
- Tanpa penggunaan modul AngularJS, pengawal mula mempunyai skop global yang membawa kepada amalan pengaturcaraan yang buruk.
- Modul digunakan untuk memisahkan logik perniagaan. Pelbagai modul boleh dibuat untuk dipisahkan secara logik dalam modul yang berbeza ini.
- Setiap modul AngularJS dapat menetapkan set pengawalnya sendiri dan ditugaskan kepadanya.
- Semasa menentukan modul dan pengawal, biasanya ditentukan dalam fail JavaScript yang berasingan. Fail JavaScript ini kemudian dirujuk dalam fail aplikasi utama.