{"id":8187,"date":"2021-11-19T09:07:00","date_gmt":"2021-11-19T02:07:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=8187"},"modified":"2021-11-12T09:21:46","modified_gmt":"2021-11-12T02:21:46","slug":"mengenal-angularjs-pengertian-kelebihan-dan-panduan-dasar","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/mengenal-angularjs-pengertian-kelebihan-dan-panduan-dasar\/","title":{"rendered":"Mengenal AngularJS: Pengertian, Kelebihan, dan Panduan Dasar"},"content":{"rendered":"\n<p>Guys, kalian setuju kah bahwa kemampuan AngularJS untuk mengembangkan website tak perlu diragukan? Apalagi <em>framework <\/em>ini cukup ramah untuk pemula. Tak heran orang-orang yang baru memasuki dunia web <em>developer <\/em>ingin menguasai AngularJS. Okay, simak sampai selesai yuk artikel <strong>Mengenal AngularJS: Pengertian, Kelebihan, dan Panduan Dasar<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu AngularJS <\/strong><\/h2>\n\n\n\n<p>AngularJS adalah software <em>framework open-source <\/em>yang digunakan untuk membuat aplikasi <em>single-page<\/em> berbasis website. <em>Framework <\/em>ini juga cukup populer bagi para <em>developer <\/em>untuk membuat menu animasi di laman web HTML.<\/p>\n\n\n\n<p>AngularJS menggunakan arsitektur Model-View-Controller (MVC) yang digunakan dalam pengembangan aplikasi berbasis web.<\/p>\n\n\n\n<p>Jenis arsitektur ini terdiri dari:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Model <\/strong>\u2013 struktur data yang mengelola informasi dan menerima input dari <em>controller<\/em>.<\/li><li><strong>View <\/strong>\u2013 representasi informasi.<\/li><li><strong>Controller <\/strong>\u2013 merespons input dan berinteraksi dengan model.<\/li><\/ul>\n\n\n\n<p>Dalam konteks Angular JS, model merujuk pada <em>framework<\/em>, sedangkan view adalah HTML dan control adalah JavaScript.<\/p>\n\n\n\n<p>Sederhananya seperti ini:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>AngularJS <strong>menyatukan <\/strong>JavaScript dan HTML.<\/li><li>JavaScript <strong>menerima <\/strong>input user dan <strong>mengirimkannya <\/strong>ke AngularJS.<\/li><li>AngularJS menggunakan input untuk <strong>memodifikasi <\/strong>HTML.<\/li><\/ul>\n\n\n\n<p>Dengan bersatunya JavaScript dan HTML berkat framework ini, kode di antara kedua bahasa tersebut akan tersinkron. Mekanisme ini nantinya memudahkan pekerjaan <em>developer <\/em>karena meminimalkan kode yang harus mereka tulis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kelebihan AngularJS <\/strong><\/h2>\n\n\n\n<p>Berikut ini beberapa kelebihan AngularJS:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Sangat Ramah untuk Pemula <\/strong><\/h3>\n\n\n\n<p>Kalian bisa menggunakan JavaScript, HTML, dan CSS pada AngularJS. So, kalian tak perlu belajar bahasa pemrograman baru lainnya untuk menggunakan AngularJS.<\/p>\n\n\n\n<p>Jika kalian bisa sedikit-sedikit tiga bahasa di atas sudah cukup untuk modal belajar AngularJS, lho. Bisalah kalau hanya membuat website walau dengan fitur-fitur terbatas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Data Binding Dua Arah <\/strong><\/h3>\n\n\n\n<p>Data binding pada AngularJS menggunakan pendekatan dua arah (<em>two-way data binding<\/em>).<\/p>\n\n\n\n<p>Efeknya adalah pergantian pada View akan langsung ditampilkan pada Model dan sebaliknya sehingga kalian sebagai <em>developer <\/em>tak perlu turun tangan sama sekali.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Manipulasi DOM <\/strong><\/h3>\n\n\n\n<p>Data binding dua arah juga membuat kalian tak selalu harus memanipulasi <em>Document Object Model<\/em> (DOM) selayaknya <em>framework <\/em>JavaScript lainnya.<\/p>\n\n\n\n<p>Kalian tak perlu menulis kode secara manual, cukup perlu update elemen saja. Hasilnya, kalian akan lebih menghemat waktu dan energi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Meningkatkan Performa Server <\/strong><\/h3>\n\n\n\n<p>AngularJS sudah mendukung proses <em>cache <\/em>yang mampu mengurangi permintaan ke server sehingga ia hanya akan menampilkan file statis yang diminta oleh API saja.<\/p>\n\n\n\n<p>Dikarenakan permintaan yang sedikit maka server kalian tak terlalu terbebani. Efeknya ya performa server kalian akan meningkat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Struktur Kode yang Memudahkan <\/strong><\/h3>\n\n\n\n<p>AngularJS menggunakan metode MVC yang cara kerjanya adalah sebagai berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Model<\/strong>: AngularJS sebagai framework akan menyatukan JavaScript dan HTML. Lalu, menerima permintaan untuk View.<\/li><li><strong>View<\/strong>: menampilkan informasi pada pengguna yang nantinya dijadikan input untuk dikirim ke AngularJS.<\/li><li><strong>Controller<\/strong>: merespon input tersebut dan menggunakannya untuk memodifikasi HTML.<\/li><\/ul>\n\n\n\n<p>Dengan digabungnya JavaScript dan HTML, barisan kode keduanya juga akan diserasikan (<em>synchronization<\/em>). Hasilnya, kode yang harus ditulis akan berkurang. Alhasil struktur kode akan lebih rapi, efisien, dan mudah dikelola.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Kompatibel dengan Berbagai Perangkat <\/strong><\/h3>\n\n\n\n<p>Jika website tersebut tidak <em>responsive <\/em>maka saat mengakses website dari ponsel ya tampilannya berantakan.<\/p>\n\n\n\n<p>Untungnya, website yang dibuat dengan AngularJS akan otomatis <em>responsive <\/em>tanpa perlu menulis kode tambahan. Jadi, perangkat atau browser apapun yang digunakan pengunjung, tampilan website akan tetap proporsional.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dukungan dari Google dan Komunitas Aktif <\/strong><\/h3>\n\n\n\n<p>Sebagai sebuah <em>framework <\/em>yang bersifat <em>open-source<\/em>, AngularJS bisa digunakan secara gratis dan bisa diutak-atik sesuka hati.&nbsp;<\/p>\n\n\n\n<p>Selain itu, dukungan dari Google dan komunitas yang aktif membuat AngularJS rutin mendapatkan update terkait bug. Bahkan, Long Term Support memastikan adanya dukungan penuh hingga 31 Desember 2021 mendatang.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Panduan Dasar AngularJS <\/strong><\/h2>\n\n\n\n<p>Silakan kalian simak sampai selesai terkait melakukan instalasi AngularJS dan membuat halaman sederhana dengan framework ini.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Install AngularJS <\/strong><\/h3>\n\n\n\n<p>Ada dua cara menginstall AngularJS, yaitu melalui cPanel dan menggunakan command line (CLI) :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Melalui cPanel<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Login ke akun cPanel kalian dengan URL <strong>https:\/\/alamatwebsiteanda.com\/cpanel<\/strong><\/li><li>Scroll ke bagian <strong>Software<\/strong> lalu pilih <strong>Softaculous Apps Installer<\/strong><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"233\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-1.png\" alt=\"mengenal-angularjs-1\" class=\"wp-image-8189\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-1.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-1-300x68.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-1-768x175.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Jendela baru akan terbuka. Anda masukkan saja <strong>AngularJS <\/strong>pada kolom pencarian di kiri atas. Setelah itu, klik AngularJS yang akan muncul tepat di bawah kolom pencarian.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"162\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-2.png\" alt=\"mengenal-angularjs-2\" class=\"wp-image-8190\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-2.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-2-300x47.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-2-768x122.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Klik tombol <strong>Install Now<\/strong>.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"600\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-3.png\" alt=\"mengenal-angularjs-3\" class=\"wp-image-8191\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-3.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-3-300x176.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-3-768x450.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Pastikan kalian sudah mengisi semua kolom sesuai kebutuhan. Oia, kolom <strong>Directory <\/strong>bisa dikosongkan kalau kalian ingin menginstall AngularJS langsung ke domain. Setelah itu, klik <strong>Install<\/strong>.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-4.png\" alt=\"mengenal-angularjs-4\" class=\"wp-image-8192\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-4.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-4-300x163.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-4-768x419.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Jika tak ada pemberitahuan error, berarti kalian sukses memasang AngularJS di website kalian.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-5.png\" alt=\"mengenal-angularjs-5\" class=\"wp-image-8193\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-5.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-5-300x117.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-5-768x301.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Melalui Command Line Installation (CLI)<\/strong><\/h3>\n\n\n\n<p>Kalian membutuhkan tiga hal ini sebelum bisa menginstall AngularJS melalui CLI: NodeJS, NPM, dan log in ke server kalianmelalui SSH.<\/p>\n\n\n\n<p>Jika tiga hal di atas sudah terpenuhi, berikut cara install AngularJS melalui CLI:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Masukkan command berikut untuk menginstall AngularJS secara global <strong>root@host ~]# npm install -g @angular\/cli<\/strong>&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"125\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-6-1024x125.png\" alt=\"mengenal-angularjs-6\" class=\"wp-image-8194\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-6-1024x125.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-6-300x37.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-6-768x94.png 768w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-6.png 1046w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Setelah itu, ketik command <strong>ng \u2013version<\/strong> untuk memastikan bahwa AngularJS sudah terpasang. Jika semuanya lancar, kalian akan mendapatkan hasil seperti gambar di bawah ini. Artinya, AngularJS siap digunakan!<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"611\" height=\"488\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-7.png\" alt=\"mengenal-angularjs-7\" class=\"wp-image-8195\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-7.png 611w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/11\/Mengenal-AngularJS-7-300x240.png 300w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Okay, jadi bisa disimpulkan bahwa Angular JS adalah <em>framework <\/em>JavaScript yang digunakan developer untuk membuat aplikasi <em>single-page<\/em> berbasis website. Framework ini menerapkan arsitektur Model-View-Controller sehingga kalian tak perlu menulis kode yang sama untuk file HTML dan JavaScript secara manual.<\/p>\n\n\n\n<p>Selamat mencoba dan semoga sukses dengan membuat website yang kalian buat!<\/p>\n\n\n\n<p>Nah, jika kalian sudah memiliki website, tentu perlu dioptimasi dong, ya. Optimasi performa website penting untuk menggunakan layanan website berkualitas, mulai dari<a href=\"https:\/\/www.jetorbit.com\/domain\/\"> domain<\/a>,<a href=\"https:\/\/www.jetorbit.com\/web-hosting\/\"> hosting<\/a>, dan layanan pendukung lainnya. Untuk mendapatkan itu semua, silakan berkunjung ke<a href=\"https:\/\/www.jetorbit.com\/\"> Jetorbit<\/a> untuk mencari sesuai kebutuhan kalian. Selain itu, Jetorbit juga menyediakan VPS yang bisa dicek<a href=\"https:\/\/www.jetvm.com\/\" target=\"_blank\" rel=\"noopener\"> di sini<\/a>.<\/p>\n\n\n\n<p>Berakit-rakit ke hulu<\/p>\n\n\n\n<p>Berenang-renang ke tepian<\/p>\n\n\n\n<p>Hey kalian istirahat dulu<\/p>\n\n\n\n<p>Daripada tepar kemudian<\/p>\n\n\n\n<p>Udah musim hujan nih, selalu jaga kesehatan ya, Guys!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Guys, kalian setuju kah bahwa kemampuan AngularJS untuk mengembangkan website tak perlu diragukan? Apalagi framework ini cukup ramah untuk pemula. Tak heran orang-orang yang baru memasuki dunia web developer ingin menguasai AngularJS. Okay, simak sampai selesai yuk artikel Mengenal AngularJS: Pengertian, Kelebihan, dan Panduan Dasar Apa Itu AngularJS AngularJS adalah software framework open-source yang digunakan &#8230; <a title=\"Mengenal AngularJS: Pengertian, Kelebihan, dan Panduan Dasar\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/mengenal-angularjs-pengertian-kelebihan-dan-panduan-dasar\/\" aria-label=\"Read more about Mengenal AngularJS: Pengertian, Kelebihan, dan Panduan Dasar\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":8188,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[2405,2406,283,7,2409,2407,2408],"class_list":["post-8187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-angularjs-adalah","tag-apa-itu-angularjs","tag-domain-murah","tag-hosting-murah","tag-install-angularjs","tag-kelebihan-angularjs","tag-panduan-dasar-angularjs","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/8187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=8187"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/8187\/revisions"}],"predecessor-version":[{"id":8196,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/8187\/revisions\/8196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/8188"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=8187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=8187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=8187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}