Setup Angular di OS Mac Mojave
Okayyy! post kali ini saya akan coba setup Angular framework di macbook pro dengan OS macOS Mojave. Langsung saja
- Install node.js, karena node.js adalah requirement untuk install Angular . Installer nya ada disini https://nodejs.org/en/. Setelah saya download saya dapat file node-v10.16.3.pkg.
- Buka file node-v10.16.3.pkg dan ikut langkah seperti gambar-gambar dibawah :
Dari gambar diatas terlihat installer tidak hanya akan meng-install Node.js tetapi npm juga. npm adalah package manager untuk Node.js. npm berguna untuk install package-package Node.js. Package Node.js itu semacam modul tambahan atau plugin untuk Node.js
Klik Continue seperti kalau install program lainnya ngak pernah di baca!.
Keluar pop up apakah kita setuju atau tidak setuju. Klik agree. Bagaimana kalau license tersebut dibawahnya terdapat paragraf :
“Anda bersedia menyembah setan”
Klik agree hiiiiiii!, Nerakaaaa!!!!.
Tunggu sampe selesai install nya.
Pastikan /usr/local/bin in your $PATH setting global variabel di-mac kamu, supaya bisa execute program dimana saja.
3. Install Angular.
Buka terminal dan ketik command dibawah :
npm install -g @angular/cli
Tunggu sampai selesai.
Setelah selesai install Angular seperti gambar diatas akan muncul
“Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. (y/N)”
Terserah anda lah mau yes or no . kalau pilih yes berarti anda setuju untuk share data dengan Angular Team google, mungkin untuk keperluan improvement Angular atau untuk keperluan intelejen heheheeh. Kadang sih suka saya pelesetkan jadi seperti ini.
Apakah anda bersedia google mata-matai. y/n? wkwkwkwk nerakaaaaa!
Untuk mengetahui apakah angular sudah ter-install ketikan perintah seperti dibawah
ng version
Setup environment Angular saya kira simple sekali dengan npm. Berikutnya ngoding time!!. Saya akan coba membuat sample kode angular untuk mengakses sebuat api yang saya buat mengunakan .NET Core. Kode API nya seperti kode dibawah.
Kode untuk class Buku seperti dibawah.
Contoh mengakses API tersebut dari browser dapat dilakukan dengan cara sebagai berikut :
https://localhost:5001/api/values/searchbuku?judul=jomblo&authors[0]=cecep&authors[1]=asep&authors[2]=trump&harga=25000
Saya akan coba consume http get API nya dengan menggunakan Angular framework.
- Create folder angularprojects, kemudian masuk kefolder tersebut.
2. Buat project baru angular dengan cara
ng new httgetsample
Saya memilih default y setiap ada pertanyaan dari command line kecuali yang mengenai share data dengan Angular Team hehehe maklum orang penting takut dimata-matai. Angular akan men-generate project httgetsample . Tunggu sampai selesai.
3. Kita mungkin perlu install tool untuk komunikasi format json. Ketik perintah sebagai berikut :
sudo npm install -g json-server
4. Saya akan mengunakan code editor Microsoft Visual Code. File->Open arahkan ke folder seperti gambar dibawah. Klik Open
4. Buka file app.module.ts. Tambahkan kode berikut
import { HttpClientModule } from '@angular/common/http';
Gunanya untuk menambahkan library yang berhubungan http request. Tambahkan HttpClientModule seperti dibawah.
@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,HttpClientModule],providers: [],bootstrap: [AppComponent]})
Kode dari app.module.ts seperti dibawah
5. Tambahkan file Buku.ts seperti dibawah kedalam App httpgetsample.
6. Edit file app.component.ts seperti dibawah
7. Edit file app.component.htm seperti dibawah
8. Kembali ke Terminal ketik perintah
ng serve
Aplikasi angular anda telah siap.
9. Buka browser dan ketik:
http://localhost:4200/
10. Klik TEST API akan muncul data seperti dibawah.
OKAYYYYY! sampe disini dulu. Pusing kan? mampus! salam NERAKAAAHHH NGODINGGGGG!