Hallo teman-teman? bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan membahas tentang salah satu fungsi yang ada pada angular js, kalau sebelumnya kita telah belajar bebeapa fungsi yang ada di angular js seperti ng-app, ng-model dan ng-bind, kali ini kita akan membahas fungsi dari ng-init pada angular js.
Dengan ng-init kita dapat membuat variable baru dengan berisikan nilai dimana nilai tersebut dapat kita tampilkan pada jendela browser, mungkin kita langsung saja praktekan ya teman-teman.
Silahkan buat sebuah file dan coba teman-teman ketikan script berikut:
<!DOCTYPE html> <html> <head> <title>belajar</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> </body> </html>
Script di atas merupakan dasar dari html dimana pada bagian head saya memanggil file angular js secara online jadi teman-teman harus terkoneksi internet yah?
Nah sekarang coba tambahkan script berikut pada bagian body :
<div ng-app="" ng-init="nama_depan='Siti';nama_belakang='Fatimah'">
<p>Nama Saya Adalah : {{ nama_depan + " " + nama_belakang }}</p>
Saya membuat 2 buah variable didalam fungsi ng-init di mana variable pertama nama_depan dengan nilai siti dan variable ke dua nama_belakang dengan nilai fatimah, lalu saya mencetaknya.
Jadi keseluruhan scriptnya seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>belajar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="nama_depan='Siti';nama_belakang='Fatimah'">
<p>Nama Saya Adalah : {{ nama_depan + " " + nama_belakang }}</p>
</div>
</body>
</html>
Jika di-save maka hasilnya akan seperti berikut:
Oke cukup mudah ya teman-teman, silahkan coba praktekan di rumah, cukup sekan dulu untuk tutorial kali ini, terimakasih.