AngularJS Include

In the previous article, we studied AngularJS module. In this article we are going to focus on yet another extremely important i.e. AngularJS Include statement. Often times, our project is divided into several webpages. For example, a typical WordPress page consists of three parts: header.php which contains all the header code, a page that contains the main content and a footer.php which contains footer content. So actually to render a complete page, three pages have to be combined together. We can include HTML in AngularJS applications via “ng-inlude” directive. Take a look at the following example.

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

<div ng-app="">
 	
    
<div ng-include="'heading.html'"></div>
</div>

</body>
</html>

Download the code

Before executing the above code, create a file named “heading.html” and add any html content to it. Place the “heading.html” file in the same folder where your code file is located. Now if you open the code file, you shall see that the div where you added “ng-include” directive contains the html output of the “heading.html” file. This is because “ng-include” directive actually include the contents of the file at the specified location in an AngularJS documents.

Include AngularJS code in Applications

You can also include AngularJs code from one application to the other. This helps create controllers, models and views in different files. Take a look at the following example.

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

     <div ng-app = "SelectApp" ng-controller = "SelectController" ng-init="">
         
<div ng-include="'table.html'"></div>
        
      </div>
      
      <script>
         var mainApp = angular.module("SelectApp", []);
         
         mainApp.controller('SelectController', function($scope) {
            $scope.Students = [
                              {name:'John',age:20},
                              {name:'Alice',age:21},
                              {name:'Mark',age:25},
                              {name:'Carry',age:19},
                              {name:'Bron',age:12}
                             ]
             
         });
      </script>  

</body>
</html>

Download the code

Go to the script section of the above code. Here we create a controller which contains a Students array. The array contains five objects. Each object has a name and age variable. Now come to the view section. Here we have a div which contains “ng-include” directive. This directive includes “table.html” file in the application. The contents of “table.html” file are as follows

<table>
<tr ng-repeat="student in Students">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
</tr>
</table>

Download the code

Now if you run the previous code that contains script and controller, you shall see that name and age of all the objects in the Students array are presented in tabular form, though there is no table in the application. This table is actually generated by “ng-repeat” directive inside the “table.html” file. This is how we add one AngularJS application to another via AngularJS include.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .