Aplikasi AngularJS
Sekarang saatnya untuk membuat aplikasi web single halaman tunggal (SPA).
Contoh aplikasi AngularJS
Anda telah cukup belajar tentang AngularJS dan sekarang Anda dapat mulai membuat aplikasi AngularJS pertama Anda:
Hitungan kata yang tersisa: 100
Penjelasan Aplikasi
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = Mynot = "Mynot =" ng-controller = "mynotectrl"> <h2> Catatan saya </h2> <textarea ng-model = "pesan" cols = "40" baris = "10"> </textarea> <p> <tombol klik = "save ()"> </button> <kancing <KOMPOLT> <KOMPOTLE- KOMPOING </POTFEING </POTFANT </POTFOTREA. ng-bind = "left ()"> </span> </p> <script src = "mynoteApp.js"> </script> <script src = "mynotectrl.js"> </script> </body> </html>
Hasil Menjalankan:
Hitungan kata yang tersisa: 100
File aplikasi "mynoteApp.js":
var app = angular.module ("mynoteApp", []);
File pengontrol "mynotectrl.js":
app.controller("myNoteCtrl", function($scope) { $scope.message = ""; $scope.left = function() {return 100 - $scope.message.length;}; $scope.clear = function() {$scope.message = "";}; $scope.save = function() {alert("Note Saved");};});Elemen <html> adalah wadah untuk aplikasi AngularJS: ng-app = "mynoteApp":
<html ng-app = "mynoteApp">
<div> adalah ruang lingkup pengontrol di halaman HTML: ng-controller = "mynotectrl":
<Div ng-controller = "mynotectrl">
Arahan Model NG mengikat <textArea> ke pesan variabel controller:
<textarea ng-model = "pesan" cols = "40" baris = "10"> </textarea>
Dua Acara Klik Ng Hubungi Fungsi Pengontrol Clear () dan Save ():
<tombol ng-click = "save ()"> save </attone> <tombol ng-click = "clear ()"> CLEAR </button>
Petunjuk NG-Bind mengikat fungsi pengontrol kiri () untuk <span> untuk menampilkan karakter yang tersisa:
Jumlah karakter yang tersisa: <span ng-bind = "left ()"> </span>
File pustaka aplikasi perlu dimuat setelah AngularJS dapat dieksekusi:
<skrip src = "mynoteApp.js"> </script> <script src = "mynotectrl.js"> </cript>
Arsitektur Aplikasi AngularJS
Contoh di atas adalah Aplikasi Web Single Page (SPA) yang lengkap.
Elemen <html> berisi aplikasi AngularJS (ng-app =).
Elemen <div> mendefinisikan ruang lingkup pengontrol AngularJS (ng-controller =).
Dalam satu aplikasi, dapat terdiri dari banyak pengontrol.
File aplikasi (... app.js) mendefinisikan kode model aplikasi.
Satu atau lebih file pengontrol (... ctrl.js) Tentukan kode pengontrol.
Ringkasan - Bagaimana cara kerjanya?
Petunjuk NG-APP terletak di bawah elemen root aplikasi.
Untuk aplikasi web satu halaman (SPA), root aplikasi biasanya elemen <html>.
Satu atau lebih arahan pengontrol NG menentukan pengontrol aplikasi. Setiap pengontrol memiliki ruang lingkupnya sendiri :: elemen HTML yang ditentukan.
AngularJS dimulai secara otomatis di acara HTML DOMContentloaded. Jika arahan NG-APP ditemukan, AngularJS memuat modul dalam arahan dan mengkompilasi NG-App sebagai akar aplikasi.
Akar aplikasi dapat berupa seluruh halaman, atau sebagian kecil dari halaman, dan jika itu adalah bagian kecil, itu akan dikompilasi dan dieksekusi lebih cepat.
Di atas adalah penjelasan terperinci tentang aplikasi sederhana AngularJS. Saya berharap ini dapat membantu pemrograman AngularJS.