Rumah >hujung hadapan web >tutorial js >Pengenalan ringkas kepada penggunaan pengawal AngularJS_AngularJS

Pengenalan ringkas kepada penggunaan pengawal AngularJS_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2016-05-16 15:54:391043semak imbas

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>

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>

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()}}

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>

Output

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

2015616120726250.png (679×365)

Kenyataan：

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

Artikel sebelumnya：Pengenalan ringkas kepada sokongan JavaScript untuk model objek dokumen tradisional_Pengetahuan asasArtikel seterusnya：Pengenalan ringkas kepada sokongan JavaScript untuk model objek dokumen tradisional_Pengetahuan asas

Artikel berkaitan

Lihat lagi