Penggunaan Value pada Angular JS Part 2

Halo teman teman kita lanjut lagi di panduan Penggunaan Value pada Angular JS part 1 sebelumnya kita telah membahas mengenai pengertian dari pemakaian value di angular js, kalau teman teman lupa dapat di lihat lagi di bahan sebelumnya di pemakaian value di angular part 1.



Dan bagi bahan Pemakaian Value di Angular JS part 2 kali ini kita akan mencoba mengimplementasi kan nya, sehingga teman teman paham mengenai kegunaan value di angular js.



Oke teman teman kita seketika saja berikut cara Pemakaian Value di Angular JS Part 2



Langkah pertama-tama yang mesti teman teman lakukan yaitu silakan bikin sebuah folder baru yang bernama Pemakaian Value di Angular JS Part 2, nah di pada folder tersebut kita akan bikin sebuah file yang bernama index.html dan silahkan teman teman simpan script dibawah ini di di index.html



<!DOCTYPE html>
<html>
<head>
<title>Demo Pemakaian Angular JS Directive Part 2</title>
</head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script type=text/javascript src=js/app.js></script>
<script type=text/javascript src=js/controllers/MainController.js></script>
<body ng-app=FirstApp>
<div ng-controller=MainController>

</div>
</body>
</html>


Kalau telah silahkan disave, bagi implementasi Pemakaian Value di Angular JS Part 2 kali ini ada beberapa value yang akan kita tampilkan, yaitu




  1. Menyimpan sebuah nilai dengan cara single value menggunakan angka


  2. Menyimpan sebuah nilai dengan cara single value menggunakan huruf dan angka


  3. Menyimpan beberapa nilai dengan menggunakan beberapa object value



Oke teman teman kita akan bahas yang pertama-tama dulu yaitu, menyimpan sebuah nilai dengan cara single value menggunakan angka.



Kalau file index.html di atas telah di simpan berikutnya kita akan bikin sebuah file yang bernama app.js, di file app.js yang akan kita bikin kali ini benar-benar berbeda dari file app.js yang sebelumnya kita bikin, di file app.js kali ini ada penambahan sebuah value, di file tersebut, bagus silahkan teman teman simpan script dibawah ini dengan nama app.js



//menyimpan nilai dengan single value
var app=angular.module('FirstApp',[]);
app.value('belajar', 1000);


Berikutnya silahkan teman teman bikin lagi sebuah folder baru yang bernama controller, didalam folder controller tersebut silahkan teman teman bikin sebuah file baru yang bernama MainController.js, dan silahkan teman teman simpan script dibawah ini dengan nama MainController.js



// kita akan memasukan sebuah nilai kedalam controller
app.controller('MainController', ['belajar', function MainController(belajar) {
console.log(belajar);
belajar = 20;
console.log(belajar);
}]);


Kalau telah silahkan jalankan file index.html nya di browser karenanya akan terlihat kosong kan, tetapi coba teman teman klik kanan dan inspect element dan lihat hasilnya di console yang terdapat di browser



Karenanya hasilnya akan seperti di bawah ini,





Oke teman teman bagi single value menggunakan huruf dan angka, dan menggunakan bebera




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS