AngularJS Include html example and tutorial


         Include in AngularJS is an interesting topic where you can embed external Html file into another html file. This feature is not possible in regular Html file without angular JS. ng-include is the AngularJS directive used to achieve this functionality. 

Syntax for ng-include directive :
              ng-include = "''File.html"

Now lets see how to achieve this functionality with a very simple example. We will be using 3 html files - main.html, file1.html, file2.html

main.html file with include file1.html and file2.html using ng-include directive and display appropriate data.

Project Directory Structure in Eclipse


Directory Structure
File1.html - displays "file1" data whatever assigned in main.html

<p>File1 : {{file1}}</p>

File2.html - displays "file2" data whatever assigned in main.html

<p>File1 : {{file2}}</p>


Main.html
              Here we have included file1.html and file2.html using ng-include directive. We also have two model data -
file1 = "Hey there..!";
file2 = "Welcome to CompileTimeError.com !";

which inturn is displayed as output.


<!DOCTYPE html>
<html>
<script
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

 <div ng-app="myApp" ng-controller="myCtrl">
  <div ng-include="'File1.html'"></div>
  <div ng-include="'File2.html'"></div>
 </div>

 <script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
   $scope.file1 = "Hey there..!";
   $scope.file2 = "Welcome to CompileTimeError.com !";
  });
 </script>

</body>
</html>

Output:

Hope this tutorial helps you to understand the below stuff :

  • Include in AngularJS
  • ng-include directive





Reactions:

0 comments :

Post a Comment