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 dc6dce4a544fdca2df29d5ac0ea9906b 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 855348821b2e8f2cc4b633bf98f064df 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.