Cara yang baik untuk mulai belajar AngularJS adalah dengan membuat aplikasi klasik "Hello World!":
1. Buat file html menggunakan editor teks favorit Anda, misalnya: helloWorld.html.
2. Salin kode sumber berikut ke file HTML Anda.
3. Buka file HTML ini di browser web.
Kode Sumber:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html ng-app>
<head>
<skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
Halo {{'world'}}!
</body>
</html>
Harap jalankan kode di atas di browser Anda untuk melihat efeknya.
Sekarang mari kita lihat lebih dekat kode dan lihat apa yang terjadi. Saat halaman dimuat, tag Ng-App memberi tahu AngularJS untuk memproses seluruh halaman HTML dan mem-boot aplikasi:
Salinan kode adalah sebagai berikut:
<html ng-app>
Baris ini memuat skrip AngularJS:
Salinan kode adalah sebagai berikut:
<skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(Untuk detail tentang AngularJS yang menangani seluruh halaman HTML, silakan lihat Bootstrap.)
Akhirnya, tubuh dalam tag adalah templat untuk aplikasi, menunjukkan salam kami di UI:
Salinan kode adalah sebagai berikut:
Halo {{'world'}}!
Perhatikan bahwa konten {{}} yang ditandai dengan kawat gigi ganda adalah ekspresi terikat dalam salam, yang merupakan string sederhana 'dunia'.
Di bawah ini, mari kita lihat contoh yang lebih menarik: ikat ekspresi dinamis pada teks ucapan kami menggunakan AngularJS.
Halo Dunia AngularJS!
Contoh ini menunjukkan pengikatan data dua arah untuk AngularJS:
1. Edit dokumen HelloWorld.html dibuat sebelumnya.
2. Salin kode sumber berikut ke file HTML Anda.
3. Segarkan jendela browser.
Kode Sumber:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html ng-app>
<head>
<skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
Nama Anda: <input type = "Text" ng-Model = "yourname" placeholder = "world">
<Hr>
Halo {{youName || 'Dunia'}}!
</body>
</html>
Harap jalankan kode di atas di browser Anda untuk melihat efeknya.
Contoh ini memiliki catatan penting berikut:
1. Instruksi input teks <input ng-model = "youName" /> terikat pada variabel model yang disebut yourname.
2. Double Brace Mark Tambahkan variabel model Anda ke teks ucapan.
3. Anda tidak perlu mendaftarkan pendengar acara atau menambahkan penangan acara untuk aplikasi!
Sekarang coba ketikan nama Anda di kotak input dan nama yang Anda ketik akan segera diperbarui dan ditampilkan dalam salam. Ini adalah konsep pengikatan data dua arah AngularJS. Setiap perubahan pada kotak input segera tercermin ke variabel model (One Direction), dan setiap perubahan pada variabel model segera tercermin ke teks ucapan (arah lain).
Analisis Aplikasi AngularJS
Bagian ini menjelaskan tiga komponen aplikasi AngularJS dan menjelaskan bagaimana mereka memetakan ke pola desain model-view-controller:
Template
Templat adalah file yang Anda tulis di HTML dan CSS untuk menyajikan tampilan aplikasi. Anda dapat menambahkan elemen baru dan tag atribut ke HTML sebagai arahan untuk kompiler AngularJS. Kompiler AngularJS sepenuhnya dapat diperluas, yang berarti bahwa dengan AngularJS Anda dapat membangun tag HTML Anda sendiri di HTML!
Logika dan perilaku aplikasi
Logika dan perilaku aplikasi adalah pengontrol yang Anda tentukan dalam JavaScript. AngularJS berbeda dari aplikasi AJAX standar, Anda tidak perlu menulis pendengar atau pengontrol DOM karena sudah dibangun menjadi AngularJS. Fitur -fitur ini membuat logika aplikasi Anda mudah ditulis, menguji, memelihara, dan memahami.
Data model (data)
Model ini diperluas dari sifat -sifat objek yang dilingkup dengan AngularJS. Data dalam model mungkin objek JavaScript, array, atau tipe primitif, dan tidak masalah, penting bahwa mereka semua milik objek yang dilingkup dengan AngularJS.
AngularJS mempertahankan sinkronisasi dua arah antara model data dan antarmuka tampilan UI melalui ruang lingkup. Setelah keadaan model berubah, AngularJS akan segera menyegarkan yang dipantulkan pada antarmuka tampilan dan sebaliknya.
Selain itu, AngularJS juga menyediakan beberapa fitur layanan yang sangat berguna:
1. Layanan yang mendasarinya meliputi injeksi ketergantungan, XHR, cache, routing URL dan layanan abstrak browser.
2. Anda juga dapat memperpanjang dan menambahkan layanan aplikasi spesifik Anda sendiri.
3. Layanan ini dapat membuatnya sangat nyaman bagi Anda untuk menulis aplikasi web.