Google merupakan perusahaan besar yang terkenal di seluruh dunia. Hingga detik ini sudah ada banyak anak perusahaan Google yang bersaing di berbagai bidang.
Angular JS menjadi salah satu open source yang juga dikembangkan oleh Google dengan metode MVC.
Hal inilah yang membuat AngularJS mudah dikembangkan dan terlihat lebih clean.
Apa Itu Angular JS
Sesuai yang telah disinggung di awal bahwa AngularJS merupakan develop dari Google dan hingga sekarang ini sudah banyak digunakan untuk membangun web aplikasi.
AngularJS juga dikenal sebagai framework javascript paling populer di kalangan developer karena dapat diandalkan. Open source ini masuk ke dalam pembangunan web secara front end.
Secara umum, konsep dasar Angular ini adalah meningkatkan fungsi dari HTML untuk membangun web app menjadi lebih baik lagi.
Pada mulanya HTML digunakan untuk membuat halaman statis saja, namun dengan adanya Angular ini HTML bisa berubah fungsi untuk membuat web app sehingga tampilannya menjadi lebih baik.
Belajar Angular
-
Tahap Persiapan
Ketika memulai pembelajaran, tentunya membutuhkan peralatan yang dibutuhkan untuk belajar.
Langkah awal yang perlu Anda lakukan adalah dengan mencari AngularJS versi terbaru melalui situs resminya. Berikut langkah-langkahnya :
- Kunjungi situs resminya di https://angularjs.org/.
- Setelah halaman utama terbuka, pilih opsi Download AngularJS dan sistem akan memunculkan pop-up pilihan download.
- Pada opsi Branch, pilih versi terbaru atau latest dan yang sudah stabil.
- Di bawahnya, Anda bisa memilih opsi sesuai kebutuhan, disini bisa mencoba versi .Zip.
- Ketiga opsi sisanya dibiarkan saja karena itu sudah default dari sistem AngularJS. Klik tombol Download dan halaman baru akan terbuka.
- Di halaman baru tersebutlah versi AngularJS terbaru yang bisa digunakan. Cara menggunakannya cukup mudah, Anda tinggal menyalin URL ke notepad terlebih dahulu dan nantinya bisa langsung digunakan untuk membuat web app.
-
Komponen Dasar
Seperti halnya source code lainnya, AngularJS juga memiliki komponen dasar yang digunakan dalam pemrograman pembuatan web app.
Kali ini terdapat 3 komponen utama yang sering digunakan dalam pemrograman, yaitu :
- ng-bind – Framework ini digunakan untuk mengikat data aplikasi AngularJS yang terdapat di tag HTML.
- ng-app – Framework yang berfungsi untuk memberitahukan AngularJS untuk tetap aktif di bagian halaman ini, mencakup seluruh dokumen yang dibuat. Dapat dikatakan juga sebagai link yang mengarahkan aplikasi ke HTML.
- ng-model – Framework yang digunakan untuk menghubungkan antara formulir dan model. Artinya adalah jika terjadi perubahan pada kontrol pembaruan data, maka akan memperbarui data dalam model juga.
Baca juga : Mengenal Reach JS Untuk Pemula dan Contohnya
-
Contoh Script dan Informasi Detail
Sekarang, Anda akan mempelajari contoh script yang sudah jadi dan bagian apa saja yang terdapat pada script ini.
Persiapkan notepad terlebih dahulu atau text editor lain seperti Notepad++ dan sebagainya.
Salin script code di bawah ini ke notepad dan simpan dalam bentuk file .HTML, kemudian buka menggunakan browser untuk mengetahui hasilnya.
<!doctype html>
<html>
<head>
<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js”></script>
</head>
<body ng-app = “myapp”>
<div ng-controller = “HelloController” >
<h2>Selamat Datang {{helloTo.title}} di Nusapedia.com</h2>
</div>
<script>
angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “Wisatawan”;
});
</script>
</body>
</html>
Dari script di atas, sudah memuat beberapa hal seperti source code Angular JS terbaru, hingga metode MVC yang digunakan Google.
Berikut detail bagian dari source code di atas :
- AngularJS Terbaru
Pembuatan web app ataupun lainnya sebaiknya memang menggunakan AngularJS versi terbaru yang stabil agar bekerja dengan baik.
Cara mendapatkan AngularJS terbaru sudah dijelaskan di poin pertama. Namun jika ingin menggunakan versi sebelumnya juga diperbolehkan. Berikut code yang dimaksud :
<head>
<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js”></script>
</head>
- Pengarahan ke AngularJS App
Komponen framework ini digunakan sebagai elemen untuk root HTML pada AngularJS app ini.
Penambahan elemen bisa ditempatkan sesuai dengan kebutuhan, contohnya disini ditempatkan di “body” seperti contoh di atas, yaitu :
<body ng-app = “myapp”>
</body>
-
View
Mode view controller ini digunakan untuk mengarahkan controller pada AngularJS agar menggunakan view menggunakan script ini. Berikut script yang dimaksud :
<div ng-controller = “HelloController” >
<h2>Selamat Datang {{helloTo.title}} di Nusapedia.com</h2>
</div>
Pada tulisan {{helloTo.tittle}} di atas tidak bisa diubah. Script code tersebut akan menghubungkan dengan elemen di bawahnya dan di elemen itulah Anda bisa merubah isi tulisannya.
-
Controller
Controller ini merupakan lanjutan dari view dan code script ini berfungsi untuk melakukan register pada perintah sebelumnya.
Adapun fungsi controller yang biasanya digunakan pada AngularJS adalah angular.module(…), dilanjutkan code controller(…) dan digunakan untuk memanggil fungsi. Berikut script yang dimaksud :
<script>
angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “Wisatawan”;
});
</script>
Perhatikan pada code $scope.helloTo.title = “Wisatawan”; , code inilah yang bisa Anda ubah title atau judulnya.
Anda bisa merubah pada kata “Wisatawan” sesuai dengan keinginan masing-masing. Ini memang terlihat lebih rumit, namun AngularJS tetap memiliki peran yang penting dalam pembuatan web app dan sejenisnya.
-
Cara Kerja Angular
Script tadi ketika dibuka di browser, tidak langsung terbuka secara cepat dan butuh proses untuk membaca dan memvalidasi data.
Awalnya file .HMTL tersebut akan dievaluasi oleh browser dan AngularJS Javascript akan melakukan load data.
Dari situlah kemudian Javascript melakukan fungsi kontrolnya.
Bagaimana apakah anda sudah faham dengan penjelasan angular js diatas? Jika ada pertanyaan mengenai angular js bisa Anda tuliskan pada kolom komentar dibawah.
Perlu diketahui bahwa Qwords memiliki layanan penjualan Cloud Web Hosting dan juga domain untuk keperluan develop website.
Jika butuh langsung saja pesan di Qwords.com dan dapatkan promo-promo menariknya setiap bulan.
Terima kasih
