Kuasa AngularJS: Pelajari Direktif Kustom dan Aplikasi Halaman Tunggal

Pelajari kekuatan AngularJS dengan direktif kustom! Temukan cara membuat aplikasi halaman tunggal yang intuitif dan responsif. Klik untuk mulai!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Kuasa AngularJS: Pelajari Direktif Kustom dan Aplikasi Halaman Tunggal
  • AngularJS, Direktif Kustom, Aplikasi Halaman Tunggal, Pengembangan Web, Framework JavaScript

Baca Online

Kuasa AngularJS: Pelajari Direktif Kustom dan Aplikasi Halaman Tunggal

Daftar Isi

  1. Pengantar AngularJS
  2. Memahami Direktif Kustom
  3. Membuat Direktif Kustom Pertama
  4. Direktif Atribut dan Elemen
  5. Isolasi Scope pada Direktif
  6. Template dan TemplateUrl
  7. Controller dalam Direktif
  8. Membangun Aplikasi Halaman Tunggal (SPA)
  9. Routing dengan ngRoute
  10. Menggunakan Layanan (Services)
  11. Praktik: Membuat SPA Sederhana
  12. Kesimpulan

Pengantar AngularJS

AngularJS adalah framework JavaScript yang dikembangkan oleh Google untuk membangun aplikasi web dinamis dan interaktif. Dengan AngularJS, Anda dapat membuat aplikasi halaman tunggal (SPA) yang responsif dan mudah dikelola.

Salah satu fitur utama AngularJS adalah kemampuannya untuk membuat direktif kustom , yang memungkinkan Anda memperluas HTML dengan elemen dan atribut baru yang dapat digunakan kembali.

Logo AngularJS berwarna merah dengan latar belakang kode JavaScript berwarna gelap

Memahami Direktif Kustom

Direktif kustom adalah cara untuk membuat elemen HTML baru atau atribut yang memiliki perilaku khusus. Dengan direktif, Anda dapat mengemas fungsionalitas dan tampilan menjadi satu unit yang dapat digunakan kembali di seluruh aplikasi.

AngularJS menyediakan beberapa jenis direktif, seperti direktif atribut, elemen, dan komentar, namun yang paling umum adalah atribut dan elemen.

Diagram yang menunjukkan hubungan antara direktif kustom, elemen HTML, dan scope AngularJS

Membuat Direktif Kustom Pertama

Berikut contoh sederhana membuat direktif kustom yang menampilkan pesan selamat datang: 


angular.module('app', [])
  .directive('welcomeMessage', function() {
    return {
      restrict: 'E',
      template: '<h3>Selamat datang di aplikasi AngularJS Anda!</h3>'
    };
  });

Direktif ini dapat digunakan di HTML sebagai: 


<welcome-message></welcome-message>
Tampilan kode editor dengan contoh kode direktif AngularJS yang sederhana

Direktif Atribut dan Elemen

Direktif dapat digunakan sebagai atribut atau elemen. Contoh direktif atribut: 


angular.module('app', [])
  .directive('highlight', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {
        element.css('background-color', 'yellow');
      }
    };
  });

Penggunaan di HTML: 


<p highlight>Teks ini akan diberi latar kuning.</p>
Paragraf dengan latar belakang kuning yang menandakan efek direktif highlight

Isolasi Scope pada Direktif

Isolasi scope memungkinkan direktif memiliki scope sendiri yang terpisah dari scope induk. Ini penting untuk membuat komponen yang dapat digunakan ulang tanpa konflik data. 


angular.module('app', [])
  .directive('userCard', function() {
    return {
      restrict: 'E',
      scope: {
        userName: '@',
        userAge: '='
      },
      template: '<div><h4>Nama: {{userName}}</h4><p>Umur: {{userAge}}</p></div>'
    };
  });

Penggunaan di HTML: 


<user-card user-name="Budi" user-age="25"></user-card>
Kartu profil pengguna dengan nama Budi dan umur 25 tahun yang ditampilkan menggunakan direktif AngularJS

Template dan TemplateUrl

Template dapat ditulis langsung di dalam direktif menggunakan properti template atau diambil dari file eksternal menggunakan templateUrl . 


template: '<div>Ini template langsung</div>'

templateUrl: 'templates/my-template.html'

Menggunakan templateUrl membantu memisahkan kode HTML dari JavaScript dan membuat kode lebih terorganisir.

Ilustrasi pemisahan template HTML dan kode JavaScript dalam direktif AngularJS

Controller dalam Direktif

Direktif juga dapat memiliki controller sendiri untuk mengelola logika dan data internal. Controller ini dapat berkomunikasi dengan scope dan elemen DOM. 


angular.module('app', [])
  .directive('counter', function() {
    return {
      restrict: 'E',
      scope: {},
      template: '<button ng-click="count = count + 1">Hitung: {{count}}</button>',
      controller: function($scope) {
        $scope.count = 0;
      }
    };
  });

Penggunaan di HTML: 


<counter></counter>
Tombol hitung dengan angka yang bertambah setiap kali tombol ditekan, menggunakan direktif AngularJS

Membangun Aplikasi Halaman Tunggal (SPA)

SPA adalah aplikasi web yang memuat satu halaman HTML dan memperbarui konten secara dinamis tanpa memuat ulang halaman. AngularJS sangat cocok untuk membangun SPA dengan fitur routing dan binding data.

Ilustrasi konsep aplikasi halaman tunggal dengan navigasi dan konten yang dinamis

Routing dengan ngRoute

Modul ngRoute memungkinkan Anda mengatur routing untuk SPA. Anda dapat menentukan URL dan template yang akan ditampilkan. 


angular.module('app', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutController'
      })
      .otherwise({redirectTo: '/home'});
  });
Kode konfigurasi routing AngularJS dengan dua rute: home dan about

Menggunakan Layanan (Services)

Layanan AngularJS adalah singleton yang dapat digunakan untuk berbagi data dan fungsi antar komponen. Contoh layanan sederhana: 


angular.module('app')
  .service('DataService', function() {
    var data = [];
    this.add = function(item) {
      data.push(item);
    };
    this.getAll = function() {
      return data;
    };
  });
Kode contoh layanan AngularJS yang menyimpan dan mengambil data dalam array

Praktik: Membuat SPA Sederhana

Berikut contoh sederhana aplikasi SPA dengan dua halaman menggunakan AngularJS dan ngRoute: 


<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
</head>
<body>
  <nav>
    <a href="#!/home">Home</a> |
    <a href="#!/about">About</a>
  </nav>
  <div ng-view></div>

  <script>
    angular.module('app', ['ngRoute'])
      .config(function($routeProvider) {
        $routeProvider
          .when('/home', {
            template: '<h2>Halaman Home</h2><p>Selamat datang di halaman utama.</p>'
          })
          .when('/about', {
            template: '<h2>Halaman About</h2><p>Ini adalah halaman tentang aplikasi.</p>'
          })
          .otherwise({redirectTo: '/home'});
      });
  </script>
</body>
</html>
Tampilan aplikasi SPA sederhana dengan navigasi Home dan About menggunakan AngularJS

Kesimpulan

AngularJS memberikan kekuatan besar dalam membangun aplikasi web modern dengan fitur seperti direktif kustom dan SPA. Dengan memahami konsep direktif, scope, template, controller, routing, dan layanan, Anda dapat membuat aplikasi yang modular, mudah dipelihara, dan interaktif.

Teruslah bereksperimen dan praktik untuk menguasai AngularJS dan membangun aplikasi web yang hebat!

Ilustrasi perjalanan belajar AngularJS dengan buku, laptop, dan ikon teknologi

Edukasi Terkait