AngularJS Basic(HW)

AngularJS

• AngularJS memperluas HTML dengan Atribut-atribut baru.
• AngularJS sangat sempurna untuk Single Page Applications(SPAs).
• AngularJS sangat mudah untuk dipelajari.

Pengertian:

AngularJS adalah sebuah framework javascript yang dikembangkan atau dibangun oleh Google. AngularJS menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah dikembangkan. Sampai saat ini AngularJS sudah menjadi salah satu framework javascript yang paling popular dan sangat banyak digunakan oleh para developer di seluruh dunia untuk membangun aplikasi. Kehandalan dari AngularJS sendiri tidak bisa diragukan lagi, salah satu factornya karena dikembangkan oleh parah ahli dari Google. AngularJS juga menyediakan panduan cara penggunaannya pada situs resmi AngularJS. 

Untuk panduan penggunaan AngularJS yang disediakan oleh AngularJS dapat di lihat pada link dibawah. Dan AngularJS juga digunakan untuk membangun aplikasi yang bersifat Single Page Application. Sama seperti library JavaScript lainnya, sebelum mulai menggunakan AngularJS untuk membangun aplikasi yang harus dilakukan pertama kali adalah menginstall atau menghubungkan project dengan AngularJS. Download AngularJS disitus resminya…

download angular

Cara menggunakan AngularJS:

Buat file html seperti dibawah ini, inputkan <script src=”nama file AngularJSnya”> <script> pastikan bahwa html dan angular.js – nya dalam satu folder, jika tidak masukkan beserta lokasinya file tsb…

kemudian taruh di localhost Anda contoh localhost saya ada di “C:\xampp\htdocs”… *pada coding dibawah ini masih bisa dijalankan dimana saja

Hasilnya:

 Penjelasannya:

Perhatikan contoh diatas pada html diatas ada ditambahkan “ng-app”, itu digunakan untuk memperkenalkan kepada browser bahwa ini menggunakan AngularJS…

Syntax “{{}}” berfungsi untuk menampilkan apa yang ingin ditampilkan didalamnya… kemudian perhatikan lagi  “{{ 25 + 25 }}” hasilnya langsung ditampilkan jika kita menggunakan operator aritmatika.

Cotoh lain:

Hasilnya:

Penjelasan:

Pada gambar diatas, Anda bisa menaruh “ng-app” yang ada dihtml tadi pada div Anda.

Dapat dilihat bahwa input type text yang ada diatas diberi (ng-model=”nama”) ini digunakan agar pada saat ingin menampilkan nama, kita cukup gunakan ng-model (variable pada AngularJS) sebagai pemberi nilai pada HTML (input, select, textarea) untuk mengaplikasikan data sama seperti “id=…” setelah itu ditampilkan hanya dengan menaruh nama variable itu ke dalam syntax “{{}}”….

AngularJS memperluas HTML

AngularJS memperluas HTML dengan “ng-…”

ng-app mendefinisikan aplikasi pada AngularJS

ng-model penghubung pada HTML sebagai control (input, select,textarea) untuk AngularJS.

ng-bind menghubungkan data ke tampilan HTML

AngularJS Directives

Sama seperti yang sudah kamu lihat, AngularJS adalah penghubung atribut HTML dengan prefix ng.

Ng-init sebagai peng-initial variable AngularJS.

Hasilnya:

AngularJS Aplikasi

AngularJS modul = menentukan aplikasi AngularJS.

AngularJS controller=mengendalikan aplikas AngularJS.

Ng-aplication direktif mendefinisikan aplikasi, ng-controller direktif mendefinisikan controller.

Module pada AngularJS untuk menentukan aplikasi.

bagaimana?? mudah bukan?

src : w3schools.com