Featured Post
Tutorial Cara Membuat Hello Word Di Angular Js
Kita akan belajar hal yang paling dasar dulu semacam Hello World. Ketikkan kode di bawah ini : <html> <head> <title>B...
Kita akan belajar hal yang paling dasar dulu semacam Hello World. Ketikkan kode di bawah ini :
<html>
<head>
<title>Belajar AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="">
<input type="text" placeholder="Masukkan Nama Kamu" ng-model="nama"/>
<h3>{{"Halo "+nama}}</h3>
</body>
</html>
Menginstal AngularJS adalah semudah meload file angular.min.js kedalam file html, perhatikan pada baris nomor 4. Kemudian berganti ke baris nomor 6, apa itu ada ng-app? directive ini digunakan untuk menandai bahwa html yang kita tulis menggunakan AngularJS sebagai JavaScript frameworknya, dalam kata lain directive ini digunakan supaya html bisa “mengerti” AngularJS. Baris 8 dan 9 adalah pertunjukan untuk kita. Pada baris 8 terdapat input dengan directive ng-model yang digunkan untuk melakukan binding data ke dalam sebuah property yang diberi nama nama. Baris 9 bertugas memunculkan kata “Halo” plus property tadi yang sudah di-bind dengan teks yang diinputkan. Silahkan langsung saja dicoba!
Apapun yang kita ketikkan pada input teks maka seketika itu juga akan dimunculkan tanpa harus menekan tombol submit dan sejenisnya.
Biar lebih seru sekarang ubah index.html menjadi seperti di bawah ini
[sociallocker]
<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="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>
Kira-kira sudah tahu apa yang akan terjadi?. Coba masukkan “merah” kemudian masukkan “hijau” pada teks input theme dan lihat hasilnya.
Ini baru dasar banget dari AngularJS. Tutorial selanjutnya mengenai seri ini adalah tentang bagaimana berkomunikasi dengan Controller sekaligus mendapatkan data yang ada pada Controller.
Unknown
Maret 28, 2018
New Google SEO
Bandung, Indonesia
<html>
<head>
<title>Belajar AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="">
<input type="text" placeholder="Masukkan Nama Kamu" ng-model="nama"/>
<h3>{{"Halo "+nama}}</h3>
</body>
</html>
Menginstal AngularJS adalah semudah meload file angular.min.js kedalam file html, perhatikan pada baris nomor 4. Kemudian berganti ke baris nomor 6, apa itu ada ng-app? directive ini digunakan untuk menandai bahwa html yang kita tulis menggunakan AngularJS sebagai JavaScript frameworknya, dalam kata lain directive ini digunakan supaya html bisa “mengerti” AngularJS. Baris 8 dan 9 adalah pertunjukan untuk kita. Pada baris 8 terdapat input dengan directive ng-model yang digunkan untuk melakukan binding data ke dalam sebuah property yang diberi nama nama. Baris 9 bertugas memunculkan kata “Halo” plus property tadi yang sudah di-bind dengan teks yang diinputkan. Silahkan langsung saja dicoba!
Apapun yang kita ketikkan pada input teks maka seketika itu juga akan dimunculkan tanpa harus menekan tombol submit dan sejenisnya.
Biar lebih seru sekarang ubah index.html menjadi seperti di bawah ini
[sociallocker]
<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="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>
Kira-kira sudah tahu apa yang akan terjadi?. Coba masukkan “merah” kemudian masukkan “hijau” pada teks input theme dan lihat hasilnya.