Dalam sudut, pengontrol adalah fungsi JavaScript (Type/Class) yang digunakan sebagai instance dari lingkup sudut (//www.vevb.com/article/91749.htm) yang meluas kecuali ruang lingkup root. When we create a new child scope through the scope.$new API (http://docs.angularjs.org/api/ng.$rootScope.Scope#$new), there is an option to pass it into the controller as a parameter of the method (I didn't understand it here, I only know that the first parameter of the controller is a newly created scope, with a binding parent scope). Ini akan memberi tahu Angular bahwa pengontrol dan ruang lingkup baru perlu digabungkan, dan memperluas perilakunya.
Pengontrol dapat digunakan sebagai:
1. Atur keadaan awal objek lingkup.
2. Tambahkan perilaku ke ruang lingkup.
1. Menyiapkan keadaan awal objek lingkup
Biasanya, ketika kita membuat aplikasi, kita perlu mengatur status inisialisasi untuk lingkup sudut.
Angular menerapkan objek ruang lingkup baru untuk konstruktor pengontrol (diperkirakan akan dilewati sebagai parameter), dan menetapkan keadaan ruang lingkup awal. Ini berarti bahwa Angular tidak pernah membuat instance tipe pengontrol (mis., Tidak menggunakan operator baru untuk konstruktor pengontrol). Konstruktor selalu diterapkan pada objek ruang lingkup yang ada.
Kami membuat keadaan ruang lingkup awal dengan membuat atribut model. Misalnya:
Function sreietctrl ($ scope) {$ scope.greeting = "hola!";}
Pengontrol "Salam" membuat model yang disebut "ucapan" yang dapat diterapkan pada templat.
2. Menambahkan perilaku ke objek lingkup
Perilaku pada objek lingkup sudut adalah dalam bentuk atribut metode ruang lingkup untuk templat dan tampilan. Perilaku ini dapat memodifikasi model aplikasi.
Sebagaimana dibahas dalam bab model yang dipandu (//www.vevb.com/article/91777.htm), objek apa pun (atau tipe primitif) ditugaskan ke ruang lingkup dan menjadi atribut model. Fungsi apa pun yang terpasang pada ruang lingkup tersedia untuk tampilan template, dan dapat dipanggil melalui ekspresi sudut atau melalui NG Event Handler Directive (seperti NgClick).
3. Menggunakan pengontrol dengan benar
Secara umum, pengontrol tidak boleh mencoba melakukan terlalu banyak. Seharusnya hanya berisi logika bisnis yang diperlukan untuk satu tampilan (dan belum berbalik dan saya selalu berpikir bahwa pengontrol hanyalah penerusan ...).
Untuk menjaga pengontrol tetap sederhana, cara umum adalah dengan mengekstrak pekerjaan yang bukan milik pengontrol ke dalam layanan, dan menggunakan layanan ini melalui injeksi ketergantungan pada pengontrol. Hal -hal ini akan dibahas dalam bab Layanan Injeksi Ketergantungan dari Wizard.
Jangan lakukan hal berikut di pengontrol:
4. Mengaitkan pengontrol dengan objek lingkup sudut
Kita dapat secara eksplisit mengaitkan objek pengontrol dan ruang lingkup melalui ruang lingkup. $ Baru, atau secara implisit menggunakan NgController Directive (http://docs.angularjs.org/api/ng.directive:ngcontroller) atau $ route (http://docs.angularjs.org/api.api.api.ap.ng.l.
1. Contoh konstruktor dan metode pengontrol
Untuk mengilustrasikan bagaimana komponen pengontrol bekerja dalam sudut, mari kita buat aplikasi kecil menggunakan komponen berikut:
Pesan dalam templat kami berisi ikatan dengan model rempah -rempah, yang diatur ke "sangat" secara default. Atur nilai model rempah -rempah menjadi "cabai" atau "jalapeño" sesuai dengan tombol yang diklik, dan pesan akan diperbarui secara otomatis oleh pengikatan data.
<!DOCTYPE html><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>spicy-controller</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <div ng-controller = "spicyctrl"> <button ng-click = "chilispicy ()"> chili </button> "fcicy! src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function spicyctrl ($ scope) {$ scope.spice = "vere"; $ scope.chilispicy = function () {$ scope.spice = "chili"; }; $ scope.jalapenospicy = function (val) {this.spice = val; }; } </script> </body> </html>Hal -hal yang perlu diperhatikan dalam contoh di atas:
Metode pengontrol dapat mengambil parameter, seperti yang ditunjukkan pada contoh berikut:
<! Doctype html> <html ng-app> <head> <meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/> <itement> controller-method-arments </iteme> <meta content = "ie = edge, chrome = 1" http-pionp-iquiv = "ie = edge, chrome = 1" http-pionp-iquiV = "ie = edge, chrome = 1" http-pionp-quiv = meta content = "IE = edge, chrome = 1" http-iquiv type = "text/css"> .ng-cloak {display: none; } </style></head><body> <div ng-controller="SpicyCtrl"> <input ng-model="customSpice" value="wasabi"/> <button ng-click="spicy(customSpice)">customSpice</button> <br/> <button ng-click="spicy('Chili')">Chili</button> <p>The food is {{Spice}} pedas! </p> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function spicyctrl ($ scope) {$ scope.spicy = "vere"; $ scope.spicy = function (spice) {$ scope.spice = spice; }; } </script> </body> </html>Perhatikan bahwa pengontrol SpicyCtrl sekarang hanya mendefinisikan metode dengan parameter "rempah -rempah" dan disebut "pedas". Template dapat merujuk ke metode pengontrol dan memberikan nilai string atau model konstan ke dalamnya.
Warisan pengontrol dalam sudut didasarkan pada warisan lingkup. Mari kita lihat contoh berikut:
<!DOCTYPE html><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>controller-inheritance</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <style type="text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <Div ng-controller = "Mainctrl"> <p> Good {{TimeOfday}}, {{name}}! </p> <div ng-controller = "childctrl"> <p> good {{timeofday}, {p> p> {p> {{{timeOfday}, {p> {{{{{p> {{{{{p> {{{{{{p> {{{{p> {{{{{{{{{{{{{{{{{", {{{{{{{{{{{{{{{p> ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p> </div> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MainCtrl($scope) { $scope.timeOfDay = 'Waktu utama'; $ scope.name = 'nama utama'; } function childctrl ($ scope) {$ scope.name = 'name anak'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = 'nama bayi'; } </script> </body> </html>Perhatikan bagaimana kita bersarang 3 ngcontroller langsung ke template. Untuk pandangan kami, struktur templat ini akan menyebabkan 4 lingkup dibuat:
Pekerjaan yang diwariskan adalah sama dalam pengontrol dan model. Jadi dalam contoh kami sebelumnya, semua model dapat ditulis ulang melalui pengontrol.
Catatan: Warisan prototipe standar antara dua pengontrol tidak berfungsi seperti yang kami kira, karena seperti yang kami sebutkan sebelumnya, pengontrol tidak diinisialisasi secara langsung melalui sudut, tetapi sebaliknya menerapkan objek lingkup itu. (Pengontrol tidak dipakai secara langsung oleh Angular, melainkan diterapkan pada objek lingkup, di sini sama seperti sebelumnya, saya masih tidak mengerti.)
5. Pengontrol Pengujian
Meskipun ada banyak cara untuk menguji pengontrol, salah satu konvensi terbaik, seperti yang ditunjukkan di bawah ini, membutuhkan injeksi $ rootscope dan $ controller. (Tes harus dikoordinasikan dengan Jasmine.js)
<!DOCTYPE html><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>controller-test</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <link rel="stylesheet" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script src = "../ angular-scenario-1.0.1.js" type = "text/javascript"> </script> script script = ".. type = "Text/JavaScript"> </script> <skrip src = "../ angular-mocks-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function mycontroller ($ scope) {$ scope.spices = [{"nama": " {"name": "jalapeno", "spiceiness": "panas panas!"}, {"name": "habanero", "spiceness": "lava hot !!"}]; $ scope.spice = "habanero"; } describe("MyController function", function () { describe("MyController", function () { var scope; beforeEach(inject(function ($rootScope, $controller) { scope = $rootScope.$new(); var ctrl = $controller(MyController, {$scope:scope}); })); it('should create "cpices" model with 3 Function () {harganya (scope.spices.length) .tobe (3); }); (function () { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var trivialReporter = new jasmine.TrivialReporter(); jasmineEnv.addReporter(trivialReporter); jasmineEnv.specFilter = function (spec) { return trivialReporter.specFilter(spec); }; var windowonload = window.onload;Jika kita perlu menguji pengontrol bersarang, kita perlu membuat hubungan warisan lingkup yang sama dalam tes seperti pada DOM.
<!DOCTYPE html><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>controller-test</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <link rel="stylesheet" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script src = "../ angular-scenario-1.0.1.js" type = "text/javascript"> </script> script script = ".. type = "Text/JavaScript"> </script> <script src = "../ angular-mocks-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function Mainctrl ($ scope) {$ scope.TimeOfday = 'Main Time'; $ scope.name = 'nama utama'; } function childctrl ($ scope) {$ scope.name = 'name anak'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = 'nama bayi'; } jelaskan ("myController", function () {var Mainscope, Childscope, Babyscope; sebelum reach (inject (function ($ rootscope, $ controller) {Maincope = $ rootscope. $ new (); var mainctrl = $ controller (mainctrl, {$ scope: mainscope}; varcrl = $ mringscope (Mainctrl, {$ scope: Mainscope}; $ controller (childctrl, {$ scope: childscope}); Ekspresi (namanya). Tobe ("Nama Utama"); (function () { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var trivialReporter = new jasmine.TrivialReporter(); jasmineEnv.addReporter(trivialReporter); jasmineEnv.specFilter = function (spec) { return trivialReporter.specFilter(spec); }; var windowonload = window.onload;Di atas adalah informasi tentang AngularJS memahami komponen pengontrol. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda!