(service), controller và ứng dụng … và giúp code trở nên rõ ràng. Chúng ta định nghĩa module thành các file JavaScript riêng rã và đặt tên chúng theo mỗi tệp module.js. Ở ví dụ này chúng ta sẽ tạo ra 2 module:
Module ứng dụng - được sử dụng để khởi tạo ứng dụng với controller.
Module điều khiển - được sử dụng để định nghĩa controller.
Module ứng dụng
mainApp.js
var mainApp = angular.module("mainApp", []);
Trên đây chúng ta khai báo module ứng dụng mainApp sử dụng chức năng module hóa của AngularJS. Chúng ta khởi tạo một mảng rỗng cho nó. Mảng này thường chứa các thành phần độc lập trong module.
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 37 Module điều khiển
studentController.js
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; }
}; });
Ở đây chúng ta khai báo một module là studentController sử dụng chức năngmainApp.controller.
Sử dụng các Module
<div ng-app="mainApp" ng-controller="studentController"> ..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
Ở đây chúng ta sử dụng module ứng dụng sử dụng ng-app directive và controller sử dụngng- controller directive. Chúng ta gộp cả mainApp.js và studentController.js trong tệp HTML.
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 38 Ví dụ
Dưới đây là ví dụ cho phần mô tả bên trên:
testAngularJS.jsp
<html> <head>
<title>Angular JS Modules</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="mainApp.js"></script>
<script src="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>
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 39
<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
var mainApp = angular.module("mainApp", []);
studentController.js
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() {
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 40
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName; }
}; });
Kết quả
Mở trang textAngularJS.jsp trên trình duyệt. Dưới đây là kết quả.
Form trong AngularJS