Aplikasi AngularJS terutama mengandalkan pengontrol untuk mengontrol aliran data dalam aplikasi. Pengontrol didefinisikan menggunakan instruksi NG-Controller. Pengontrol adalah fungsi yang berisi properti/properti dan objek JavaScript. Setiap pengontrol menerima parameter $ SCOPE untuk menentukan aplikasi/modul, yang dikendalikan oleh pengontrol.
<div ng-app = "" ng-controller = "studentController"> ... </div>
Di sini kami telah mendeklarasikan pengontrol StudentController yang menggunakan arahan NG-Controller. Sebagai langkah selanjutnya, kami akan mendefinisikan StudentController sebagai 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 mendefinisikan $ scope sebagai parameter objek JavaScript.
$ SCOPE mewakili aplikasi, menggunakan objek StudentController.
$ scope.student adalah properti dari objek StudentController.
FirstName dan LastName adalah dua properti dari objek $ scope.student. Kami telah memberikan nilai default kepada mereka.
FullName adalah fungsi dari objek $ SCOPE. Student, dan tugasnya adalah mengembalikan nama gabungan.
Dalam fungsi FullName, kami sekarang ingin objek siswa mengembalikan nama kombinasi.
Sebagai ilustrasi, juga dimungkinkan untuk mendefinisikan objek pengontrol dalam file JS terpisah dan memasukkan halaman HTML ke dalam file.
Anda sekarang dapat menggunakan NG-model atau menggunakan ekspresi sebagai berikut untuk menggunakan properti StudentController.
Masukkan nama depan: <input type = "text" ng-model = "student.firstname"> <br> Masukkan nama belakang: <input type = "text" ng-model = "student.lastname"> <br> <br> Anda masuk: {{{{{{{{{{{{{student.fullname ()}}Sekarang ada dua kotak input: Student.FirstName dan Student.LastName.
Sekarang ada metode Student.Fullname () yang ditambahkan ke HTML.
Sekarang, cukup masukkan kotak input nama depan dan lastname untuk memasukkan apa yang harus dimasukkan, dan Anda dapat melihat bahwa kedua nama tersebut diperbarui secara otomatis.
contoh
Contoh berikut akan menunjukkan penggunaan pengontrol.
Konten file testangularjs.html adalah sebagai berikut:
<html> <head> <title> controller JS sudut </itement> </head> <hody> <h2> aplikasi sampel AngularJS </h2> <v ng-app = "" ng-controller = "studentController"> masukkan nama depan: <input type = "teks" ng-ng-model = "student.firstntnstntnstny" input = "Text" ng-ng-model = "student.firstnst 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> <skrip src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Keluaran
Buka TextAngularJs.html di browser web dan lihat hasil berikut:
Di atas adalah informasi yang menyortir pengontrol AngularJS. Kami akan terus memilah pengetahuan yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs web ini.