Latest web development tutorials

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

<Html ng-app = "myNoteApp ">
<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":

var aplikasi = angular.module ( "myNoteApp", []);

Kontroler File "myNoteCtrl.js":

app.controller ( "myNoteCtrl", function ($ lingkup) {
$ 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:

<Html ng-app = "myNoteApp ">

halaman <div> HTML di controller: ng-controller = "myNoteCtrl" lingkup:

<Div ng-controller = "myNoteCtrl ">

ng model directive mengikat <textarea> untuk pesan variabel controller:

<Textarea ng-model = "pesan " cols = "40" rows = "10"> </ textarea>

Dua acara ng-klik memanggil fungsi pengontrol yang jelas () dan menyimpan ():

<Tombol ng-klik = "save ()"> Simpan </ button>
<Tombol ng-klik = "jelas ()"> Clear </ button>

perintah ng-mengikat untuk mengikat fungsi pengontrol kiri () <span>, digunakan untuk menampilkan karakter yang tersisa:

Jumlah karakter yang tersisa: <span ng -bind = "kiri ()"> </ span>

Aplikasi file library yang dibutuhkan untuk melakukan setelah AngularJs memuat:

<Script src = "myNoteApp.js"> </ script>
<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.