Nota Kajian Asas AngularJS Controller_AngularJS

Pengawal AngularJS digunakan untuk mengawal data aplikasi AngularJS.

Pengawal AngularJS ialah objek JavaScript biasa.

AngularJS Controller
Aplikasi AngularJS dikawal melalui pengawal.

Arahan pengawal ng mentakrifkan pengawal aplikasi.

Pengawal ialah objek JavaScript yang boleh dibuat melalui pembina objek JavaScript standard.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

Penjelasan kod:

Aplikasi AngularJS ditakrifkan oleh ng-app="myApp". Skop aplikasi yang berkesan adalah dalam

di mana lokasi ng-app.

　ng-controller="myCtrl" atribut ialah arahan AngularJS, yang mentakrifkan pengawal.

Fungsi myCtrl ialah fungsi JavaScript biasa.

AngularJS menggunakan objek $scope untuk memanggil pengawal.

Dalam AngularJS, $scope ialah objek aplikasi (iaitu, pemilik pembolehubah dan fungsi aplikasi).

Pengawal mengandungi dua sifat (atau pembolehubah): firstName dan lastName. Mereka dilampirkan pada objek $scope.

Arahan model ng mengikat nilai teg input kepada sifat pengawal (nama pertama dan nama akhir).

Kaedah pengawal
Contoh di atas menunjukkan bahawa objek pengawal mengandungi dua sifat: lastName dan firstName.

Pengawal juga boleh mengandungi kaedah (tetapkan fungsi kepada pembolehubah):

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

Letakkan pengawal dalam fail luaran
Dalam aplikasi besar, kod pengawal selalunya ditulis dalam fail luaran.

Salin kod dalam teg ke fail luaran personController.js:

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

Contoh lain
​Buat fail pengawal baharu dan namakannyaController.js:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

Kemudian gunakan fail pengawal ini dalam aplikasi:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
 <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

<script src="namesController.js"></script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn