Panduan Mudah Belajar AngularJS 1.4.1 Untuk Pemula

1. Pengantar AngularJS 1.4.1

AngularJS adalah framework JavaScript open-source yang dikembangkan oleh Google untuk membangun aplikasi web dinamis dengan arsitektur MVC (Model-View-Controller). Versi 1.4.1 adalah salah satu versi stabil yang banyak digunakan.

AngularJS memudahkan pengembangan aplikasi dengan fitur two-way data binding, dependency injection, dan modularisasi kode.

Keunggulan AngularJS 1.4.1

Two-way data binding yang otomatis menyinkronkan model dan view.
Dependency injection untuk manajemen komponen yang mudah.
Direktif yang memungkinkan pembuatan elemen HTML custom.
Modular dan mudah diintegrasikan dengan library lain.
Komunitas besar dan dokumentasi lengkap.

2. Persiapan Lingkungan Pengembangan

Untuk mulai belajar AngularJS 1.4.1, Anda hanya perlu menyiapkan:

Editor Kode seperti Visual Studio Code, Sublime Text, atau editor favorit Anda.
Browser Modern seperti Chrome, Firefox, atau Edge untuk menjalankan aplikasi.
File AngularJS 1.4.1 yang dapat diunduh dari CDN atau situs resmi AngularJS.

Menyisipkan AngularJS 1.4.1 dari CDN

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

Sisipkan tag script ini di dalam file HTML Anda sebelum tag </body> .

3. Struktur Proyek AngularJS

Struktur proyek AngularJS sederhana biasanya terdiri dari:

index.html - file utama yang memuat aplikasi.
app.js - file JavaScript yang berisi modul, controller, dan konfigurasi AngularJS.
views/ - folder untuk file template HTML jika menggunakan routing.
css/ - folder untuk file stylesheet.

Diagram struktur folder proyek AngularJS dengan file index.html, app.js, folder views dan css

4. Membuat Aplikasi Sederhana dengan AngularJS

Mari kita buat aplikasi sederhana yang menampilkan pesan dan mengubahnya menggunakan AngularJS.

Contoh index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Aplikasi AngularJS Sederhana</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainController">

  <h1>{{ message }}</h1>

  <input type="text" ng-model="message" />

</body>
</html>

Contoh app.js

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

app.controller('MainController', function($scope) {
  $scope.message = "Halo, AngularJS 1.4.1!";
});

Saat Anda mengetik di input, pesan akan otomatis berubah karena two-way data binding.

5. Data Binding dan Direktif Dasar

AngularJS menyediakan berbagai direktif untuk menghubungkan data dan DOM.

Two-way Data Binding dengan ng-model

<input type="text" ng-model="nama" />
<p>Halo, {{ nama }}!</p>

Direktif ng-repeat untuk Looping

<ul>
  <li ng-repeat="item in daftar">{{ item }}</li>
</ul>

Direktif ng-show dan ng-hide

<div ng-show="isVisible">Teks ini muncul jika isVisible true</div>
<div ng-hide="isVisible">Teks ini muncul jika isVisible false</div>

6. Controller dan Scope

Controller mengatur logika aplikasi dan menghubungkan model dengan view melalui objek $scope .

Contoh Controller dengan Fungsi

app.controller('MainController', function($scope) {
  $scope.message = "Halo!";
  $scope.ubahPesan = function() {
    $scope.message = "Pesan telah diubah!";
  };
});

Menggunakan Fungsi di View

<h1>{{ message }}</h1>
<button ng-click="ubahPesan()">Ubah Pesan</button>

7. Filter AngularJS

Filter digunakan untuk memformat data di view.

Contoh Filter Bawaan

<p>{{ nama | uppercase }}</p>
<p>{{ tanggal | date:'fullDate' }}</p>

Membuat Filter Kustom

app.filter('reverse', function() {
  return function(input) {
    if (!input) return '';
    return input.split('').reverse().join('');
  };
});

Gunakan di view:

<p>{{ 'AngularJS' | reverse }}</p>  <!-- Output: SJralugnA -->

8. Routing dengan ngRoute

Modul ngRoute memungkinkan pembuatan aplikasi single-page dengan navigasi antar view tanpa reload halaman.

Instalasi dan Konfigurasi ngRoute

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

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

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

Contoh Controller dan View

// HomeController
app.controller('HomeController', function($scope) {
  $scope.title = "Halaman Home";
});

// about.html
<h2>{{ title }}</h2>
<p>Ini adalah halaman about.</p>

9. Service dan Factory

Service dan Factory adalah cara membuat komponen reusable untuk logika bisnis dan data sharing antar controller.

Contoh Service

app.service('DataService', function() {
  var data = [];

  this.getData = function() {
    return data;
  };

  this.addData = function(item) {
    data.push(item);
  };
});

Menggunakan Service di Controller

app.controller('MainController', function($scope, DataService) {
  $scope.items = DataService.getData();

  $scope.addItem = function(item) {
    DataService.addData(item);
    $scope.newItem = '';
  };
});

10. Form dan Validasi

AngularJS menyediakan fitur validasi form yang mudah digunakan dengan direktif seperti ng-required , ng-minlength , dan ng-pattern .

Contoh Form dengan Validasi

<form name="myForm" ng-submit="submitForm()" novalidate>
  <input type="text" name="username" ng-model="user.name" ng-required="true" />
  <span ng-show="myForm.username.$error.required">Nama wajib diisi</span>

  <input type="email" name="email" ng-model="user.email" ng-required="true" />
  <span ng-show="myForm.email.$error.required">Email wajib diisi</span>
  <span ng-show="myForm.email.$error.email">Format email salah</span>

  <button type="submit" ng-disabled="myForm.$invalid">Kirim</button>
</form>

Controller untuk Form

app.controller('FormController', function($scope) {
  $scope.user = {};

  $scope.submitForm = function() {
    if ($scope.myForm.$valid) {
      alert("Form valid dan berhasil dikirim!");
    }
  };
});