Selamat malam, di sela kesibukan di dunia nyata dan sekarang saya sedang bingung mau ngapain, mending kita latihan dasar dari AngularJS. Di sini kita akan belajar menampilkan pesan hallo di web browser. Langsung saja hal yang pertama kita lakukan adalah :
1. Install AngularJS
dalam proses instalasi, hal pertama yang harus kita lakukan adalah men-download AngularJS pada halamaan https://angularjs.org/ dan klik download.
ini untuk versi offline, atau jika teman teman ada yang mau online saja bisa dengan cara copy kan link pada bagian CDN dari gambar di atas.
2. Coding
Setelah download selesai, maka kita masuk ke bagian coding. Di sini kita akan belajar dari dasar yaitu bagaimana menampilkan hello. Ketikan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Latihan Angular</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="nama"/>
<br>
<b>{{"Hallo, nama saya " +nama}}</b>
</div>
</body>
</html>
coba kalian perhatikan baris ke 8 terdapat ng-app, apa itu ng-app?? ini adalah sebuah directive yang berguna untuk melakukan inisialisasi pada HTML yang kita tulis adalah menggunakan AngularJS sebagai framework. Lalu pada baris 9 ada tag ng-model apa fungsinya? fungsinya adalah untuk membinding data ke dalam property nama. Lalu baris ke 11 berfungsi menampilkan kata "Hallo, nama saya" dan di tambah property yang sudah kita bind tadi sesuai dengan text yang di inputkan. Langsung saja di run codingan yang tadi , maka hasilnya seperti ini :
sekarang kita coba biar tampilan sedikit lebih keren dengan menambahkan css, scriptnya menjadi seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Latihan Hello</title>
<style type="text/css">
.biru{
border:3px solid blue;
border-radius: 5px;
padding: 5px;
}
.hitam{
border:3px solid black;
border-radius: 5px;
padding: 5px;
}
div{
margin-top: 20px;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="nama"/>
<br><br>
<input type="text" ng-model="warna"/>
<br>
<div>
<span class="{{warna}}"><b>{{"Hallo, nama saya " +nama}}</b></span>
</div>
</div>
</body>
</html>
coba di run, apakah hasilnya? kalau tidak ada masalah, maka hasilnya seperti di bawah ini :
oke, cukup sekian dari saya semoga bermanfaat dan mohon maaf bila ada kesalahan.
Source : https://agung-setiawan.com/tutorial-angularjs-bagian-1/
0 comments:
Post a Comment