Include trong AngularJS HTML không hỗ trợ nhúng trang web HTML trong trang HTML.. Để đạt được chức năng này có thể sử dụng các phương thức sau: Sử dụng Ajax - Tạo một server call để
Trang 1Include trong AngularJS HTML không hỗ trợ nhúng trang web HTML trong trang HTML Để đạt được chức năng này có thể
sử dụng các phương thức sau:
Sử dụng Ajax - Tạo một server call để nhận trang HTML tương ứng và thiết lập nó trong
thành phần innerHTML của phần điều khiển HTML
Sử dụng Server Side Includes - JSP,PHP và các công nghệ web server khác có thể
include HTML page trong một trang trang web động
Với AngularJS, chúng ta có thể nhúng trang HTML sử dụng ng-include directive
<div ng-app="" ng-controller="studentController">
<div ng-include="'main.jsp'"></div>
<div ng-include="'subjects.jsp'"></div>
</div>
Ví d ụ
tryAngularJS.jsp
<html>
<head>
<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.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;
Trang 2</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<div ng-include="'main.jsp'"></div>
<div ng-include="'subjects.jsp'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
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;
}
};
});
</script>
</body>
Trang 3</html>
main.jsp
<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>
</table>
subjects.jsp
<p>Subjects:</p>
<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>
Để chạy ví dụ này, bạn cần phần tạo ra các tệp textAngularJS.jsp, main.jsp, subjects.jsp với
webserver Mở trang textAngularJS.jsp sử dụng địa chỉ địa chỉ URL trên server và xem kết quả