Tools Dan Instalasi Angular

Framework AngularJS bekerja dengan membaca file Hyper Text Markup Language (HTML), yang memiliki kustom tambahan Atribut HTML tertanam di dalamnya. Angular menafsirkan atribut tersebut sebagai arahan untuk mengikat bagian masukan atau keluaran halaman ke model yang diwakili oleh JavaScript standar variabel. Nilai variabel JavaScript tersebut dapat disetel secara manual di dalam kode, atau diambil dari statis atau dinamis JSON sumber daya.

AngularJS dibangun atas dasar keyakinan bahwa pemrograman deklaratif harus digunakan untuk membuat antarmuka pengguna dan hubungkan komponen perangkat lunak, sementara pemrograman penting lebih cocok untuk mendefinisikan aplikasi logika bisnis.

Kerangka kerja ini mengadaptasi dan memperluas HTML tradisional untuk menyajikan konten dinamis melalui pengikatan data dua arah yang memungkinkan sinkronisasi otomatis model dan tampilan. Akibatnya, AngularJS tidak menekankan secara eksplisit Model Objek Dokumen (DOM) manipulasi dengan tujuan meningkatkan kemampuan pengujian dan kinerja.

Tujuan desain AngularJS meliputi:

untuk memisahkan manipulasi DOM dari logika aplikasi. Kesulitan ini secara dramatis dipengaruhi oleh cara penyusunan kode. untuk memisahkan sisi klien aplikasi dari sisi server. Hal ini memungkinkan pekerjaan pengembangan maju secara paralel dan memungkinkan penggunaan kembali kedua sisi. Menyediakan struktur untuk perjalanan membangun aplikasi: mulai dari mendesain UI, menulis logika bisnis, hingga pengujian.

AngularJS mengimplementasikan pola MVC untuk memisahkan komponen presentasi, data, dan logika. Menggunakan injeksi ketergantungan, Angular menghadirkan secara tradisional sisi server layanan, seperti pengontrol yang bergantung pada tampilan, ke aplikasi web sisi klien. Akibatnya, banyak beban di server bisa dikurangi.

Persyaratan Tools untuk Angular

Dalam menggunakan Angular, ada beberapa tools yang diperlukan:
  1. Aplikasi Browser, untuk menampilkan keluaran dari program Angular yang dibuat.
  2. Editor, untuk menuliskan program Angular. Yang digunakan adalah VS Code
  3. Node.js, sebuah runtime JavaScript.
  4. Package Managers seperti NPM atau Yarn, untuk menginstall library yang memiliki banyak dependency.
  5. Angular CLI, untuk membuat proyek baru dari awal dan mengelolanya sepanjang siklus pengembangan web.

Untuk meng-install aplikasi Angular, pastikan tools yang dibutuhkan telah tersedia di computer. 
  1. Download dan install NodeJS. Link Download: https://nodejs.org/en/download/
  2. Instalasi NodeJS akan turut meng-install package manager NPM.
  3. Gunakan perintah node –v pada terminal untuk mengecek hasil instalasi NodeJS.
  4. Gunakan perintah npm –v pada terminal untuk mengecek hasil instalasi NPM.

Instalasi Angular

Instalasi Angular CLI dengan menggunakan package manager NPM.
  1. Gunakan instruksi terminal: npm install –g @angular/cli
  2. Cek hasil instalasi dengan instruksi terminal: ng –version
Tools Dan Instalasi Angular

Memulai Proyek Angular
  1. Buka terminal pada folder yang disiapkan untuk membuat proyek Angular.
  2. Jalankan instruksi ng new proyek-pertama.
    • Pada pertanyaan Angular Routing, masukkan karakter Y dan untuk pilihan tipe styling, pilih CSS.
    • Selanjutnya proses pembuatan proyek-pertama akan dijalankan.
  3. Berikut-nya masuk ke folder proyek-pertama yang telah dibuat.
  4. Jalankan command ng serve untuk menjalankan aplikasi angular. Tools Dan Instalasi Angular
  5. Setelah menjalankan instruksi ng serve dan muncul kalimat compiled successfully pada terminal, buka aplikasi browser dan masukkan url http://localhost:4200
  6. Pada browser akan tampil halaman angular seperti pada gambar berikut:Tools Dan Instalasi Angular
  7. Untuk menghentikan instruksi ng serve, tekan ctrl-C.Tools Dan Instalasi Angular

Daftar instruksi Angular CLI yang digunakan dalam pengembangan front-end adalah :
  1. ng new - untuk membuat proyek aplikasi angular.
  2. ng generate - untuk membuat components, routes, services dan pipes.
  3. ng serve - untuk melihat hasil pengembangan aplikasi Angular pada computer lokal.
  4. Test, Lint - untuk menjalankan unit tests, end-to-end tests atau linter Angular.
  5. ng build - untuk meng-compiles aplikasi Angular dan hasilnya disimpan pada folder dist/ pada path yang diberikan.
  6. Lebih lengkap, daftar instruksi Angular CLI dapat dilihat pada link: https://angular.io/cli