Nota Kajian Asas AngularJS Controller_AngularJS-tutorial js-php.cn

Nota Kajian Asas AngularJS Controller_AngularJS

WBOY

Lepaskan： 2016-05-16 15:59:53

asal

1067 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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'}
  ];
});

Salin selepas log masuk

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>

Salin selepas log masuk

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