Apa Itu Angular.Js ?

“Angular JS adalah salah satu framework javascript yang mengusungkan pola MV* dan dikembangkan oleh google”

Angular JS biasanya digunakan sebagai framework di bagian front end suatu website. Salah satu kelebihan dari angular js ini adalah data binding sehingga antara model dan controller datanya akan dilakukan sinkronisasi secara asynchronous. Kelebihan angular yang lain adalah angular dapat melakukan routing, membuat sebuah directive dan biasanya digunakan sebagai client untuk sebuah web service.

Bagaimana Instalasi Angular.Js?

Untuk Memulai Membuat Sebuah Project Dengan Angular.js, Kita Dapat Melakukan Instalasi Dengan Berkunjung Ke https://angularjs.org/ dan anda bisa memilih bagaimana cara anda untuk menginstall, mulai dari Mendownload nya langsung, dengan npm, bower. kalau saya menggunakan cdn angular.min.js yang disediakan oleh Google.

Download Angular.js
Download Angular.js

Membuat Project Pertama

Oke, Pertama Kita akan belajar hal yang paling dasar dulu semacam Hello World. Ketikkan kode di bawah ini

1
2
3
4
5
6
7
8
9
10
11
12
 <html>
<head>
	<title>Belajar AngularJS</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="">
     
	<input type="text" placeholder="Masukkan Nama Kamu" ng-model="nama"/>
	<h3>{{"Halo "+nama}}</h3>
 
</body>
</html>

Lalu Save Dan Beri Nama index.html. Maka Setelah Itu Dibuat, Maka Akan Seperti Ini Hasilnya

Gamber Percobaan 1
Gamber Percobaan 1

Nah Mudahkan? Biar Mantap dan Seru Mari Kita Kreasikan file index.html Sedikit Menjadi Seperti Ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
<head>
	<title>Belajar AngularJS</title>
 
	<style type="text/css">
		.merah{
			border:3px solid #c6535f;
			border-radius: 5px;
			padding: 5px;
		}
 
		.hijau{
			border:3px solid #35a06e;
			border-radius: 5px;
			padding: 5px;
		}
 
		div{
			margin-top: 20px;
		}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="">
     
	<input type="text" placeholder="Masukkan Nama Kamu" ng-model="nama"/>
	<br>
	<input type="text" placeholder="Masukkan Theme" ng-model="kelas"/>
	<br>
 
	<div>
		<span class="{{kelas}}">{{"Halo "+nama}}</span>
	<div>
</body>
</html>

Maka Hasilnya Akan Seperi ini

Ketika Saya Membuat “Hijau” Maka Theme nya akan Berubah warna Menjadi Hijau

Gambar Angular 2
Gambar Angular 2

Ketika Saya Membuat “Merah” Maka Theme nya akan Berubah warna Menjadi Merah

Gambar Angular 3
Gambar Angular 3

Nah Sudah Tau Apa Yang Berubah?

Ok Mungkin Itu Saja Untuk Perkenalan Angular.js. Ini Merupakan Pembelajaran Yang Dasar Banget.