Penggunaan Value pada Angular JS Part 3
Oke teman teman masih semangat bagi belajar angularnya ya, di panduan Penggunaan Value pada Angular JS part 2 kita telah membahas mengenai menyimpan nilai dengan menggunakan single value dengan menggunakan angka, nah di panduan Pemakaian Value di 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 di panduan sebelumnya di Penggunaan Value pada Angular JS Part 1.
Oke teman teman kita seketika saja, langkah pertama-tama yang biasanya kita bikin terlebih dahulu yaitu, membangun sebuah folder baru yang bernama Pemakaian Value di Angular JS Part 3, dan didalam folder tersebut kita akan bikin sebuah file baru yang bernama index.html dan silahkan simpan script di bawah di file index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Pemakaian 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>
Jikalau file index.html di atas telah di simpan berikutnya kita akan bikin sebuah folder baru yang didalam folder Pemakaian Value di Angular JS Part 3, yang telah kita bikin sebelumnya dengan nama folder js dan didalam folder js tersebut kita bikin file baru yang bernama app.js, di file app.js yang akan kita bikin kali ini, kita menggunakan dua buah value bagi menampilkan angka dan huruf, seperti script di bawah ini.
var app=angular.module('FirstApp',[]);
app.value('string','Pemakaian Value di Angular JS Part 3');
app.value('number',100);Berikutnya silahkan teman teman bikin lagi sebuah folder baru yang bernama controller, didalam folder folder js, di pada folder controller tersebut kita akan bikin 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);
}]);Bagi menjalankan nya teman teman masih ingatkan silahkan jalankan file index.html nya di browser nya 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 terlihat seperti di bawah ini.
Nah bagi menyimpan beberapa nilai menggunakan object value, kita lumayan merubah file yang terdapat di app.js dengan script yang di di bawah ini.
// menyimpan nilai dengan menguanakan beberapa object
var app=angular.module('FirstApp',[]);
app.value('user', {
namaDepan: '',
namaBelakang: '',
jenisKelamin: '',
email: ''
});
Dan bagi controller nya sama, seperti di atas kita lumayan merubah file MainController.js yang telah kita bikin 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;
}]);
Jikalau dijalankan di browser, karenanya hasilnya seperti di bawah ini.
Oke teman teman lumayan demikianlah panduan saya kali ini mengenai Pemakaian Value di Angular JS Part 3 nya, semoga bermanfaat.
Terimakasih.
Penggunaan Value pada Angular JS Part 1
Penggunaan Value pada Angular JS Part 2
Sumber https://kursuswebsite.org
