Các Module trong AngularJS AngularJS hỗ trợ tiếp cận theo hướng module.. Module được sử dụng để phân biệt phần xử lý logic service, controller và ứng dụng … và giúp code trở nên rõ ràng.
Trang 1Các Module trong AngularJS AngularJS hỗ trợ tiếp cận theo hướng module Module được sử dụng để phân biệt phần xử lý logic (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
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;
Trang 2studentObject = $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
<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
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) {
Trang 3background-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
var mainApp = angular.module("mainApp", []);
Trang 4mainApp.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;
}
};
});
Mở trang textAngularJS.jsp trên trình duyệt Dưới đây là kết quả