Hello folks! welcome back to a new edition of our tutorial on AngularJS. In this tutorial, we're going to be studying about AngularJS Includes.
HTML doesn't have support for embedding HTML pages in the HTML page. In order to achieve this functionality, we can make use of one of the following options -
HTML doesn't have support for embedding HTML pages in the HTML page. In order to achieve this functionality, we can make use of one of the following options -
- Using Ajax - Make a server call to get the corresponding HTML page and set it in the innerHTML of HTML control.
- Using Server Side Includes - JSP, PHP and other server side technologies can include HTML pages within a dynamic page.
In AngularJS, we can embed HTML pages within an HTML page using the ng-include directive.
<div ng-app = "" ng-controller = "studentController"> <div ng-include = "'main.htm'"></div> <div ng-include = "'subjects.htm'"></div> </div>
Example
Following example below illustrates the use of the ng-include directive -
Create a file testAngularJS.html.
Create a file testAngularJS.html.
<html> <head> <title>Angular JS Includes</title> <script src = "https://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 = "'/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: "Kennedy", lastName: "Nkpara", fees:1000, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Biology',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </body> </html>
READ: AngularJS | Forms
Create a file main.html.
<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>
Create a file subject.html.
<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>
Output
To execute the above example, you need to deploy testAngularJS.html, main.html, and subjects.html to a web server. Open the file testAngularJS.html utilizing the URL of your server in the browser and see the following result -
AngularJS Sample Application
| Enter first name: | |
| Enter last name: | |
| Name: | Kennedy Nkpara |
Subjects:
| Name | Marks |
|---|---|
| Physics | 70 |
| Chemistry | 80 |
| Math | 65 |
| English | 75 |
| Biology | 67 |
READ: AngularJS | Modules
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS AJAX.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.