AngularJS Aplikasi
Sekarang adalah waktu untuk membuat AngularJS nyata aplikasi Web single-page (halaman aplikasi web, SPA) a.
AngularJS contoh aplikasi
Anda telah belajar pengetahuan yang cukup tentang AngularJS, Anda sekarang dapat mulai membuat aplikasi AngularJS pertama Anda:
catatan saya
Sisa Firman Hitungan:100
Menjelaskan aplikasi
AngularJS contoh
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Kepala>
<Body>
<Div ng-controller = "myNoteCtrl ">
<H2> catatan saya </ h2>
<P> <textarea ng-Model = "pesan" cols = "40" rows = "10"> </ textarea> </ p>
<P>
<Tombol ng-klik = "save ()"> Simpan </ button>
<Tombol ng-klik = "jelas ()"> Hapus </ button>
</ P>
<P> Jumlah karakter tersisa: <span ng-mengikat = "kiri ()"> </ span> </ p>
</ Div>
<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>
</ Body>
</ Html>
Coba »
Aplikasi Files "myNoteApp.js":
Kontroler File "myNoteCtrl.js":
$ Scope.message = "";
$ Scope.left = function () {kembali 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {alert ( "Catatan Disimpan");};
});
<Html> elemen aplikasi AngularJS: ng-app = "myNoteApp" wadah:
halaman <div> HTML di controller: ng-controller = "myNoteCtrl" lingkup:
ng model directive mengikat <textarea> untuk pesan variabel controller:
Dua acara ng-klik memanggil fungsi pengontrol yang jelas () dan menyimpan ():
<Tombol ng-klik = "jelas ()"> Clear </ button>
perintah ng-mengikat untuk mengikat fungsi pengontrol kiri () <span>, digunakan untuk menampilkan karakter yang tersisa:
Aplikasi file library yang dibutuhkan untuk melakukan setelah AngularJs memuat:
<Script src = "myNoteCtrl.js"> </ script>
Arsitektur Aplikasi AngularJS
Contoh di atas adalah AngularJS lengkap satu halaman aplikasi Web (halaman web aplikasi, SPA).
<Html> elemen berisi AngularJS aplikasi (ng-app =).
<Div> elemen mendefinisikan ruang lingkup (ng-controller =) AngularJS kontroler.
Aplikasi dapat dibuat dalam banyak controller.
File aplikasi (saya ... App.js) mendefinisikan penerapan kode model yang.
Satu atau lebih pengendali berkas (saya ... Ctrl.js) mendefinisikan kode controller.
Ringkasan - Bagaimana cara kerjanya?
ng-aplikasi direktif dalam elemen root dari aplikasi.
Untuk aplikasi single-halaman Web (aplikasi web halaman, SPA), aplikasi akar biasanya <html> elemen.
Satu atau lebih ng-controller direktif mendefinisikan controller aplikasi. Setiap controller memiliki elemen HTML :: dari lingkup definisi sendiri.
AngularJS dimulai secara otomatis dalam acara HTML DOMContentLoaded. Jika Anda menemukan ng-aplikasi direktif, AngularJS beban instruksi modul, dan ng-aplikasi sebagai akar dari aplikasi yang akan disusun.
Aplikasi akar mungkin menjadi bagian kecil dari seluruh halaman, atau halaman, jika itu adalah bagian kecil akan kompilasi lebih cepat dan eksekusi.