English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS Includes

HTML does not support embedding HTML pages within HTML pages. To achieve this functionality, we can use one of the following options-

  • Using Ajax − Make server calls to retrieve the corresponding HTML page and set it in the innerHTML of the HTML control.

  • Server-side include − JSP, PHP, and other web server technologies can include HTML pages in dynamic pages.

With AngularJS, we can use ng-The include directive embeds an HTML page within an HTML page.

<div ng-app　=　""　ng-controller = "studentController">
　　　<div ng-include　=　"'main.htm'"</div>
　　　<div ng-include　=　"'subjects.htm'"</div></div>

Online Example

tryAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Including Sample</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/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 = ""/angularjs/src/include/main.htm"></div>
　　　　　　　　　<div ng-include = ""/angularjs/src/include/subjects.htm"></div>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Sea",
　　　　　　　　　　　　　　　lastName: "Gull",
　　　　　　　　　　　　　　　fees:500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects: [
　　　　　　　　　　　　　　　　　　{name: 'Physics', marks:70},
　　　　　　　　　　　　　　　　　　{name: 'Chemistry', marks:80},
　　　　　　　　　　　　　　　　　　{name: 'Mathematics', marks:65},
　　　　　　　　　　　　　　　　　　{name: 'English', marks:75},
　　　　　　　　　　　　　　　　　　{name: 'Chinese', marks:67}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Test to see‹/›

main.htm

<table border="0">
　　　<tr>
　　　　　　<td>Enter Name:</td>/td>
　　　　　　<td><input type="text" ng-model="student.firstName"/td>
　　　</tr>
　　　
　　　<tr>
　　　　　　<td>Enter Surname: </td>/td>
　　　　　　<td><input type="text" ng-model="student.lastName"/td>
　　　</tr>
　　　
　　　<tr>
　　　　　　<td>Name: </td>/td>
　　　　　　<td>{{ student.fullName() }}</td>/td>
　　　</tr>
</table>

subjects.htm

<p>Subjects:</p>/p>
<table>
　　　<tr>
　　　　　　<th>Name</th>/th>
　　　　　　<th>Marks</th>/th>
　　　</tr>
　　　
　　　<tr ng-repeat="subject in student.subjects"
　　　　　　<td>{{ subject.name }}</td>/td>
　　　　　　<td>{{ subject.marks }}</td>/td>
　　　</tr>
</table>

Output Results

To execute this example, you need to deploytestAngularJS.htm, main.htmandsubjects.htmTo the web server. Open the file using the server's URL in a web browsertestAngularJS.htmThen check the result.

AngularJS AjaxAngularJS Forms