In this tutorial, we will learn to load a html page inside another html page, to do that we usually go for HTML iframe tag in which we can either set HTML file path or any URL from different domain in src attribute.

like:

<iframe src="http://findnerd.com"></iframe>

But in AngularJS we can do that by using ng-include directive, where we can give the path of our HTML page and in will be rendered within the HTML page. Ex.

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

Here ng-include is expecting variable with the name of the file to include. To pass the name directly as a string, we use single quotes (' . . . ').

We can also create the custom directive which allows us to write HTML that expresses the behavior of our application, where as HTML only defines us the structure of the page.

These Directives can also be used as :

• Expressing complex UI.
• Calling events and registering event handlers.
• Reusing the common components.

Ex.

In HTML side:

<product-title></product-title>

In JavaScript file we have:

app.directive('productTitle', function(){
// A configuration object defining how our directive will work
 return{
    restrict: 'E',   // this defines as the type of directive (E for Element)
    templareUrl: 'AddUser.html' // URL of the HTML page
};

});

Here dash in HTML translates to camelCase in JavaScript.