Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Belajar menggunakan AngularJS Modules. AngularJS mendukung pendekatan modular. Modul yang digunakan untuk memisahkan logika mengatakan layanan, pengendali, aplikasi dll dan menjaga kode tetap bersih. Kami mendefinisikan modul dalam file js terpisah dan menamainya sesuai file module.js. Dalam contoh ini kita akan membuat dua modul.
Application Module – digunakan untuk menginisialisasi aplikasi dengan controller (s).
Controller Module – digunakan untuk menentukan controller.
Application Module
mainApp.js
|
1 |
var mainApp = angular.module ("mainApp", []); |
Disini kita sudah mendeklarasikan aplikasi mainApp module dengan menggunakan fungsi angular.module. Kami telah melewati sebuah array kosong untuk itu. Rangkaian ini umumnya berisi modul dependen.
Controller Module
studentController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); |
Disini kita sudah mendeklarasikan modul controller studentController dengan fungsi mainApp.controller.
Use Modules
|
1 2 3 4 5 6 |
<div ng-app = "mainApp" ng-controller = "studentController"> ... <script src = "mainApp.js"></script> <script src = "studentController.js"></script> </div> |
Di sini kita telah menggunakan modul aplikasi dengan menggunakan perintah dan pengontrol ng-app dengan menggunakan perintah ng-controller. Kami telah mengimpor mainApp.js dan studentController.js di halaman html utama.
Contoh
Contoh berikut akan menampilkan semua modul yang disebutkan di atas.
testAngularJS.htm
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<html> <head> <title>Angular JS Modules</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src = "/angularjs/src/module/mainApp.js"></script> <script src = "/angularjs/src/module/studentController.js"></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "studentController"> <table border = "0"> <tr> <td>Enter first name:</td> <td><input type = "text" ng-model = "student.firstName"></td> </tr> <tr> <td>Enter last name: </td> <td><input type = "text" ng-model = "student.lastName"></td> </tr> <tr> <td>Name: </td> <td>{{student.fullName()}}</td> </tr> <tr> <td>Subject:</td> <td> <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat = "subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> </td> </tr> </table> </div> </body> </html> |
mainApp.js
|
1 |
var mainApp = angular.module("mainApp", []); |
studentController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); |
oke sekarang kita akan melihat outputnya.
Buka teksAngularJS.htm di browser web. Lihat hasilnya
Oke semoga bermanfaat.