​AngularJS adalah salah satu framework javascript buatan Google yang cukup terkenal yang banyak digunakan saat ini untuk menangani proses di bagian front end. AngularJS memungkinkan kita untuk membangun web apps yang interaktif dengan konsep arsitektur MVC (Model View Controller) dan MVVM (Model View – ViewModel).

Sampai saat ini angularjs sudah menjadi salah satu framework javascript yang paling populer dan sangat banyak digunakan oleh para developer di seluruh dunia untuk membangun aplikasi. kehandalan dari angularjs sendiri tidak bisa di ragukan lagi, salah satu faktor nya karena di kembangkan oleh para tim ahli dari google. angular JS juga menyediakan panduan cara penggunaannya pada situs resmi angularJS.

 

 

Selanjutnya kita akan membuat page sederhana menggunakan angularjs. Terdapat beberapa peralatan yang digunakan, yaitu sebagai berikut :

• Teks Editor (Rekomendasi: VS Code)

Text Editor adalah suatu software aplikasi atau suatu program komputer yang memungkinkan Anda sebagai penggunanya untuk membuat, mengubah atau mengedit file teks yang ada berupa plain text.

• Nodejs

Node.js adalah perangkat lunak yang didesain untuk mengembangkan aplikasi berbasis web dan ditulis dalam sintaks bahasa pemrograman JavaScript. ode.js dapat berjalan di sistem operasi Windows, Mac OS X dan Linux tanpa perlu ada perubahan kode program. Node.js memiliki pustaka server HTTP sendiri sehingga memungkinkan untuk menjalankan server web tanpa menggunakan program server web seperti Apache atau Nginx.

• NPM

The JavaScript node package manager , biasanya disingkat dalam semua huruf kecil sebagai npm, adalah metode default untuk mengelola paket di lingkungan runtime Node.js. Itu bergantung pada baris perintah dan database yang terdiri dari paket publik dan premium yang dikenal sebagai registri npm. Pengguna dapat mengakses registri melalui klien dan menelusuri banyak paket yang tersedia melalui situs web npm. NPM dan registrinya dikelola oleh npm, Inc.

• Angular Cli

Angular CLI adalah seperangkat tools untuk pembuatan rapid prototipe, perancah aplikasi yang mudah, dan manajemen proyek yang efisien. Angular CLI mempercepat dan mempermudah pengembangan proyek Angular.js berkat koleksi fiturnya yang hebat.

CARA INSTALASI DI UBUNTU

Langkah Pertama : Install Node.js

Karena disini saya menggunakan sistem operasi linux, maka untuk menginstall Node.js tinggal menmggunakan perintah pada terminal

Jika sudah selesai menginstall, maka kita akan mengecek apakah sudah berhasil menginstall nodejs pada laptop.

Pada gambar  diatas menunjukkan telah berhasil menginstall nodejs pada laptop.

 

Langkah kedua : Install Angular.js

Setelah node.js terinstall, sekarang kita akan menginstall angular.js. Selanjutnya buka terminal / CMD (Command Line).

Dalam menginstall angular.js saya melalui npm jadi di sini saya mengetikkan perintah : npm install -g @angular/cli, seperti pada gambar dibawah ini.

Ketik pada perintah yang ada pada gambar diatas, lalu enter. Maka akan proses instalasi

 

Langkah ketiga : Cek Installasi Angular.js

Setelah proses install angular.js selesai, selanjutnya cek apakah sudah berasil terinstall atau belum dengan cara menggunakan terminal /  CMD (Command Line) dengan mengetikkan perintah : ng version, seperti pada gambar dibawah ini.

berhasil install

 

Langkah keempat : Membuat project baru menggunakan Angular.js

Buka terminal / CMD (Command Line), kemudian ketikkan perintah untuk membuat project baru yaitu : ng new, dan perlu diingat harus menggunakan huruf kecil tanpa huruf kapital. Kali ini saya membuat project, yaitu ng new AfrizalMY17081010092.

Setelah itu terdapat pilihan, seperti gambar dibawah ini.

Pada gambar diatas, terdapat menu routing dan stylesheet.
Dalam projek ini saya memakai routing karena jika suatu saat saya mengembangkan lagi menggunakan route, dan stylesheet saya masih menggunakan CSS.

Tunggu beberapa waktu sampai project berhasil dibuat.

Lalu kita akan masuk ke folder projek dan menjalankan server. Dengan perintah “ ng serve “ .

Langkah selanjutnya yaitu, kita dapat mengetahui cara mengakses project yang telah kita buat melalui http://localhost:4200/. Tampilan seperti pada gambar dibawah ini.

Tahap berikutnya yaitu, kita akan mengedit project dan menyesuaikan dengan yang kita inginkan. Disini saya membuat output dengan base layout dari tugas UTS mata kuliah framework(linknya). Sekaligus saya akan menerapkan component pada angular CLI ini.

Pada gambar diatas adalah rencana layout yang saya tampilkan.

 

Langkah kelima : Menambahkan Bootstrap pada Angular CLI

Karena pada layout tugas UTS menggunakan bootstrap, maka disini saya harus menginstall bootstrap untuk angular. Ketikkan perintah npm install bootstrap .

ketika sudah terinstall, langkah selanjutnya yaitu konfigurasi pada angular.json untuk memanggil bootstrap tsb. Karena pada projek UTS sebelumnya memiliki CSS sendiri, maka saya panggil juga dengan nama custom.css pada folder src/css.

"styles": [
             "node_modules/bootstrap/dist/css/bootstrap.min.css",
             "src/styles.css",
             "src/css/custom.css"
           ],

Selanjutnya, yaitu inisialisasikan lagi pada file src/styles.css .

/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~css/custom.css';

Bootstrap telah terpasang pada projek angular kita.

 

Langkah keenam : Membuat Component pada Angular CLI

Pada projek ini saya menerapkan component, yang berguna membagi setiap bagian app, biodata, dan pendidikan. pada gambar dibawah ini adalah ilustrasi componentnya.

Ketikkan perintah “ng g component ”. Perintah ini akan membuat component pada projek kita.

Dari hasil perintah diatas, maka akan membuat tiap nama componentnya pada folder src. Berikut struktur foldernya.

Setelah berhasil membuat component selanjutnya kita akan layouting. Berikut adalah kode tiap componentnya.

src/app/app.component.html.

Langkah selanjutnya, kita akan menginisialisasikan tiap component yang kita buat tadi pada file src/app/app.module.ts.

Kita import terlebih dahulu,

import { BiodataComponent } from './biodata/biodata.component';
import { PendidikanComponent } from './pendidikan/pendidikan.component';

lalu tambahkan pada NgModule declarations,

declarations: [
   AppComponent,
   BiodataComponent,
   PendidikanComponent
 ],

Dengan begitu kita telah selesai layouting menggunakan component pada angular CLI.

 

Langkah ketujuh : Hasil akhir

Disini saya menambahkan foto saya dan logo web blog saya, dengan cara copy file gambar yang dipilih, lalu paste pada folder app/assets . Maka hasilnya pada gambar dibawah ini.

Source code bisa didapatkan pada github saya.

https://github.com/zaLabs02/my-first-angular

 

​