Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

AngularJS Includes

Author GAZAL ARORA
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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>
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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!

Previous article
AngularJS and W3.CSS
Next article
AngularJS Routing
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass