Sharing Top Content from the Angular-sphere.

How to use ng-include Directive in AngularJS

How to use ng-include Directive in #AngularJS

  • Similarly, in AngularJS there is the ng-include directive that allows us to embed existing HTML pages within another HTML page.
  • There are two ways to use  directive – – – Need to pass the file name when using as an attribute.The file name should be within quotes.
  • Create a element with and use file name as the options.
  • With directive, you can easily insert existing HTML pages within your web page.
  • You can either use directive or tag way to embed the files.

In HTML you cannot embed one HTML page within another HTML page. In PHP, there is include or require statement for it which takes the file name …

In HTML you cannot embed one HTML page within another HTML page. In PHP, there is include or require statement for it which takes the file name as a parameter and embed the file at the specified location.

Similarly, in AngularJS there is the ng-include directive that allows us to embed existing HTML pages within another HTML page.

directive –

(1). Adding ng-include attribute to element

as an attribute.The file name should be within quotes.

(2). Using ng-include tag

attribute. The file name should be within quotes.

Create a simple example, which has 3 files – index.html, header.html, and footer.html. Include the header.html and footer.html in index.html file.

directive value.

file.

file.

and use file name as the options.

element.

directive.

object.

Name Extension
{{ lang.name }} {{ lang.extension }}

directive, you can easily insert existing HTML pages within your web page.

You can either use directive or tag way to embed the files.

How to use ng-include Directive in AngularJS