Pengenalan ringkas kepada penggunaan pengawal AngularJS

Pengenalan ringkas kepada penggunaan pengawal AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:39

asal

1028 orang telah melayarinya

Aplikasi AngularJS bergantung terutamanya pada pengawal untuk mengawal aliran data dalam aplikasi. Pengawal ditakrifkan menggunakan arahan ng-pengawal. Pengawal ialah fungsi yang mengandungi sifat/sifat dan objek JavaScript. Setiap pengawal menerima parameter $scope untuk menentukan aplikasi/modul yang dikawal oleh pengawal.

<div ng-app="" ng-controller="studentController">
...
</div>

Salin selepas log masuk

Di sini, kami telah mengisytiharkan pengawal studentController menggunakan arahan ng-controller. Sebagai langkah seterusnya, kami akan mentakrifkan studentController seperti berikut

<script>
function studentController($scope) {
  $scope.student = {
   firstName: "yiibai",
   lastName: "com",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>

Salin selepas log masuk

studentController mentakrifkan $scope sebagai parameter objek JavaScript.
$scope mewakili aplikasi, menggunakan objek studentController.
$scope.student ialah hak milik objek studentController.
FirstName dan LastName ialah dua sifat bagi objek $scope.student. Kami telah memberikan nilai lalai kepada mereka.
fullName ialah fungsi objek $scope.student, tugasnya ialah mengembalikan nama yang digabungkan.
Dalam fungsi Nama penuh, kami kini mahu objek pelajar mengembalikan nama gabungan.
Sebagai nota, anda juga boleh mentakrifkan objek pengawal dalam fail JS yang berasingan dan meletakkan fail yang berkaitan dalam halaman HTML.

Kini anda boleh menggunakan atribut studentController menggunakan model ng atau menggunakan ungkapan seperti berikut.

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

Salin selepas log masuk

Kini terdapat dua kotak input: student.firstName dan student.lastname.
Kini terdapat kaedah student.fullName() ditambahkan pada HTML.
Kini, selagi anda memasukkan perkara yang anda masukkan dalam kotak input nama pertama dan nama keluarga, anda boleh melihat kedua-dua nama itu dikemas kini secara automatik.

Contoh

Contoh berikut akan menunjukkan penggunaan pengawal.
Kandungan fail testAngularJS.html adalah seperti berikut:

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Salin selepas log masuk

Output

Buka textAngularJS.html dalam pelayar web dan lihat hasil berikut:

2015616120726250.png (679×365)