lifelong learner — urip iku urup, currently working on accenture.

Mengenal Arsitektur dan Struktur Framework Angular untuk Secara Mendasar

0
Degananda.com -

artsitektur.png

Angular adalah framework yang digunakan untuk membangun website dengan jenis SPA(Single Page Application). SPA berarti website tersebut hanya mempunyai satu source code yang di gunakan oleh browser untuk dapat menampilkan serta menjalankan keseluruhan fungsional website.

Angular ditulis dengan menggunakan typescript (superset dari javascript yang powerful) yang mana membuat angular dapat menggunakan fitur-fitur typescript dalam frameworknya

angular memiliki arsitektur yang melibatkan berbagai komponen penyusun yang dibaratkan sebagai blok-blok penyusun program.

angular

Mengenal Arsitektur Framework Angular untuk Pembuatan Website Frontend

Basic building block (NgModules)

blok paling mendasar yang menyusun framework angular adalah NgModules. Blok ini memiliki fungsi untuk menstrukturkan atau istilah dalam pemrograman adalah kompilasi komponen-komponen penyusun angular lainnya (dibawah NgModules).

angular_basic_building_blokcs.png
angular basic building blocks.

NgModules secara singkatnya adalah blok yang mengatur penyusunan atau kompilasi context dari aplikasi. Context sendiri adalah status atau kondisi suatu aplikasi. Contoh pada saat context starting program maka NgModules akan memanggil beberapa komponen serta library untuk melakukan inisiasi program. Setidaknya harus ada satu root module untuk dapat melakukan boostraping (proses menginisasi program/menjalankan aplikasi angular)

Komponen pada angular

komponen pada angular adalah suatu view dari informasi atau data. Contohnya view terhadap visualisasi informasi yang ditampilkan dan tersusun atas berbagai komponen website. Misalnya saja view login, view order list dan lain sebagainya

Setiap view akan memiliki business logic tersendiri sesuai dengan fungsionalitas view tersebut.

Komponen membutuhkan services untuk dapat membangun view secara utuh

Komponen tidak hanya terbatas pada kode template html, melainkan juga controller yang melibatkan view tersebut. Dalam hal ini logika view tersebut dibangun dengna menggunakan typescript.

angular_komponen_services_depedency_injection.png

Komponen akan bergantung pada servies untuk berinteraksi dengan library internal maupun eksternal seperti contohnya saat akan melakukan API call komponen akan membutuhkan bantuan dari services. Library tersebut akan dimasukan pada service dengan menggunakan istilah depedency injection (DI)

Blok untuk Navigasi Halaman

router_melakukan_navigasi_view.png

angular memiliki satu blok khusus untuk mengangi navigasi halaman website. Blok ini bernama router. Blok router ini akan menentukan view atau komponen mana yang akan ditampilkan pada user.

Arsitektur Dasar (high level) Secara Penuh

angular_highlevel_arsitektur.png

Sehingga dari ketiga konsep fundamental mengenai NgModules , komponen dan router maka diagram diatas adalah arsitektur dasar (high level) dari framework angular.

 

 

 

(Visited 24 times, 1 visits today)
Please follow and like us:

Leave a Reply