Ads by Yasya El Hakim
Tutorial Lengkap AngularJS: Pendahuluan - Bagian 1

AngularJS merupakan salah satu JavaScript Framework. AngularJS dapat ditambahkan atau dimasukkan ke dalam halaman HTML dengan menggunakan tag <script>.

AngularJS berfungsi untuk memperluas atribut HTML dengan beberapa arahan serta mem-binding (Mengikat) data ke dalam dokumen HTML dengan menggunakan suatu hal yang dinamakan Ekspresi (Expressions).




JavaScript Framework: AngularJS

AngularJS merupakan salah satu JavaScript Framework. Framework adalah suatu Library atau pustaka yang ditulis dengan menggunakan JavaScript.

AngularJS didistribusikan sebagai file JavaScript, dan dapat ditambahkan ke halaman web dengan menggunakan tag script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

AngularJS Memperluas Dokumen HTML

AngularJS dapat memperluas HTML dengan menggunakan Directive yang dapat ditulis dengan ng-directives.

Directive ng-app merupakan suatu definisi untuk aplikasi AngularJS.

Directive ng-model berfungsi untuk mengikat dan mengontrol atau mengatur nilai pada dokumen HTML (input, select, textarea) ke data aplikasi.

Directive ng-bind berfungsi untuk mengikat data aplikasi ke dalam tampilan HTML.

Contoh Singkat
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Nama: <input type="text" ng-model="nama"></p>
  <p ng-bind="nama"></p>
</div>

</body>
</html>

Penjelasan
  • AngularJS akan dijalankan secara otomatis ketika halaman web telah dimuat.
  • Directive ng-app berfungsi untuk memberitahukan AngularJS bahwa elemen <div> adalah "pemilik" dari salah satu aplikasi AngularJS.
  • Directive ng-model berfungsi untuk mengikat nilai dari suatu input ke nama variabel aplikasi.
  • Directive ng-bind dapat mengikat konten elemen <p> ke nama variabel aplikasi.

Directive pada AngularJS

Seperti yang telah kita bahas diatas, Directive pada AngularJS dapat berupa atribut HTML yang diawali dengan ng.

Directive ng-init berfungsi untuk menginisialisasi variabel pada suatu aplikasi AngularJS.
<div ng-app="" ng-init="namaDepan='Yasya'">

<p>Namanya adalah <span ng-bind="namaDepan"></span></p>

</div>

Contoh Alternatif lain:
<div data-ng-app="" data-ng-init="namaDepan='Yasya'">

<p>Namanya adalah <span data-ng-bind="namaDepan"></span></p>

</div>

Kalian dapat menggunakan data-ng- jika kalian ingin memastikan bahwa dokumen HTML yang kalian buat itu valid.

Kalian akan mempelajari lebih banyak lagi tentang Directive pada bagian selanjutnya.

Expressions pada AngularJS

Ekspresi (Expressions) pada AngularJS dapat ditulis dengan menggunakan dalam kurung seperti berikut: {{ekspresi}}.

AngularJS akan menampilkan data yang sama dengan ekspresi yang sudah ditulis atau dibuat:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Ekspresi pertama: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Ekspresi pada AngularJS akan mengikat data ke dalam dokumen HTML dengan cara yang sama seperti directive ng-bind.

Contoh Lain
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Nama: <input type="text" ng-model="nama"></p>
  <p>{{nama}}</p>
</div>

</body>
</html>

Kalian akan mempelajari lebih banyak tentang ekspresi pada bagian selanjutnya.

Aplikasi AngularJS

Modul (module) pada AngularJS dapat menentukan suatu aplikasi AngularJS.
Kontroler (controller) pada AngularJS dapat mengontrol suatu aplikasi AngularJS.
Directive ng-app berfungsi untuk mendefinisikan suatu aplikasi, sedangkan Directive ng-controller berfungsi untuk mendefinisikan controller.

Contoh
<div ng-app="aplikasiKu" ng-controller="kontrolKu">

Nama Depan: <input type="text" ng-model="namaDepan"><br>
Nama Belakang: <input type="text" ng-model="namaBelakang"><br>
<br>
Nama Lengkap: {{namaDepan + " " + namaBelakang}}

</div>

<script>
var app = angular.module('aplikasiKu', []);
app.controller('kontrolKu', function($scope) {
  $scope.namaDepan= "Yasya";
  $scope.namaBelakang= "El Hakim";
});
</script> 

Modul pada AngularJS dapat mendefinisikan suatu aplikasi:
var app = angular.module('aplikasiKu', []); 

Kontroller pada AngularJS dapat mengontrol suatu aplikasi:
app.controller('kontrolKu', function($scope) {
  $scope.namaDepan= "Yasya";
  $scope.namaBelakang= "El Hakim";
});

Kalian akan mempelajari lebih banyak tentang module dan controller pada bagian selanjutnya.

Selanjutnya: Tutorial Lengkap AngularJS: Ekspresi (Expressions) - Bagian 2
Daftar Isi: Tutorial Lengkap AngularJS

0Komentar

Sebelumnya Selanjutnya