AngularJS Includes

GAZAL ARORA
Last Updated: May 13, 2022

Introduction

HTML does not support embedding HTML pages within HTML. To do so, you have to use AngularJS Include Directives. The ng-controller directive can be used to embed an html page within HTML.

Syntax:

<element ng-include=" "> content <element>

You can use AngularJS ng-include directive to include HTML from another file.

Syntax:

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

<body ng-app="">

<div ng-include="'HTMLFileName'"></div>

</body>
</html>

Include AngularJS Code

The HTML files that you include using the ng-include directive can also contain the angular js code. 

Ninjas.html file:

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Place }}</td>
  </tr>
</table>

Include the above "Ninjas.html" in your web page, and all AngularJS code, including that inside the included file, will be executed.

Example:

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

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>


<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>

<p>A paragraph.</p>


</body>
</html>

Include Cross Domains

You usually can't use the ng-include directive to include files from other domains. But you can provide a whitelist of legal files and/or domains to your application's config function to include files from other domains.

Note: Make that the target server enables cross-domain file access

FAQs

  1. What is the module in AngularJS?
    In AngularJS, a module is a container for different components of an application, such as the controller, service, filters, directives, factories, and so on. It uses modules to assist the separation of concerns.
     
  2. What is AngularJS mainly used for?
    AngularJS is a framework for building dynamic web applications. It allows you to utilize HTML as your template language and enhance HTML's syntax to represent the components of your application clearly and succinctly.
     
  3. What are AngularJS routes?
    The user can define different URLs for different content in an application using AngularJS routes. The ngRoute module allows you to navigate between different pages of an application without having to refresh the whole thing.

Key Takeaways

In this article, we learned how to use AngularJS ng-include directive to embed HTML files within an HTML file. Click here to learn more about ng-include.

Want to build websites but don't know where to start?

Start from here; enroll today and build unique websites using Node. Click on the given link to enroll.

 

Happy Coding!

Was this article helpful ?
0 upvotes