Pengontrol AngularJS
Pengontrol AngularJS mengontrol data dari aplikasi AngularJS.
Pengontrol AngularJS adalah objek JavaScript biasa.
Pengontrol AngularJS
Aplikasi AngularJS dikendalikan oleh pengontrol.
Petunjuk NG-Controller mendefinisikan pengontrol aplikasi.
Pengontrol adalah objek JavaScript yang dibuat oleh konstruktor objek JavaScript standar.
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"> </skrip> </head> <body> <dv-pr-porp = "non"> </script> </head> <body> <dv natr-apr-por = "non"> </script> </head> <body> <dv natg-min. <input type = "text" ng-model = "firstName"> <br> name: {{fullName ()}} </div> <script> var app = angular.module ('myapp', []); app.controller ('personctrl', function ($ scope) {$ $ scope.firler ('personctrl', function ($ scope) {$ $ scope.firler ("" "scope." scope. "scope." scope. "scope." scope. "scope." scope. "scope." scope. "scope." $ scope.fullname = function () {return $ scope.firstname + "" + $ scope.lastname;Hasil Menjalankan:
nama:
nama belakang:
Nama: John Doe
Aplikasi AngularJS didefinisikan oleh NG-APP. Aplikasi berjalan di dalam <VET>.
Properti NG-Controller = "MyCtrl" adalah arahan AngularJS. Digunakan untuk mendefinisikan pengontrol.
Fungsi MyCtrl adalah fungsi JavaScript.
AngularJS menggunakan objek $ SCOPE untuk memanggil pengontrol.
Di AngularJS, $ SCOPE adalah objek aplikasi (milik variabel dan fungsi aplikasi).
SCOPE $ Controller (setara dengan ruang lingkup dan ruang lingkup kontrol) digunakan untuk menyimpan objek model AngularJS.
Pengontrol membuat dua properti (nama depan dan lastname) dalam ruang lingkup.
Arahan NG-Model mengikat domain input ke properti pengontrol (FirstName dan LastName).
Metode pengontrol
Contoh di atas menunjukkan objek pengontrol dengan dua properti: LastName dan FirstName.
Pengontrol juga dapat memiliki metode (variabel dan fungsi):
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"> </skrip> </head> <body> <dv-pr-porp = "non"> </script> </head> <body> <dv natr-apr-por = "non"> </script> </head> <body> <dv natg-min. <input type = "text" ng-model = "firstName"> <br> name: {{fullName ()}} </div> <script> var app = angular.module ('myapp', []); app.controller ('personctrl', function ($ scope) {$ $ scope.firler ('personctrl', function ($ scope) {$ $ scope.firler ("" "scope." scope. "scope." scope. "scope." scope. "scope." scope. "scope." scope. "scope." $ scope.fullname = function () {return $ scope.firstname + "" + $ scope.lastname;Efek Menjalankan:
nama:
nama belakang:
Nama: John Doe
Pengontrol dalam file eksternal
Dalam aplikasi besar, pengontrol biasanya disimpan dalam file eksternal.
Cukup salin kode di tag <script> ke file eksternal bernama personcontroller.js:
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"> </skrip> </head> <body> <dv-pr-porp = "non"> </script> </head> <body> <dv natr-apr-por = "non"> </script> </head> <body> <dv natg-min. <input type = "text" ng-model = "firstName"> <br> name: <input type = "text" ng-model = "lastName"> <br> <br> name: {{firstName + "" + lastName}} </div> <script src = "personcontroller.js"> </script> </div> <cript src = "personcontroller.js"> </script> </script> <cript> </ht/ht/ht/htlcroller.js "> </script> </script> <cript> <cript> <cript =" personcontroller.js "> </script> </script> <cript> <cript> </ht/ht/ht foncontroller.js"> </scripHasil Menjalankan:
nama:
nama belakang:
Nama: John Doe
Contoh lainnya
Contoh berikut membuat file pengontrol baru:
angular.module ('myapp', []). controller ('namesctrl', function ($ scope) {$ scope.names = [{name: 'jani', country: 'norwegia'}, {name: 'hege', country: 'swedia'}, {nama: 'kai', negara: 'Denmark'Simpan file sebagai namescontroller.js:
Kemudian, gunakan file controller di 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><div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat = "x in name"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "namescontroller.js"> </script> </body> </html>Efek Menjalankan:
Di atas adalah kompilasi data pengontrol AngularJS, dan akan ditambah nanti.