Langsung ke konten utama

ANGULAR I|| First Project on Angular

Selamat Pagi Para Pecinta Coding, kali ini admin akan berbagi mengenai FrameWork JavaScript yang lagi tren yaitu Angular. Oke Langsung ke pembahasan aja ya.

Angular 

Angular adalah PlatForm aplikasi Front-End yang dibuat untuk memudahkan dalam membangun suatu aplikasi baik berupa web, mobile atau pun dekstop yang mempunyai lisensi gratis (Open Source).
Angular dikembangakan oleh team Google maupun platform komunitas open source angular lainya. Angular sendiri sudah menggunakan TypeScript dalam pengembanganya yaitu pengembangan dari bahasa JavaScript yang merupakan bahasa utama yang digunakan dalam development web.

Sebelum Memulai Angular Project


Untuk menggunakan Angular kita Perlu Menginstal environment yaitu node.js dan npm package manager.

Node.js

Angular membutuhkan Node.js versi 8.x atau 10.x.

Untuk memeriksa versi Anda, jalankan "node -v" di terminal / jendela konsol (tanpa tanda kutip).

Untuk mendapatkan Node.js, pergi ke nodejs.org.

npm pakcage manager

Angular, Angular CLI, dan Angular apps bergantung pada fitur dan fungsionalitas yang disediakan oleh library yang tersedia sebagai paket npm. Untuk mengunduh dan menginstal paket npm, Anda harus memiliki pengelola paket npm.

Untuk memeriksa apakah Anda memiliki klien npm yang diinstal, jalankan "npm -v" di terminal / jendela konsol.


Install Angular


Step 1. Install Angular

Kita akan sering menggunakan cli dalam proses installasi maupun aktivitas lain untuk menjalankan command pada angular.
Untuk menginstall angular versi global kita dapat menggunakan command pada terminal yaitu :

npm install -g @angular/cli


Step 2. Membuat Workspace dan Initial baru pada Angular

Workspace yaitu folder dimana file project angular kita tersimpan didalamnya.
Untuk membuat workspace dan initial app project pada angular
1. Run command pada cli ng new dengan nama my-app seperti terlihat dibawah:

ng new my-app


2. ng new command promts yaitu untuk menginformasikan features yang akan di include pada initial project. Accept by default dengan menekan Enter.
Installasi Angular CLI dan npm package ini memerlukan beberapa menit, tunggu saja higga proses nya selesai.

  • Ini juga membuat workspace berikut dan file starter project:
  • new workspace, dengan root folder bernama my-app
  • initial skeleton app project, atau disebut my-app juga tetapi dalam sub folder src
  • end-to-end test project dalam subfolder e2e
  • configuration file yang berhubungan dengan project itu sendiri


Initial app project berisi simple Welcome app, yang siap untuk dijalankan

Step 3. Serve the application

Angular termasuk sebuah server, maka kita dapat membuat dengan mudah server membangun pda aplikasi local kita.
1. Pindah ke direktori my-app

2. jalankan serve dengan menggunakan command ng server dengan --open option

cd my-appng serve --open


ng serve command akan menjalankan atau memulai server, melihat file kita, dan me-rebuilds aplikasi yang telah kita buat.
--open (atau -o) akan secara otomatis untuk membuka browser kita pada : http://localhost:4200/.
Lihat, jika berhasil browser akan menampilkan message :


Nah jika muncul tampilan tersebut pada browser kita maka menandakan kalau project angular kita telah berhasil untuk dibuat.

Step 4. Edit component Angular

Componet merupakan building block yang paling dasar dari Aplikasi Angular. Component ini menampilkan data pada layar, mengamati dan menyimak inputan user, dan melakukan aksi berdasarkan inputan tersebut.
Sebagai bagian dari initial app, CLI created Angular component. Yaitu root component dengan nama app-root.
1. Buka ./src/app/app.component.ts
2. Rubah properti title dari my-app menjadi "My First Angular App"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

Browser akan otomatis mereload, dan tampilan ya akan otomatis berubah;
3. Buka ./src/app/app.component.css dan beri beberapa pengaturan style css. 

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

Maka akan menghasilkann tampilan seperti pada gambar.



Oke demikian gan tutorial pertama Project Angular, pada postingan selanjutnya kita kan memnbahas lebih lanjut mengenai Angular. Terimakasih silahkan berikan komentar anda dibawah.
Label:

Komentar

Posting Komentar

Saya senang mendapatkan feedback apapun dari pembaca semua.

Postingan populer dari blog ini

Algoritma dan Program untuk Pemesanan Tiket Kereta Api.

Assalamualaikum.. Apa kabar kalian semua udah lama ni saya gak posting materi saking sibuknya.. kali ini admin mau posting materi pemrograman ni semoga bermanfaat.. 1.Algoritma Pemesanan Tiket Kereta Api 1.Deklarasikan Variabel, Integer, Menu. 2.Deklarasikan Var Float, Bisnis, ekonomi,eksekutip,jumlah, hasil,total diskon 3.Rute             1. Lampung-Palembang             2.Lampung-Jakarta 4.Jenis tiket : 1.       Kelas Eksekutif Ø   Jika tiket >=10,maka dapat diskon 20% dari harga total Ø   Jika tiket>=5,diskon 10% dari total harga tiket Ø   Jika <5, maka tidak mendapatkan diskon 2.       Kelas Bisnis Ø   Jika tiket >=10,diskon 15% Ø   Jika tiket >=5, diskon 10% Ø   Jika <5, tidak dapat diskon 3.       Kelas Ekonomi Ø...
1 komentar
Baca selengkapnya

Program Sederhana Untuk Menentukan Lulus Dan Tidak Lulus

Assalamualaikum. Sore ini admin mau share program sederhana untuk menentukan Lulus/Tidak Lulus, yaitu dengan cara memasukan sebuah nilai angka ke dalam program. 1.Coding Program dengan Bahasa C++   #include <iostream> #include <cstring> using namespace std; int main () {     int nilai;     //char LULUS, TIDAK_LULUS;     cout <<"    MENENTUKAN KELULUSAN";     cout<<endl;     cout<<endl;     //meminta input dari keyboard     cout <<"    Masukkan Nilai Anda : ";     cin >>nilai;         //melakukan pengecekan terhadap nilai MENGGUNAKAN OPERATOR TERNARY     cout <<(nilai>=75 ? "    ANDA LULUS" : "    ANDA TIDAK LULUS"); return 0; } 2.Hasil Execute Program Semoga Bermanfaat :)
Posting Komentar
Baca selengkapnya

Back-Up Database pada SQL Server 2000

  Cara Backup Database Pada SQL Server 2000 Sebagai seorang programmer kita pasti selau berurusan dengan database salah satunya adalah SQL Server. Untuk membuat database kita selalu aman dari gangguan dan error seperti database suspect, server rusak, hadrdisk mati bahkan hilang atau dicuri maka salah satu cara antisipasinya yaitu dengan melakukan back up. Dalam melakukan auto backup ada beberapa hal yang harus kita perhatikan seperti folder backup dan lain sebagainya. Artinya secara real time kemungkinan kecil kita bisa mendapatkan database terbaru sebelum terjadi kerusakan, akan tetapi dengan antisipasi ini kita tidak akan kehilangan data secara besar-besaran. Sedangkan untuk melakukan backup database di SQL Server 2000 langkah-langkahnya yaitu sebagai berikut  : 1. Pertama buka Enterprise Manager di SQL 2. Pilih Microsoft  SQL Server-SQL Local Group (local)(windows NT)-Database 3. Klik kanan pada database yang akan dibackup, missal saya ingin memback...
Posting Komentar
Baca selengkapnya