Belajar AngularJS : Membuat Hello World - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Belajar AngularJS : Membuat Hello World, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel AngularJS,
Artikel Pemrograman Web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Belajar AngularJS : Membuat Hello World
link : Belajar AngularJS : Membuat Hello World
Pada post kali ini saya akan sedikit membahas tentang angularJS. AngularJS adalah sebuah framework Javascript yang dibuat dan dikembangkan oleh google. Saat ini semakin banyak developer yang menggunakannya. Saya bukanlah seorang master dalam bidang angularjs ini, saya hanya ingin berbagi apa yang saya bisa. Saya memberi judul pada post ini dengan nama : Belajar AngularJS : Membuat Hello World, yang berarti bahwa post ini merupakan tutorial yang sangat dasar. Walau sangat dasar semoga ini menjad fondasi bagi kita yang ingin menguasai angularjs.
Tanpa berpanjang-panjang lagi, berikut langkah membuat aplikasi hello dengan menggunakan angularJS. Pertama, download angularJS terlebih dahulu di situs angularjs.org dan simpan file yang telah didownload tadi di dalam sebuah direktori (nama filenya bernama angular.js atau angular.min.js). Di dalam direktori tersebut, buat juga sebuah file .html kosong, dengan nama bebas sesuai kehendak.
Kedua, isi file tadi dengan kode seperti dibawah ini :
Catatan : angular.min.js diganti dengan angular.js jika file yang di download tadi adalah angular.js
Langkah selanjutnya, ubah <html> menjadi <html ng-app> dan tambahkan perintah sebagai berikut pada bagian body:
Tulis nama anda disini:
Dengan demikian, isi lengkap dari file tadi menjadi sebagai berikut:
Sekarang, silahkan buka file tadi melalui browser. Maka, ketika anda mengetikan nama anda pada textbox, nama anda akan otomatis muncul setelah kata "Apa kabar". Proses tampilnya nama anda setelah kata "Apa Kabar" murni dilakukan oleh javascript secara client side pada web browser.
Pada tag HTML diatas kita telah menambahkan ng-app. Apa itu ng-app? ng-app adalah suatu cara AngularJS mengetahui dimana AngularJS akan berjalan. Dalam kasus diatas, AngularJS akan berjalan pada seluruh bagian dari halaman yang kita buat karena kita menambahkannya pada tag <html> . Jika, kita menambahkan ng-app misalkan didalam sebuah tag <div>, maka AngularJS hanya akan berjalan di dalam tag div tersebut. Tambahan : kita perlu menambahkan id="ng-app" setelah ng-app tadi jika ingin berjalan pada enternet explorer.
Kita telah menambahkan atribut ng-model pada textbox sebagai berikut:
Adapun atribut ng-model digunakan untuk mendefinisikan sebuah model. Pada kasus diatas model dibuat dengan nama "nama". Ketika isi dari textbox bersangkutan diganti, maka value dari model tersebut juga akan berubah. Sedangkan, {{ nama }} digunakan untuk menampilkan data pada model "nama" tersebut.
Mungkin hanya itu saja sedikit penjelasan mengenai Cara Membuat Hello World dengan AngularJS, kurang lebihnya mohon maaf, wassalam.
Anda sekarang membaca artikel Belajar AngularJS : Membuat Hello World dengan alamat link https://dev-create.blogspot.com/2019/12/belajar-angularjs-membuat-hello-world.html
Judul : Belajar AngularJS : Membuat Hello World
link : Belajar AngularJS : Membuat Hello World
Belajar AngularJS : Membuat Hello World
 |
| Membuat Hello World |
Tanpa berpanjang-panjang lagi, berikut langkah membuat aplikasi hello dengan menggunakan angularJS. Pertama, download angularJS terlebih dahulu di situs angularjs.org dan simpan file yang telah didownload tadi di dalam sebuah direktori (nama filenya bernama angular.js atau angular.min.js). Di dalam direktori tersebut, buat juga sebuah file .html kosong, dengan nama bebas sesuai kehendak.
Kedua, isi file tadi dengan kode seperti dibawah ini :
<!DOCTYPE html> <html> <head> <title>Belajar Angular JS</title> <script src="angular.js" type="text/javascript"></script> </head> <body> </body> </html>
Catatan : angular.min.js diganti dengan angular.js jika file yang di download tadi adalah angular.js
Langkah selanjutnya, ubah <html> menjadi <html ng-app> dan tambahkan perintah sebagai berikut pada bagian body:
Tulis nama anda disini:
<input type="text" ng-model="nama" />
<h1>Apa Kabar {{ nama }}</h1>
Dengan demikian, isi lengkap dari file tadi menjadi sebagai berikut:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Belajar Angular JS</title>
<script src="angular.js" type="text/javascript"></script>
</head>
<body>
<input type="text" ng-model="nama" />
<h1>Apa Kabar {{ nama }}</h1>
</body>
</html>
Sekarang, silahkan buka file tadi melalui browser. Maka, ketika anda mengetikan nama anda pada textbox, nama anda akan otomatis muncul setelah kata "Apa kabar". Proses tampilnya nama anda setelah kata "Apa Kabar" murni dilakukan oleh javascript secara client side pada web browser.
Apa itu 'ng-app' ?
Pada tag HTML diatas kita telah menambahkan ng-app. Apa itu ng-app? ng-app adalah suatu cara AngularJS mengetahui dimana AngularJS akan berjalan. Dalam kasus diatas, AngularJS akan berjalan pada seluruh bagian dari halaman yang kita buat karena kita menambahkannya pada tag <html> . Jika, kita menambahkan ng-app misalkan didalam sebuah tag <div>, maka AngularJS hanya akan berjalan di dalam tag div tersebut. Tambahan : kita perlu menambahkan id="ng-app" setelah ng-app tadi jika ingin berjalan pada enternet explorer.
Apa itu 'ng-model' ?
Kita telah menambahkan atribut ng-model pada textbox sebagai berikut:
<input type="text" ng-model="nama" />
Adapun atribut ng-model digunakan untuk mendefinisikan sebuah model. Pada kasus diatas model dibuat dengan nama "nama". Ketika isi dari textbox bersangkutan diganti, maka value dari model tersebut juga akan berubah. Sedangkan, {{ nama }} digunakan untuk menampilkan data pada model "nama" tersebut.
Mungkin hanya itu saja sedikit penjelasan mengenai Cara Membuat Hello World dengan AngularJS, kurang lebihnya mohon maaf, wassalam.
Demikianlah Artikel Belajar AngularJS : Membuat Hello World
Sekianlah artikel Belajar AngularJS : Membuat Hello World kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Belajar AngularJS : Membuat Hello World dengan alamat link https://dev-create.blogspot.com/2019/12/belajar-angularjs-membuat-hello-world.html
