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ụ
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 46 <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;
}
</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,
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 47
{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> </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>
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 48
<td>{{ subject.marks }}</td> </tr>
</table>
Kết quả
Để 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ả.
Ajax trong AngularJS