Master AngularJS 1.0: Panduan Lengkap untuk Pengembangan Modular

Daftar Isi

Pengantar AngularJS 1.0
Instalasi dan Setup Lingkungan
Struktur Aplikasi Modular AngularJS
Membuat dan Menggunakan Module
Controller dan Scope
Directive Kustom
Service dan Factory
Routing dengan ngRoute
Step by Step Membuat Aplikasi Sederhana
Source Code Lengkap dan Referensi Pembelajaran

1. Pengantar AngularJS 1.0

AngularJS 1.0 adalah framework JavaScript open-source yang dikembangkan oleh Google untuk membangun aplikasi web dinamis dengan pendekatan Model-View-Controller (MVC). AngularJS memudahkan pengembangan aplikasi dengan fitur two-way data binding, dependency injection, dan modularisasi.

Framework ini sangat cocok untuk membangun aplikasi web yang kompleks dan mudah dikembangkan secara modular. Pada ebook ini, Anda akan mempelajari cara menguasai AngularJS 1.0 dari dasar hingga pembuatan aplikasi modular lengkap.

2. Instalasi dan Setup Lingkungan

Untuk mulai menggunakan AngularJS 1.0, Anda hanya perlu menambahkan library AngularJS ke dalam proyek Anda. Berikut cara mudah menambahkan AngularJS 1.0 melalui CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

Anda juga bisa menggunakan editor kode favorit seperti VSCode dan menjalankan aplikasi menggunakan server lokal seperti Live Server agar fitur AngularJS berjalan dengan baik.

Ilustrasi setup lingkungan AngularJS dengan editor kode dan browser

3. Struktur Aplikasi Modular AngularJS

AngularJS menganjurkan pengembangan aplikasi secara modular. Struktur aplikasi biasanya terdiri dari:

Module: Unit modular utama aplikasi
Controller: Mengatur logika dan data pada view
Directive: Memperluas HTML dengan elemen kustom
Service/Factory: Menyediakan fungsi dan data yang dapat digunakan ulang
View: Template HTML yang menampilkan data

Diagram struktur modular aplikasi AngularJS 1.0 yang terdiri dari module, controller, directive, service, dan view

Dengan struktur ini, aplikasi menjadi lebih mudah dikembangkan, diuji, dan dipelihara.

4. Membuat dan Menggunakan Module

Module adalah blok bangunan utama dalam AngularJS. Anda dapat membuat module dengan sintaks berikut:

var app = angular.module('myApp', []);

Contoh membuat module dan menghubungkannya ke elemen HTML:

<html ng-app="myApp">
  <body>
    <h1>Halo AngularJS!</h1>
  </body>
</html>

<script>
  var app = angular.module('myApp', []);
</script>

Module dapat memiliki dependensi module lain, sehingga memudahkan pengelolaan fitur aplikasi.

5. Controller dan Scope

Controller mengatur data dan logika aplikasi. Scope adalah objek yang menghubungkan controller dengan view.

app.controller('MainCtrl', function($scope) {
  $scope.message = "Selamat datang di AngularJS!";
});

Contoh penggunaan controller dan binding data di HTML:

<div ng-controller="MainCtrl">
  <p>{{ message }}</p>
</div>

Ilustrasi controller AngularJS dengan binding data message ke view

Dengan controller dan scope, Anda dapat mengelola data dan interaksi pengguna secara dinamis.

6. Directive Kustom

Directive memungkinkan Anda membuat elemen HTML kustom dan memperluas fungsionalitas HTML standar.

app.directive('helloWorld', function() {
  return {
    restrict: 'E',
    template: '<h3>Halo Dunia dari Directive!</h3>'
  };
});

Penggunaan directive di HTML:

<hello-world></hello-world>

Contoh directive kustom AngularJS menampilkan tulisan Halo Dunia

Directive sangat berguna untuk membuat komponen UI yang dapat digunakan ulang.

7. Service dan Factory

Service dan Factory adalah cara untuk membuat fungsi dan data yang dapat digunakan ulang di seluruh aplikasi.

app.service('MathService', function() {
  this.square = function(x) {
    return x * x;
  };
});

Contoh penggunaan service di controller:

app.controller('CalcCtrl', function($scope, MathService) {
  $scope.number = 5;
  $scope.result = MathService.square($scope.number);
});

Ilustrasi service AngularJS yang menyediakan fungsi matematika dan digunakan di controller

Service membantu memisahkan logika bisnis dari controller agar kode lebih bersih dan modular.

8. Routing dengan ngRoute

AngularJS menyediakan modul ngRoute untuk membuat aplikasi single-page dengan navigasi antar halaman tanpa reload.

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'AboutCtrl'
    })
    .otherwise({
      redirectTo: '/home'
    });
});

Contoh link navigasi:

<a href="#/home">Home</a> | <a href="#/about">About</a>

Ilustrasi navigasi single page application menggunakan AngularJS ngRoute

Dengan routing, aplikasi Anda terasa lebih cepat dan interaktif.

9. Step by Step Membuat Aplikasi Sederhana

Mari kita buat aplikasi daftar tugas sederhana menggunakan AngularJS 1.0.

Langkah 1: Buat Module dan Controller

var app = angular.module('todoApp', []);

app.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    {text:'Belajar AngularJS', done:false},
    {text:'Membuat aplikasi', done:false}
  ];

  $scope.addTask = function() {
    if ($scope.newTask) {
      $scope.tasks.push({text: $scope.newTask, done:false});
      $scope.newTask = '';
    }
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.tasks, function(task) {
      count += task.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTasks = $scope.tasks;
    $scope.tasks = [];
    angular.forEach(oldTasks, function(task) {
      if (!task.done) $scope.tasks.push(task);
    });
  };
});

Langkah 2: Buat HTML dengan Binding dan Event

<div ng-app="todoApp" ng-controller="TodoCtrl">
  <h2>Daftar Tugas</h2>

  <span>Tugas tersisa: {{remaining()}}</span>

  <ul>
    <li ng-repeat="task in tasks">
      <input type="checkbox" ng-model="task.done">
      <span ng-class="{done: task.done}">{{task.text}}</span>
    </li>
  </ul>

  <input type="text" ng-model="newTask" placeholder="Tugas baru">
  <button ng-click="addTask()" class="ml-2 px-3 py-1 bg-indigo-600 text-white rounded">Tambah</button>

  <button ng-click="archive()" class="mt-4 px-3 py-1 bg-red-600 text-white rounded">Hapus Tugas Selesai</button>
</div>

Langkah 3: Tambahkan CSS untuk Tugas Selesai

<style>
  .done {
    text-decoration: line-through;
    color: gray;
  }
</style>

Tampilan aplikasi daftar tugas sederhana dengan checkbox dan tombol tambah serta hapus

Dengan langkah-langkah ini, Anda sudah membuat aplikasi AngularJS modular yang interaktif dan mudah dikembangkan.

10. Source Code Lengkap dan Referensi Pembelajaran

Berikut adalah source code lengkap aplikasi daftar tugas yang telah dibuat:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <meta charset="UTF-8">
  <title>Todo App AngularJS 1.0</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <style>
    .done {
      text-decoration: line-through;
      color: gray;
    }
  </style>
</head>
<body ng-controller="TodoCtrl">

  <h2>Daftar Tugas</h2>
  <span>Tugas tersisa: {{remaining()}}</span>

  <ul>
    <li ng-repeat="task in tasks">
      <input type="checkbox" ng-model="task.done">
      <span ng-class="{done: task.done}">{{task.text}}</span>
    </li>
  </ul>

  <input type="text" ng-model="newTask" placeholder="Tugas baru">
  <button ng-click="addTask()">Tambah</button>

  <button ng-click="archive()">Hapus Tugas Selesai</button>

  <script>
    var app = angular.module('todoApp', []);

    app.controller('TodoCtrl', function($scope) {
      $scope.tasks = [
        {text:'Belajar AngularJS', done:false},
        {text:'Membuat aplikasi', done:false}
      ];

      $scope.addTask = function() {
        if ($scope.newTask) {
          $scope.tasks.push({text: $scope.newTask, done:false});
          $scope.newTask = '';
        }
      };

      $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.tasks, function(task) {
          count += task.done ? 0 : 1;
        });
        return count;
      };

      $scope.archive = function() {
        var oldTasks = $scope.tasks;
        $scope.tasks = [];
        angular.forEach(oldTasks, function(task) {
          if (!task.done) $scope.tasks.push(task);
        });
      };
    });
  </script>

</body>
</html>

Untuk memperdalam pembelajaran AngularJS 1.0, Anda dapat mengunjungi channel dan sumber belajar berikut: