Apa itu AngularJS? Archikuliah, Fitur & Keunggulan

Apa itu AngularJS?

AngularJS adalah kerangka kerja Model-View-Controller sumber terbuka yang ditulis dalam JavaNaskahAngularJS adalah salah satu framework web paling populer di tahun 2010-an, dan digunakan untuk pengembangan.ping Sebagian besar berupa aplikasi Single Page. Kerangka kerja ini telah dikembangkan oleh sekelompok pengembang dari Google itu sendiri.

Karena dukungan yang luar biasa dari Google Berkat ide-ide dari berbagai forum komunitas, kerangka kerja ini terus diperbarui sepanjang masa aktifnya. Kerangka kerja ini juga menggabungkan tren pengembangan terkemuka pada periode tersebut, itulah sebabnya mengapa begitu banyak kode produksi masih berjalan di atasnya hingga saat ini.

Ada satu poin terminologi yang perlu diselesaikan sejak awal. AngularJS secara luas digambarkan sebagai kerangka kerja MVC, yang merupakan titik awal yang berguna. Namun, tim AngularJS sendiri lebih menyukai label tersebut. MVW (Model-View-Whatever), karena runtime berperilaku lebih mirip Model-View-ViewModel daripada MVC klasik. (Referensi resmi) Dokumentasi AngularJS Ia menyebutnya sebagai kerangka struktural untuk aplikasi web dinamis. Setelah itu, berikut adalah bagaimana bagian-bagian tersebut saling terhubung.

AngularJS Architekstur

AngularJS mengikuti arsitektur MVC. Diagram kerangka kerja MVC ditunjukkan di bawah ini:

AngularJS Archidiagram tekstur

Masing-masing dari ketiga lapisan tersebut memiliki tugas yang jelas:

• Controller mewakili lapisan yang memiliki logika bisnis. Peristiwa pengguna memicu fungsi yang disimpan di dalam pengontrol Anda. Peristiwa pengguna adalah bagian dari pengontrol.
• View digunakan untuk merepresentasikan lapisan presentasi yang diberikan kepada pengguna akhir.
• Model digunakan untuk merepresentasikan data Anda. Data dalam model Anda dapat sesederhana memiliki deklarasi primitif. Misalnya, jika Anda mengelola aplikasi siswa, model data Anda dapat hanya memiliki id dan nama siswa. Atau dapat juga menjadi rumit dengan memiliki model data terstruktur. Jika Anda mengelola aplikasi kepemilikan mobil, Anda dapat memiliki struktur untuk menentukan kendaraan itu sendiri dalam hal kapasitas mesin, kapasitas tempat duduk, dll.

Dalam praktiknya, controller jarang sekali memasukkan data ke dalam view secara manual. AngularJS memantau model dan memperbarui view untuk Anda, dan sinkronisasi otomatis tersebut didukung oleh fitur-fitur yang akan dijelaskan selanjutnya.

Fitur AngularJS

AngularJS memiliki fitur-fitur utama berikut yang menjadikannya salah satu framework terkuat di pasaran:

1. MVC – Kerangka kerja ini dibangun berdasarkan konsep terkenal MVC (Pengontrol Tampilan Model). Ini adalah pola desain yang digunakan di semua aplikasi web modern. Pola ini didasarkan pada pemisahan lapisan logika bisnis, lapisan data, dan lapisan presentasi menjadi beberapa bagian terpisah. Pembagian menjadi beberapa bagian dilakukan agar masing-masing bagian dapat dikelola dengan lebih mudah.
2. Pengikatan Model Data – Anda tidak perlu menulis kode khusus untuk mengikat data ke kontrol HTML. Ini dapat dilakukan oleh AngularJS hanya dengan menambahkan beberapa cuplikan kode.
3. Menulis lebih sedikit kode – Saat melakukan manipulasi DOM banyak JavaNaskah Dahulu, dibutuhkan penulisan kode untuk mendesain aplikasi apa pun. Namun dengan AngularJS, Anda akan kagum dengan jumlah kode yang lebih sedikit yang perlu Anda tulis untuk manipulasi DOM.
4. Satuan pengujian siap – Para desainer di Google Tidak hanya mengembangkan AngularJS, tetapi juga mengembangkan kerangka kerja pengujian yang disebut "Karma" yang membantu dalam mendesain pengujian unit untuk aplikasi AngularJS.
5. Direktif – Penanda seperti ng-aplikasi, ng-model dan ng-ulangi menambahkan perilaku pada elemen HTML biasa.

Fitur-fitur ini paling mudah dipahami setelah Anda menjalankannya, jadi bagian selanjutnya akan membangun halaman yang berfungsi dari awal.

Cara Mengatur AngularJS dan Membangun Aplikasi Pertama Anda

Membaca tentang data binding adalah satu hal, dan melihat cara kerjanya adalah hal lain. AngularJS tidak memerlukan package manager, bundler, atau compiler, jadi aplikasi pertama Anda hanyalah sebuah file HTML tunggal yang berjalan langsung dari hard disk Anda.

Langkah 1) Tambahkan pustaka AngularJS

Muat pustaka dari CDN dengan satu tag skrip. Versi 1.8.3 adalah rilis AngularJS terakhir, jadi tetapkan halaman Anda ke versi tersebut dan jangan ke versi yang berubah-ubah.

Langkah 2) Tandai direktori root aplikasi dengan ng-app

Direktif ng-app memberi tahu kompiler AngularJS bagian halaman mana yang menjadi tanggung jawabnya. Dengan meletakkannya pada tag html, seluruh dokumen diserahkan ke framework, dan nilai yang Anda berikan akan memberi nama modul yang akan Anda buat.

Langkah 3) Mengikat data dengan ng-model dan sebuah ekspresi

Direktif ng-model mengikat elemen input ke properti pada scope, dan ekspresi kurung kurawal ganda mencetak properti yang sama di tempat lain pada halaman. Karena pengikatan bersifat dua arah, typing Di dalam kotak, judul diperbarui secara instan, tanpa perlu penanganan peristiwa (event handler) sendiri.

Langkah 4) Tambahkan pengontrol untuk logika

Pengontrol adalah perangkat biasa. JavaFungsi skrip yang menerima objek $scope dan menetapkan nilai awal padanya. Mendaftarkannya pada modul membuatnya tersedia untuk direktif ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Langkah 5) Jalankan halaman dan periksa hasilnya

Simpan file tersebut sebagai index.html dan buka di browser apa pun. Judul awalnya berbunyi “Hello World!”, dan akan berubah setiap kali tombol ditekan. Tidak ada server web dan tidak ada langkah pembuatan yang terlibat.

Jika tidak ada yang muncul, buka konsol browser dan pastikan skrip CDN telah dimuat dan nama modul di dalam ng-app sama persis dengan nama yang diteruskan ke angular.module, karena ketidakcocokan akan menyebabkan kegagalan tanpa pemberitahuan. Halaman kecil itu sudah menunjukkan keunggulan yang akan dijelaskan selanjutnya.

Keunggulan AngularJS

Berikut kelebihan AngularJS:

• Karena ini adalah kerangka kerja sumber terbuka, Anda dapat mengharapkan jumlah kesalahan atau masalah yang minimal.
• Pengikatan dua arah – AngularJS menjaga lapisan data dan presentasi tetap sinkron. Anda tidak perlu menulis kode tambahan. JavaKode skrip untuk menjaga agar data dalam kode HTML dan lapisan data Anda tetap sinkron. AngularJS akan secara otomatis melakukan ini untuk Anda. Anda hanya perlu menentukan kontrol mana yang terikat ke bagian mana dari model Anda.
• Routing – AngularJS dapat menangani routing, yang berarti berpindah dari satu tampilan ke tampilan lain. Ini adalah dasar utama dari aplikasi satu halaman (single page application); di mana Anda dapat berpindah ke berbagai fungsi dalam aplikasi web Anda berdasarkan interaksi pengguna tetapi tetap berada di halaman yang sama.
• AngularJS mendukung pengujian, baik Pengujian Unit, dan Tes integrasi.
• AngularJS memperluas HTML dengan menyediakan elemen-elemennya sendiri yang disebut direktif. Secara garis besar, direktif adalah penanda pada elemen DOM (seperti atribut, nama elemen, dan komentar atau kelas CSS) yang memberi tahu kompiler HTML AngularJS untuk melampirkan perilaku tertentu pada elemen DOM tersebut. Direktif ini membantu memperluas fungsionalitas elemen HTML yang ada untuk memberikan lebih banyak kekuatan pada aplikasi web Anda.

Kelebihan AngularJS

Pandangan yang seimbang sama pentingnya, jadi pertimbangan-pertimbangan yang perlu diperhatikan akan dijelaskan selanjutnya.

Kekurangan dan Keterbatasan AngularJS

Setiap framework pasti mengorbankan sesuatu, dan AngularJS tidak terkecuali. Berikut adalah keterbatasan yang paling sering dilaporkan oleh tim yang memelihara aplikasi AngularJS:

• Tidak memiliki lapisan keamanan sendiri. – AngularJS tidak menyediakan otentikasi maupun otorisasi, sehingga keduanya harus diterapkan di sisi server.
• Ketergantungan total pada JavaNaskah – Jika pengunjung menonaktifkan JavaJika menggunakan skrip, halaman akan kembali ke markup biasa dan tidak akan ditampilkan.
• Kinerja siklus pencernaan – Perubahan dideteksi dengan membandingkan nilai yang dipantau secara berulang, sehingga halaman dengan beberapa ribu jilid mungkin terasa lambat.
• Kurva pembelajaran yang curam – Lingkup, arahan, pabrik, layanan, dan penyedia saling tumpang tindih, dan seringkali ada beberapa cara untuk mencapai hasil yang sama.
• Visibilitas mesin pencari – Tampilan dirakit di browser, jadi diperlukan pekerjaan tambahan seperti pra-rendering sebelum crawler dapat mengindeks halaman dengan andal.
• Tidak ada pembaruan lebih lanjut. – Sejak 31 Desember 2021 belum ada patch resmi, sehingga kerentanan yang baru ditemukan tetap tidak diperbaiki kecuali jika vendor komersial menyediakan perbaikan.

Poin terakhir itu mendorong sebagian besar tim untuk beralih ke kerangka kerja penerus, yang merupakan produk berbeda meskipun memiliki nama yang sama.

AngularJS vs Angular: Apa Perbedaannya?

AngularJS dan Angular seringkali membingungkan karena namanya sangat mirip, tetapi keduanya adalah framework terpisah dengan bahasa, arsitektur, dan lini rilis yang berbeda. AngularJS hanya merujuk pada seri 1.x yang dijelaskan di halaman ini. Angular berarti versi 2 dan setiap versi setelahnya, penulisan ulang lengkap yang dirilis pada tahun 2016 dan masih aktif dikembangkan. Code tidak berpindah di antara keduanya tanpa upaya migrasi yang disengaja.

Konsekuensi praktisnya adalah bahwa controller AngularJS tidak bisa begitu saja dimasukkan ke dalam proyek Angular. Migrasi berarti menulis ulang setiap controller sebagai komponen, jadi rencanakan ini sebagai pekerjaan rekayasa yang sebenarnya, bukan sekadar peningkatan. Singkatnya, perlakukan AngularJS sebagai keterampilan pemeliharaan dan Angular sebagai platform untuk pengembangan baru.

Pertanyaan Umum Demo Slot