Penggunaan Value pada Angular JS Part 3

Oke teman teman masih semangat untuk belajar angularnya ya, pada tutorial Penggunaan Value pada Angular JS part 2 kita telah membahas tentang menyimpan nilai dengan menggunakan single value dengan menggunakan angka, nah pada tutorial Penggunaan Value pada Angular JS Part 3 kali ini kita akan coba menyimpan sebuah nilai dengan cara single value dengan menggunakan huruf dan angka, dan cara menyimpan nilai value dengan menggunakan beberapa object value.

Kalau teman teman masih bingung dengan penjelasannya silahkan lihat pada tutorial sebelumnya pada Penggunaan Value pada Angular JS Part 1.

Oke teman teman kita langsung saja, langkah pertama yang biasa kita buat terlebih dahulu yaitu, membuat sebuah folder baru yang bernama Penggunaan Value pada Angular JS Part 3, dan didalam folder tersebut kita akan buat sebuah file baru yang bernama index.html dan silahkan simpan script di bawah pada file index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Penggunaan Angular JS Directive Part 3</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 file index.html di atas telah di simpan berikutnya kita akan buat sebuah folder baru yang didalam folder Penggunaan Value pada Angular JS Part 3, yang telah kita buat sebelumnya dengan nama folder js dan didalam folder js tersebut kita buat file baru yang bernama app.js, pada file app.js yang akan kita buat kali ini, kita menggunakan dua buah value untuk menampilkan angka dan huruf, seperti script di bawah ini.

var app=angular.module('FirstApp',[]);
app.value('string','Penggunaan Value pada Angular JS Part 3');
app.value('number',100);

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

app.controller('MainController',['$scope','string','number',function($scope, string, number){
console.log(string);
console.log(number);
}]);

Untuk menjalankan nya teman teman masih ingatkan silahkan jalankan file index.html nya pada browser nya 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 terlihat seperti di bawah ini.

Nah untuk menyimpan beberapa nilai menggunakan object value, kita cukup merubah file yang ada pada app.js dengan script yang pada di bawah ini.

// menyimpan nilai dengan menguanakan beberapa object
var app=angular.module('FirstApp',[]);
app.value('user', {
    namaDepan: '',
    namaBelakang: '',
    jenisKelamin: '',
    email: ''
});

Dan untuk controller nya sama, seperti di atas kita cukup merubah file MainController.js yang telah kita buat sebelumnya dengan script di bawah ini.

// kita akan memasukan sebuah nilai kedalam controller
// berikut nilai yang akan kita isi didalm container
app.controller('MainController', ['$scope', 'user', function MainController($scope, user) {
    user.namaDepan = 'Irwan';
    user.namaBelakang = 'Deswitansyah';
    user.jenisKelamin = 'Laki-laki';
    user.email = 'irwan.dumet@gmail.com';

    console.log(user); 
    console.log('Nama Depan: ', user.namaDepan); 
    console.log('Nama Belakang: ', user.namaBelakang); 
    console.log('Jenis Kelamin : ', user.jenisKelamin);
    console.log('Email: ', user.email); 

    $scope.user = user;
}]);

Jika dijalankan pada browser, maka hasilnya seperti di bawah ini.

Oke teman teman cukup sekian tutorial saya kali ini tentang Penggunaan Value pada Angular JS Part 3 nya, semoga bermanfaat.

Terimakasih.