Pengenalan Angular Frontend

AngularJS adalah JavaScript berbasis open-source paling depan kerangka web terutama dikelola oleh Google dan oleh komunitas individu dan perusahaan untuk mengatasi banyak tantangan yang dihadapi dalam pembangunan aplikasi satu halaman.

Ini bertujuan untuk menyederhanakan pengembangan dan pengujian aplikasi tersebut dengan menyediakan kerangka kerja untuk sisi klien model – view – controller (MVC) dan model – view – viewmodel (MVVM), bersama dengan komponen yang biasa digunakan dalam aplikasi Internet yang kaya.

AngularJS digunakan sebagai frontend dari BERARTI tumpukan, terdiri dari MongoDB database, Express.js kerangka kerja server aplikasi web, Angular.js itu sendiri, dan Node.js lingkungan runtime server. Versi 1.8.x menggunakan Dukungan Jangka Panjang hingga 31 Desember 2021. Setelah tanggal itu AngularJS tidak lagi diperbarui dan Sudut (2.0+) disarankan sebagai gantinya.

Pengenalan Angular

Evolusi Teknologi Web

1. Masa Awal Perkembangan Web

• Mengandalkan kemampuan server untuk menghadirkan aplikasi web yang kaya fitur dan menangani tugas yang kompleks.
• Aplikasi Browser hanya bertugas untuk menampilkan data kepada pengguna, menerima input dan mengirim data ke server untuk di olah.
• Teknologi aplikasi Browser dan JavaScript banyak digunakan untuk memvalidasi input dari pengguna.

2. Masa Kini

• Teknologi JavasScript mengalami perkembangan yang sangat drastic.
• Kolaborasi teknologi HTML5, CSS3 dan JavaScript dapat menghadirkan aplikasi web yang lebih berguna dan interaktif.
• Untuk JavaScript, dibuat sebuah standard yang disebut ES (ECMAScript).
• Selanjutnya, ES banyak di adopsi oleh aplikasi Browser modern sehingga JavaScript menjadi Bahasa pemrograman utama di teknologi Web.
• Standard ES yang sekarang banyak digunakan adalah ES6 atau ES2015. Update ES dilakukan setiap tahun dan sekarang sudah mencapai versi ECMA-262 / ES 2020

Dengan mengadopsi standard ES dan perkembangan teknologi HTML5/CSS, menghadirkan Aplikasi Web yang semakin powerful dan interaktif.

Perkembangan ini menghadirkan banyak framework yang menawarkan:

1. Web Components, standard element untuk membuat tampilan HTML yang bersifat reusable.
2. Framework seperti React, memungkinkan penyusunan antar muka pengguna yang kompleks dengan komponen yang bersifat reusable.
3. Angular adalah sebuah framework untuk membangun aplikasi front-end.
• Dikembangkan sebagai proyek open source yang diarahkan oleh Google.
• Pada pengembangan web, Angular digunakan sebagai komponen untuk membuat Views.
4. Angular digunakan untuk membangun aplikasi website dengan menggunakan html dan javascript.
• Halaman website yang dibuat menggunakan Angular, biasa disebut dengan Single Page Application (SPA).
• Pada SPA, berbagai hal dapat dilakukan dalam sebuah halaman web layaknya seperti aplikasi stand alone. Contohnya, halaman dashboard dari layanan cloud SaaS.

Sejarah Angular

Angular versi 1.x disebut juga AngularJS. Penamaan Angular dimulai sejak versi 2.0 yang melakukan perubahan besar pada framework versi 1.x.

Sejak versi 2.0, Angular mendukung tiga Bahasa pemrograman yaitu:

1. TypeScript
2. JavaScript
3. Dart

Angular banyak digunakan dengan Bahasa pemrograman TypeScript.

Sekilas Tentang TypeScript

TypeScript adalah superset dari ECMAScript.

• Merupakan proyek open source yang didukung oleh Microsoft.
• Mendukung semua fitur JavaScript termasuk tipe data, interface, generics dan enums.
• Perbedaan TypeScript dan JavaScript

Arsiktektur Angular

Arsitektur Angular terdiri dari 8 blok:

1. Module
2. Component
3. Metadata
4. Template
5. Data Binding
6. Service
7. Directive
8. Dependency Injection

Module

1. Module adalah blok kode yang dirancang untuk melakukan sebuah tugas.
2. Setiap aplikasi Angular setidaknya memiliki satu module yang disebut sebagai root module. Di dalam root module, dimungkinkan untuk memiliki satu lebih module yang disebut featured module.
3. Module pada angular adalah sebuah kelas yang diberi nama @NgModule.
4. @NgModule memiliki satu objek metadata dan properti yang menggambarkan module tersebut.

Beberapa property yang penting pada module @NgModule adalah:

1. exports – merupakan subset yang akan digunakan oleh komponen template dari module yang lain.
2. imports – merupakan bagian import dari module lain.
3. providers – merupakan penyedia layanan. Layanan ini bisa di akses oleh semua bagian di dalam SPA.
4. bootstrap – sebuah root module harus mengatur properti bootstrap. Properti ini digunakan sebagai tuan rumah dari view yang lain.
5. declarations – melakukan deklarasi view class dari module yang sedang aktif. Ada tiga tipe view class yang didukung oleh Angular, yaitu: Components, Directives dan Pipes.

Contoh sintaks :

Component

1. Component adalah sebuah class yang berisi template yang menangani View dari aplikasi.
2. Component berisi logika utama dari sebuah SPA.
3. Component class berinteraksi dengan View melalui Methods dan Property dari API.
4. Angular membuat dan memperbaharui Component yang dibutuhkan dan menghancurkan Component yang tidak digunakan saat pengguna melakukan perpindahan.

Contoh sintaks:

Metadata

1. Metadata digunakan untuk mendefinisikan pemrosesan Class.
2. Untuk mendefinisikan Metadata, Angular menggunakan elemen yang disebut Declarator.
3. Sebagai contoh, Angular menggunakan sebuah metadata untuk mendefinisikan sebuah component. Declarator yang digunakan pada bagian metadata ini adalah @Component

Contoh sintaks Metadata (menggunakan declarator @Component):

Template

1. Template adalah komponen View yang digunakan Angular untuk mengatur tampilan dari sebuah Component.
2. Tampilan yang dihasilkan seperti halaman web yang dibuat menggunakan sintaks HTML.

Data Binding

1. Data binding merupakan fitur yang sangat berguna dari teknologi pengembangan aplikasi.
2. Data bind adalah jembatan yang menghubungkan View dengan business logic dari sebuah aplikasi.
3. Data binding pada angular melakukan sinkronisasi secara otomatis antara Model dan View.

Terdapat empat tipe binding yang didukung oleh Angular:

1. Interpolation – menampilkan nilai Component di dalam tag HTML.
2. Property Binding – mengirimkan nilai dari sebuah property dari parent class kepada property pada child class.
3. Event Binding – mengaktifkan event ketika pengguna melakukan klik pada nama metode Component.
4. Two-way Binding – form penting yang mengkombinasikan event dan property binding ke dalam satu notasi dengan menggunakan turunan ngModel.

Service

1. Service adalah sebuah fungsi atau sebuah objek yang bisa digunakan untuk berbagi data dan metode antar aplikasi.
2. Service berupa fungsi JavaScript yang melakukan tugas yang spesifik.
3. Service mencakup fungsi, nilai atau fitur-fitur lain yang dibutuhkan oleh sebuah aplikasi.
4. Contohnya: logging service, data service, message service, dan lain-lain.

Directive

1. Directive adalah salah satu komponen utama di dalam Angular.
2. Directive merupakan perpanjangan dari atribut HTML.
3. Directive berupa tanda pada elemen DOM yang menyediakan metode khusus dan digunakan oleh Angular untuk menempelkan data.
4. Ini adalah kelas dengan metadata direktif.
5. Untuk membuat direktif, kita harus menerapkan decorator @Directive di metadata yang terpasang pada suatu Class.

Dependency Injection

1. Dependency injection adalah pola perancangan aplikasi dimana objek dikirimkan sebagai Dependencies.
2. Hal ini membantu programmer untuk menghilangkan Dependencies yang ditulis langsung pada kode dan membuat Dependencies dapat dikonfigurasi.
3. Dengan Dependency Injection, programmer dapat membuat Component yang dapat diatur, digunakan kembali dan bisa diuji coba.