Penggunaan Value pada Angular JS Part 2

Halo teman teman kita lanjut lagi pada tutorial Penggunaan Value pada Angular JS part 1 sebelumnya kita telah membahas tentang pengertian dari penggunaan value pada angular js, kalau teman teman lupa bisa di lihat lagi pada materi sebelumnya pada penggunaan value pada angular part 1.

Dan untuk materi Penggunaan Value pada Angular JS part 2 kali ini kita akan mencoba mengimplementasi kan nya, sehingga teman teman paham tentang kegunaan value pada angular js.

Oke teman teman kita langsung saja berikut cara Penggunaan Value pada Angular JS Part 2

Langkah pertama yang harus teman teman lakukan yaitu silakan buat sebuah folder baru yang bernama Penggunaan Value pada Angular JS Part 2, nah di dalam folder tersebut kita akan buat sebuah file yang bernama index.html dan silahkan teman teman simpan script dibawah ini pada pada index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Penggunaan 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>

Jika sudah silahkan disave, untuk implementasi Penggunaan Value pada Angular JS Part 2 kali ini ada beberapa value yang akan kita tampilkan, yaitu

Menyimpan sebuah nilai dengan cara single value menggunakan angka
Menyimpan sebuah nilai dengan cara single value menggunakan huruf dan angka
Menyimpan beberapa nilai dengan menggunakan beberapa object value

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

Jika file index.html di atas telah di simpan berikutnya kita akan buat sebuah file yang bernama app.js, pada file app.js yang akan kita buat kali ini sangat berbeda dari file app.js yang sebelumnya kita buat, pada file app.js kali ini ada penambahan sebuah value, pada file tersebut, baik 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 buat lagi sebuah folder baru yang bernama controller, didalam folder controller tersebut silahkan teman teman buat 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);
}]);

Jika sudah silahkan jalankan file index.html nya pada browser maka akan terlihat kosong kan, tetapi coba teman teman klik kanan dan inspect element dan lihat hasilnya pada console yang terdapat pada browser

Maka hasilnya akan seperti di bawah ini,

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

Penggunaan Value pada Angular JS Part 2

Kategori