2. Menambah Component dan Mengatur Routing di Angular 12

    

    Sebelumnya saya sudah share cara bagaimana memulai membuat aplikasi dengan angular. sekarang adalah lanjutan tutorial bagaimana caranya menambah component dan mengatur routing di dalam angular. pada tutorial ini saya menggunakan angular versi 12.4 (terbaru saat ini).

1. Cara Menambah Component di Angular

    Component pada angular merupakan file-file yang di tambahkan secara otomatis melalui kode yang ditulis pada terminal atau command promp. Dan selanjutnya file-file tersebut dapat di buat routing atau dihubungkan satu sama lain melalui akses url. berikut adalah kode cara menambah component:

ng generate component namacomponent

pada tutorial ini, saya akan menambahkan component login dan registrasi ke dalam folder auth. sehingga kode nya menjadi seperti ini :

ng generate component auth/login
ng generate component auth/registrasi

ketikan kode di atas ke dalam terminal atau command promp, dan hasilnya akan seperti ini:

jika berhasil, maka akan terbuat file-file seperti dibawah ini secara otomatis:

2. Cara Mengatur Routing di Angular

    Untuk membuat routing di angular, ikuti cara-cara berikut ini:

a. Mengubah isi file app.component.html

buka file app.component.html dan hapus semua isi kode nya. kemudian copy dan pastekan kode ini :

<router-outlet></router-outlet>

b. Menambah kode di app-routing.module.ts

buka file app-routing.module.ts dan isikan kode dibawah ini :

const routes: Routes = [

  {

    path :'login',

    component :LoginComponent

  },

  {

    path :'registrasi',

    component :RegistrasiComponent

  }

];

jangan lupa importkan component LoginComponet dan RegistrasiComponet seperti dibawah ini :

import { LoginComponent } from './auth/login/login.component';

import { RegistrasiComponent } from './auth/registrasi/registrasi.component';

jika sudah, simpan semua perubahan dan buka browser dengan url localhost:4200/login

jika berhasil maka akan tampil seperti diatas.

jika url nya localhost:4200/registrasi maka tampilanya seperti ini:

Cukup sekian materi tutorial kali ini. simak terus untuk lanjutan tutorialnya.

#angular #routing #component

1. Membuat Aplikasi dengan Angular 12

 

    Untuk memulai membuat aplikasi dengan angular, kalian harus sudah menginstall framework angular terlebih dahulu di komputer/laptop kalian. jika belum silahkan kunjungi tutorial Cara instalasi angular CLI.

Cara Membuat Aplikasi dengan Angular 12

    Mari buka command promp / terminal kalian kemudian tentukan lokasinya dimana kalian akan menyimpan aplikasinya. sebagai contoh saya taruh di drive D dengan nama folder ANGULAR. kemudian kalian pastekan kode dibawah ini :

ng new project-angular1

Untuk nama project-angular1 bisa kalian ganti sesuai nama aplikasi yang kalian inginkan, karena itu akan menjadi nama folder penyimpan script coding kalian. 

Untuk contoh tampilanya seperti ini :

Kemudian kalian akan di tanya apakah akan menggunakan routing? dan untuk css nya mau menggunakan ekstensi apa? di situ ada pilihan (SCSS, SASS, LESS) 

kalian ketik saja y untuk routing nya

dan kalian SCSS untuk ekstensinya dengan cara scroll (klik arah panah bawah untuk memilih ekstensi SCSS) dan enter.

untuk tampilanya akan seperti ini :

silahkan kalian tunggu hingga proses instalasi packages nya selesai. biasanya akan memakan waktu yang cukup lama.. jika sudah berhasil maka akan seperti ini :

jika sudah, silahkan kalian masuk ke dalam folder aplikasi kalian (disini penulis menamakan aplikasinya project-angular1). dengan cara :

cd project-angular1

setelah masuk ke folder aplikasinya, mari jalankan / generate aplikasinya agar bisa diakses di brower lokal. caranya :

ng serve --open

jika kalian menemui error seperti ini:

kalian bisa mengatasinya dengan menjalankan generate dengan kode ini :

ng serve --host 0.0.0.0

dan tampilanya akan seperti ini jika sukses :

setelah itu, kalian buka browser dan search ke url localhost:4200 .

jika berhasil maka tampilan default aplikasi kalian akan seperti ini :

sampai disini kalian sudah berhasil membuat aplikasi dengan angular, tetapi masih dengan tampilan defaultnya.

selanjutnya akan saya share tutorial lanjutanya, jadi simak saja..

#angular #membuataplikasi

Cara Instalasi Angular CLI

 

    Angular merupakan framework web developer yang menggunakan bahasa javascript. bagi kalian yang ingin mempelajari angular terlebih dahulu mari kita berkenalan dengan framework ini, karena tak kenal maka tak sayang...

    Angular mempunyai banyak kelabihan diantaranya bisa menjalankan metode lazy load. lazy load adalah metode penyederhanaan akses yang dilakukan browser sehingga dalam me load script menjadi lebih ringan karena yang di load hanya yang akan ditampilkan saja.

Cara instalasi Angular dengan CLI

    Sebelum kalian melakukan instalasi angular, terlebih dahulu kalian harus sudah menginstall node js dan npm package manager. biasanya npm sudah satu paket dengan node js. bagi kalian yang belum install node js silahkan kunjungi web resminya di https://nodejs.org/. untuk versi terbaru node js saat ini (saat penulis membuat postingan) adalah versi 14.17.3. tetapi bagi kalian yang menggunakan OS windows 7 kalian hanya bisa install node js versi dibawah 14. sesuai pengalaman, penulis rekomendasikan untuk install node js versi 12.22.1 saja. karena pada tutorial kali ini penulis juga menggunakan versi tersebut agar kalian bisa mengikuti tutorial ini tanpa kendala. untuk cara install node js silahkan searching sendiri ya... kalo sudah berhasil install node js bisa di cek versinya dengan cara :

node -v

npm -v

    Setelah itu mari kita install angular nya dengan cara membuka command promp kemudian pastekan kode dibawah ini :

npm install -g @angular/cli

tunggu hingga proses instalasi selesai.

oh ya, untuk versi terbaru saat penulis membuat postingan ini adalah angular versi 12.4..

penulis akan lanjutkan tutorial selanjutnya, jadi ikuti saja..

cukup sekian untuk postingan kali ini sampai jumpa di tutorial selanjutnya..

Daftar Isi Tutorial Angular :

# Cara Instalasi Angular CLI

1. Memulai Membuat Aplikasi dengan Angular 12

2. Menambah Component dan Mengatur Routing di Angular 12

3. Membuat Form Login dan Registrasi dengan Syncfusion di Angular 12

4. Membuat Sidebar Menu dengan Syncfusion di Angular 12

5. Membuat Server dengan Node JS dan Mysql

#belajarangular #angular #instalasiangular