Dalam postingan kali ini kita akan membahas tentang cara mengatur library AngularJS untuk digunakan dalam pengembangan aplikasi web. Kita juga secara singkat akan mempelajari struktur direktori dan isinya.
Postingan ini merupakan kelanjutan dari postingan sebelumnya Pengenalan Framework AngularJS.
Postingan Terkait : Pengenalan Framework AngularJS Fitur Kelebihan dan Kekurangan AngularJS
Ketika Anda membuka link https://angularjs.org/, Anda akan melihat ada dua pilihan untuk men-download library AngularJS −
- Lihat pada GitHub − klik tombol ini untuk menuju ke GitHub dan mendapatkan semua script terbaru.
- Download AngularJS 1 − atau mengklik tombol ini, layar berikut akan terlihat −
- Tampilan di atas ini memberikan berbagai pilihan menggunakan Angular JS sebagai berikut −
- Men-download dan hosting file lokal
- Ada dua pilihan yang berbeda legancy dan latest. Nama-nama itu sendiri adalah deskriptif dari angular. Legancy memiliki versi kurang dari 1.2.x dan latest memiliki versi 1.5.x.
- Kita juga bisa memilih dengan versi minified, tak terkompresi atau zip.
- CDN akses − Anda juga dapat memiliki akses ke sebuah CDN. CDN akan memberi Anda akses di seluruh dunia untuk regional data pusat yang di host Google. Ini berarti menggunakan CDN tanggung jawab penuh terhadap hosting file dari server Anda sendiri untuk serangkaian di luar. Ini juga menawarkan keuntungan bahwa jika pengunjung ke halaman web Anda sudah mengunduh salinan AngularJS dari CDN yang sama, itu tidak perlu didownload ulang.
- Try New Angular JS 2 - klik tombol ini untuk men-download versi beta Angular JS 2 .Versi ini sangat cepat, dengan dukungan mobile dan fleksibel dibandingkan dengan legancy dan latest dari AngularJS 1
Kita aakan menggunakan versi library CDN selama tutorial ini.
Contoh Penggunaan Angular JS
Sekarang mari kita menulis sebuah contoh sederhana yang menggunakan library AngularJS. Mari kita membuat file HTML dengan nama file myfirstexample.html sebagai berikut−
<!doctype html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Kapalomen.com!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
Output yang dihasilkan seperti di bawah ini.
Berikut adalah penjelasan dari potongan - potongan kode di atas di detail −
Include AngularJS
Kita telah menyertakan file AngularJS JavaScript di halaman HTML sehingga kita dapat menggunakan AngularJS −
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
Jika Anda ingin memperbarui ke versi terbaru dari AngularJS, gunakan source script berikut atau memeriksa versi terbaru dari AngularJS pada website resmi mereka.
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>Arahkan ke AngularJS app
Selanjutnya kami memberitahu apa bagian dari HTML berisi AngularJS app. Ini dilakukan dengan menambahkan atribut ng-app untuk elemen root HTML pada AngularJS app. Anda dapat juga menambahkannya ke elemen html atau elemen body seperti ditunjukkan di bawah ini −
<body ng-app = "myapp">
</body>View
View dapat dilihat pada bagian dibawah ini
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Kapalomen.com!</h2>
</div>
ng-controller mengarahkan controller kepada AngularJS untuk menggunakan view dengan ini. helloTo.title yang mengarahkan AngularJS menulis nilai "model" yang bernama helloTo.title ke HTML di lokasi ini.
Controller
Bagian controller dapat dilihat pada bagian dibawah ini :
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
Kode ini melakukan register fungsi controller yang bernama HelloController di dalam modul Angular yang bernama myapp. Kita akan mempelajari lebih banyak tentang modul dan controller dalam postingan dari masing-masing pada kesempatan selanjutnya. Fungsi controller terdaftar pada angular via angular.module(...). controller(...) pemanggilan fungsi.
Parameter $scope yang dilewatkan ke fungsi controller adalah model. Fungsi controller menambahkan objek helloTo pada JavaScript dan didalam objek ditambahkan field title.
Execution
Simpan kode di atas dengan nama myfirstexample.html dan bukalan dalam browser. Anda akan melihat output sebagai berikut −
Welcome AngularJS to the world of Kapalomen.com!Cara kerja Angular JS
Saat halaman terbuka di browser, berikut hal-hal terjadi −
- Dokumen HTML dimuat ke browser, dan dievaluasi oleh browser. File AngularJS JavaScript melakukan load, obyek angular global akan dibuat. Selanjutnya, JavaScript yang mendaftarkan fungsi controller untuk menjalankannya.
- Berikutnya AngularJS akan melakukan scan melalui HTML untuk mencari aplikasi AngularJS dan view. Setelah view ini terletak, ini menghubungkan view ke fungsi controller yang sesuai.
- Selanjutnya, AngularJS mengeksekusi fungsi controller. Kemudian menjadikan view dengan data dari model dipunyai oleh controller. Halaman ini sekarang siap untuk menampilkan hasil.
