AngularJS Includes

The ng-include directive in AngularJS is used to include HTML templates into the main view. It allows you to dynamically load content from an external file into a part of your web page. This is particularly useful for creating reusable components, managing partial views, and enhancing modularity in your AngularJS applications.

Key Concepts of AngularJS Includes

1. ng-include: A directive used to embed an external HTML file into the current template.
2. Template URL: The path to the HTML file you want to include.
3. Scope Sharing: The scope of the parent controller is shared with the included template by default.

 

How to Use ng-include

Basic Usage

The basic syntax of ng-include involves specifying a template URL (the path to the HTML file) within an ng-include directive.

Example:

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

In this example, the content of the header.html file will be loaded and displayed inside the <div>.

Using ng-include with a Dynamic URL

You can also include templates dynamically based on a condition or some dynamic URL value.

Example:

<div ng-include="dynamicTemplateUrl"></div>

In your controller, you can define the dynamicTemplateUrl like this:

app.controller('myCtrl', function($scope) {
  $scope.dynamicTemplateUrl = 'header.html'; // You can change this dynamically
});

• The template specified by the dynamicTemplateUrl will be dynamically loaded into the div element.

ng-include with Expressions

You can use AngularJS expressions to decide the template that should be included. This is useful when the included template depends on some runtime data.

Example:

<div ng-include="'partials/' + pageName + '.html'"></div>

Here, the value of pageName will determine which HTML file is included from the partials/ folder.

 

Conditional Template Inclusion

You can also conditionally include templates based on some controller logic.

Example:

<div ng-include="isUserLoggedIn ? 'userProfile.html' : 'loginPage.html'"></div>

In this example, if the user is logged in, userProfile.html will be included; otherwise, loginPage.html will be displayed.

 

Sharing Scope Between Parent and Included Template

By default, the scope of the parent controller is shared with the included template. This allows you to use the same variables and data in the included HTML file.

Example:

Main Template:

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

header.html Template:

<h1>{{ pageTitle }}</h1>

Controller:

app.controller('myCtrl', function($scope) {
  $scope.pageTitle = "Welcome to My Website";
});

• The {{ pageTitle }} in header.html will display the value from the parent controller ("Welcome to My Website").

 

Using ng-include with ng-repeat

ng-include can also be used inside ng-repeat to include templates dynamically for each item in a list.

Example:

<div ng-repeat="item in items">
  <div ng-include="'itemTemplate.html'"></div>
</div>

• In this case, for each item in the items array, itemTemplate.html will be included.

 

Handling Errors with ng-include

If the template file specified in ng-include is not found, AngularJS throws an error. You can handle this gracefully using the ng-include's onload and onerror attributes.

Example:

<div ng-include="'header.html'" onload="onLoadCallback()" onerror="onErrorCallback()"></div>

In the controller, you can define the onLoadCallback and onErrorCallback functions to perform actions when the template is successfully loaded or when an error occurs.

 

Summary

The ng-include directive in AngularJS is a powerful tool for embedding templates into your application. It allows for dynamic inclusion of HTML files and is especially useful for creating modular and reusable components. Whether it's used with static, dynamic, or conditional URLs, ng-include can streamline your app's architecture by enabling the separation of concerns and reducing code duplication. Additionally, ng-include shares the scope between the parent and the included template, providing a seamless data flow across your views.