24/10/17

Langkah Mudah, Tutorial Angular 4 Untuk Beginner

Tutorial angular 4. Angular 4 merupakan versi terbaru dari Angular saat ini. Angular sendiri merupakan Javascript Framework, dimanfaatkan untuk pembuatan reactive SPA (Single Page Application). Adapun Single Page Application ini yaitu aplikasi yang berbasis web, dalam hal ini hanya ada 1 halaman web saja. Saat pengguna berinteraksi dengan situs web, tak semua halaman dapat dimuat, namun hanya berupa component yang diperlukan saja yang dapat direload.

Kenapa Memilih Angular 4?
Angular 1 disebut juga sebagai Angular JS, pengertiannya yaitu Javascript framework yang begitu populer, bahkan telah dirilis sejak beberapa tahun lalu. Untuk angular 2 sendiri hanya disebut sebagai Angular saja, dimana versi ini berbeda dari Angular JS, mempunyai struktur berbeda dibandingkan AngularJS. Versi Angular ini memanfaatkan Typescript dalam pemakaiannya, dan mempunyai struktur berbentuk per component pada penerapannya. Berbeda lagi dengan Angular 4, sebagai update Angular 2. Kenapa tidak ada Angular 3? Sebab Angular 3 ini telewati akibat adanya konflik yang terjadi dalam version number.



Tutorial Membuat Project Menggunakan Angular 4
Pada tutorial Angular 4 kali ini, akan dijelaskan tentang cara membuat sebuah project menggunakan Angular 4. Adapun langkah-langkahnya adalah :
  1. Download terlebih dulu Node.JS. Node JS biasanya mempunyai Node Package Manager atau NPM yang nantinya digunakan untuk mengunduh Angular CLI. Adapun Angular CLI ini adalah tools yang mempermudah pembuatan aplikasi memakai Angular.
  2. Sesudah Nofe JS terunduh, maka Anda bisa melihat versi pada Node JS serta NPM memakai perintah : 
    • npm-v 
    • node-v
  3. Selanjutnya unduh Angular CLI, dengan cara masuk menuju terminal (Linux) bisa juga ke command prompt untuk pengguna Windows.
  4. Langkah selanjutnya, sesudah mengunduh Angular CLI, Anda bisa melakukan project Angular, dengan mengeksekusi perintah dari command prompt yang terdapat dalam folder yang mana project tersebut akan diletakkan. Dengan perintah di bawah ini :
  5. ng new <app_name>, Anda bisa mengubah <app_name> berdasarkan nama project Anda. Lalu tunggu hingga beberapa waktu sampai proses unduhan selesai. Sesudah itu, masuk menuju folder <app_name> yang tadi.
  6. Berikutnya untuk dapat menjalankan aplikasi, bisa dilakukan dengan cara mengeksekusi perintah : ng serve
  7. Saat dieksekusi biasanya muncul tampilan output. Bisa Anda lihat jika aplikasi berjalan di port 4200.

Mengenal CSS Dalam Angular 4
Dalam Angular 4, apabila Anda memakai Angular 4 CLI, ketika generate project di comand line atau terminal, maka angular secara default juga dapat membuat file berupa CSS Standard. Sehingga Anda tak perlu membuatnya lagi dengan manual. Lalu, jika ingin memakai SCSS atau SASS bagaimana? Untuk membuat semua itu, tentu susah bisa digunakan di angular 4, Anda cukup menambahkan perintah di bawah ini ketika Anda melakukan generate project di comand line :
//starting a project with standard css>ng new project name//starting a project with SASS>ng new project-name –style=sass//starting a project with SCSS>ng new project-name –style=scss

Itulah tutorial Angular 4 mengenai cara membuat file CSS standard dengan menggunakan Angular 4!