Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Menggunakan Controllers dalam AngularJS. Aplikasi AngularJS terutama mengandalkan Controllers untuk mengendalikan arus data dalam aplikasi. Controllers didefinisikan dengan menggunakan perintah ng-controller. Controllers adalah objek JavaScript yang berisi atribut / properti dan fungsinya. Setiap Controllers menerima $ scope sebagai parameter yang mengacu pada aplikasi / modul kontroler yang harus dikontrol.
|
1 2 3 |
<div ng-app = "" ng-controller = "studentController"> ... </div> |
Di sini kita telah mendeklarasikan controller studentController menggunakan perintah ng-controller. Sebagai langkah selanjutnya kita akan mendefinisikan studentController sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function studentController($scope) { $scope.student = { firstName: "Feri", lastName: "Mispandi", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script> |
Oke saya akan menjelaskan tentang script di atas:
- studentController didefinisikan sebagai objek JavaScript dengan $ scope sebagai argumen.
- $ scope mengacu pada aplikasi yang menggunakan objek studentController.
- $ scope.student adalah milik objek studentController.
- firstName dan lastName adalah dua properti dari $ scope.student object. Kami telah melewati nilai default untuk mereka.
- fullName adalah fungsi dari $ scope.student object yang tugasnya mengembalikan nama gabungan.
- Dalam fungsi fullName kita mendapatkan objek siswa dan kemudian mengembalikan nama gabungan.
- Sebagai catatan, kita juga bisa menentukan objek controller dalam file JS yang terpisah dan rujuk file itu di halaman html.
Sekarang kita bisa menggunakan properti siswa studentController menggunakan ng-model atau menggunakan ungkapan sebagai berikut:
|
1 2 3 4 |
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()}} |
Penjelasan:
- saya telah membatasi student.firstName dan student.lastname ke dua kotak masukan.
- saya telah membatasi student.fullName () ke HTML.
- Sekarang setiap kali Anda mengetik sesuatu di nama depan dan nama belakang kotak input, Anda dapat melihat nama lengkap mendapatkan update secara otomatis.
Contoh lengkapnya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <title>Angular JS Controller</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" 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> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Feri", lastName: "Mispandi", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </body> </html> |
Oke dari script di atas maka akan menghasilkan output seperti di bawah ini:
Oke itulah tadi pembahasan saya tentang Menggunakan Controllers dalam AngularJS semoga dapat bermanfaat.