Instalasi Angular - adeliaputri/tekwebuad_1800016056 GitHub Wiki

APA ITU ANGULAR JS ?

 **YUK KEPOIN APA ITU ANGULAR JS DAN CARA INSTALLASINYA 👍**

Angular JS merupakan framework javascript open souce yang dirilis oleh google pada tahun 2009. Konsep dari Angular JS adalah meningkatkan fungsi dari HTML untuk membangun web app. Bayangkan awalnya HTML hanya digunakan untuk membuat halaman website statis dan kini bisa berfungsi untuk membuat web app dengan menggunakan Angular JS.

  KEUNGGULAN ANGULAR JS :

  1. Mengenalkan browser dengan sintak HTML baru

    HTML5 telah menawarkan elemen baru seperti video, audio, canvas dan sebagainya. Dengan Angular JS kita dapat menambah banyak lagi elemen baru yang dimengerti oleh browser seperti draggable yang berfungsi agar elemen bisa di drag, zippy yang membuat akordion, juga sintak bisa dibuat dalam bahasa indonesia seperti yang berfungsi jika diklik maka elemen akan disembunyikan. Fungsi ini disebut Directive. Kitalah yang bertanggung jawab dalam pembuatan atau penambahan fungsi elemen HTML atau dengan kata lain kita mengajari browser mengerti bahasa sintak HTML yang kita buat.

  2. HTML Template

    Template yang digunakan Angular JS adalah template HTML biasa dengan penambahan ekspresi. Tidak perlu template yang memiliki engine khusus

  3. Dependency Injection

    Developer dapat membuat beberapa komponen kode yang bisa digunakan fungsinya berulang kali. Komponen ini disebut juga reusable komponen. Developer dapat memanggil komponen yang dibuat secara terpisah. yaitu No data.

BERIKUT INI MERUPAKAN LANGKAH-LANGKAH MENGINSTALL ANGULAR DAN MEMBUAT FILE BARU :

  1. Sebelumnya pastikan PC anda sudah terinstall node js dan npm. jika belum silahkan download terlebih dahulu di https://nodejs.org/en/download/

  2. Selanjutnya buka command prompt untuk mengecek apakah node js dan npm benar-benar sudah terinstall. Ketikkan perintah node -v dan npm -v untuk memastikan node js dan npm sudah terinstall atau belum

  3. Kemudian kita dapat melakukan install angular melalui command prompt dengan memasukkan perintah : npm install -g @angular/cli.

Dapat dilihat gambar dibawah ini merupakan hasil ketika kita sudah memasukkan perintah npm install - g @angular/cli.

Hal yang paling penting untuk diperhatikan adalah pastikan perintah sudah sesuai, karena ketika kita memasukkan perintah yang salah seperti npm install - g @ angular/cli (maka akan terjadi error), kemudian pastikan juga anda sudah terkoneksi dengan jaringan internet. 1

2

  1. Langkah selanjutnya masukkan perintah ng --version berfungsi untuk melihat secara detail angular yang sudah terinstall . dapat dilihat hasilnya pada gambar di bawah ini . 3.

  2. Langkah berikutnya adalah membuat projek baru dengan nama yang diinginkan . contohnya saya ingin membuat projek dengan nama tekweb1800016056. Kita dapat memasukkan perintah ng new tekweb1800016056.

  • Kemudian jika sudah akan ada muncul pertanyaan seperti ini _would you like to add Angular routing ? (y/N) _. Maka masukkan atau ketikkan huruf y yang berarti yes.
  • Selanjutnya akan ada perintah untuk memilih format stylesheet yang diinginkan . disini saya memilih menggunakan format CSS. hasilnya akan terlihat pada gambar dibawah ini 4
  1. Selanjutnya untuk melihat hasil yang telah dibuat masukkan perintah : ng serve. Maka akan muncul hasil seperti ini. 5

SELANJUTNYA LANGKAH MELAKUKAN MODIFIKASI ATAU PENAMBAHAN FILE BARU :

  1. Kemudian buka lah pada google chrome atau app untuk mengakses website yang ada dengan mengetikkan : http://localhost:4200/ Maka akan muncul tampilan seperti ini 6

  2. Selanjutnya buka folder tekweb1800016056 - src - app . Kemudian buka seluruh file yang ada di folder app seperti gambar dibawah ini .

7

8

  1. Kemudian buka file app.component.ts , app.component.html dan file lain yang diperlukan untuk melakukan modifikasi 9

  2. Selanjutnya membuat file baru dengan nama Halaman-utama.html , masukkan isi dari hmtl tersebut 10

  3. Setelah halaman-utama.html dibuat, maka lakukan pengubahan dibagian file app.component.ts, ubah barisan templateUrl yang semula berisi pemanggilan terhadap file app.component.html menjadi pemanggilan file Halaman-utama.html yang telah dibuat tadi. 11

  4. Ada bagian index.html kita tidak perlu mengubah apapun. 12

  5. Langkah terakhir adalah melihat kembali web atau localhost:4200 yang telah dibuat. maka tampilannya akan seperti isi file dari Halaman-utama.html 13