Modul AngularJS

Oleh: James Hartman James Hartman
Hours Updated

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, sedemikian rupa sehingga memudahkan untuk menggunakannya kembali dalam aplikasi yang berbeda.

Dalam semua tutorial kami sebelumnya, Anda akan memperhatikan arahan ng-app yang digunakan untuk mendefinisikan aplikasi Angular utama Anda. Ini adalah salah satu konsep utama modul di Angular.JS.

Cara Membuat modul di AngularJS

Sebelum kita memulai dengan apa itu modul, mari kita lihat contoh aplikasi AngularJS tanpa modul dan kemudian pahami perlunya memiliki modul dalam aplikasi Anda.

Mari kita 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 fungsi bernama “DemoController” yang akan bertindak sebagai pengontrol dalam aplikasi kita.

Pada pengontrol ini, kita hanya melakukan penambahan 2 variabel a dan b dan menugaskan penambahan variabel tersebut ke variabel baru, c, dan menugaskannya kembali ke objek cakupan.

Sekarang mari kita buat Sample.html utama kita, yang akan menjadi aplikasi utama kita. Mari masukkan cuplikan kode di bawah ini ke halaman HTML kita.

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

Pada kode di atas, kita menyertakan DemoController dan kemudian memanggil nilai variabel $scope.c melalui ekspresi.

Tapi perhatikan direktif ng-app kami, nilainya kosong.

  • Ini pada dasarnya berarti bahwa semua pengontrol yang dipanggil dalam konteks arahan ng-app dapat diakses secara global. Tidak ada batas yang memisahkan beberapa pengontrol satu sama lain.
  • Sekarang dalam pemrograman modern, merupakan praktik buruk jika pengontrol tidak terpasang pada modul apa pun dan membuatnya dapat diakses secara global. Harus ada batasan logis yang ditetapkan untuk pengontrol.

Dan di sinilah modul berperan. Modul digunakan untuk menciptakan pemisahan batas dan membantu memisahkan pengontrol berdasarkan fungsionalitas.

Mari kita ubah kode di atas untuk mengimplementasikan modul dan melampirkan 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 ditulis di atas

  1. var sampleApp = angular.module('sampleApp',[]);

    Kami secara khusus membuat modul AngularJS yang disebut 'sampleApp'. Ini akan membentuk batas logis untuk fungsionalitas yang terdapat dalam modul ini. Jadi dalam contoh di atas, kita memiliki modul yang berisi pengontrol yang berperan sebagai penambahan 2 objek cakupan. Oleh karena itu, kita dapat memiliki satu modul dengan batas logis yang menyatakan bahwa modul ini hanya akan menjalankan fungsi perhitungan matematis untuk aplikasi tersebut.

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

    Kami sekarang melampirkan 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 kita tidak akan terlihat seperti gambar di bawah ini

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

Mari kita perhatikan perbedaan utama antara kode yang ditulis di atas dan kode kita sebelumnya

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

Di tag tubuh kita,

  • Alih-alih memiliki direktif ng-app yang kosong, kami sekarang memanggil modul sampleApp.
  • Dengan memanggil modul aplikasi ini, kita sekarang dapat mengakses pengontrol 'DemoController' dan fungsionalitas yang ada di pengontrol demo.

Modul dan Pengontrol di AngularJS

In Sudut.JS, pola yang digunakan untuk mengembangkan aplikasi web modern adalah dengan membuat banyak modul dan pengontrol untuk memisahkan berbagai tingkat fungsionalitas secara logis.

Biasanya modul akan disimpan secara terpisah Javascript file, yang akan berbeda dari file aplikasi utama.

Mari kita lihat contoh bagaimana hal ini dapat dicapai.

Pada contoh di bawah ini,

  • Kita akan membuat file bernama Utilities.js yang akan menampung 2 modul, satu untuk menjalankan 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.
  • Dalam satu file aplikasi kita akan mengakses modul untuk penjumlahan dan di file aplikasi 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 kita perhatikan poin-poin penting dalam kode yang ditulis di atas

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

    Ada 2 Modul Angular terpisah yang dibuat, yang satu diberi nama 'AdditionApp' dan yang kedua diberi nama 'SubtractionApp'.

  2. 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

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

Mari kita perhatikan poin-poin penting dalam kode yang ditulis di atas

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

    Kami mereferensikan file Utilities.js kami di file aplikasi utama kami. Hal ini memungkinkan kita untuk mereferensikan modul AngularJS apa pun yang ditentukan dalam file ini.

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

    Kami mengakses modul 'AdditionApp' dan DemoAddController dengan menggunakan direktif ng-app dan ng-pengontrol masing.

  3. {{c}}

    Karena kita mereferensikan modul dan pengontrol yang disebutkan di atas, kita dapat mereferensikan variabel $scope.c melalui ekspresi. Ekspresi tersebut merupakan hasil penambahan 2 variabel lingkup a dan b yang dilakukan pada Kontroler '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

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

Mari kita perhatikan poin-poin penting dalam kode yang ditulis di atas

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

    Kami mereferensikan file Utilities.js kami di file aplikasi utama kami. Hal ini memungkinkan kita untuk mereferensikan modul apa pun yang ditentukan dalam file ini.

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

    Kami mengakses modul 'SubtractionApp dan DemoSubtractController dengan masing-masing menggunakan direktif ng-app dan ng-controller.

  3. {{d}}

    Karena kita mereferensikan modul dan pengontrol yang disebutkan di atas, kita dapat mereferensikan variabel $scope.d melalui ekspresi. Ekspresi tersebut merupakan hasil pengurangan 2 variabel lingkup a dan b yang dilakukan pada 'DemoSubtractController' pengawas

Ringkasan

  • Tanpa menggunakan modul AngularJS, pengontrol mulai memiliki cakupan global yang mengarah pada praktik pemrograman yang buruk.
  • Modul digunakan untuk memisahkan logika bisnis. Beberapa modul dapat dibuat untuk dipisahkan secara logis dalam modul-modul yang berbeda ini.
  • Setiap modul AngularJS dapat memiliki kumpulan pengontrolnya sendiri yang ditentukan dan ditetapkan padanya.
  • Saat mendefinisikan modul dan pengontrol, keduanya biasanya didefinisikan secara terpisah JavaNaskah file. Ini JavaBerkas skrip kemudian direferensikan dalam berkas aplikasi utama.