How to insert template in html using angular?

Question

Scenario:- I have html page rendering as angular template/view. Now there are big number of such template.

Now these templates has div in header part that is fixed through out the templates, now is there some-way that we can define one sub-template at one place and just insert that sub-template in all pages.

So that if there are any modification to be made, I will make in sub-template and that will be reflected in all the page.

Its like UserControls or Partials that we have in ASP.Net.

I am using AgularJS
Agreed that there are ui-routing for nested hosting but currently I am not looking for that.

Mihai Dinculescu · Accepted Answer · 2015-09-03 11:58:06Z

6

Try

<div ng-include="path/to/template"></div>

edited Sep 3, 2015 at 11:58

Mihai Dinculescu

20.1k8 gold badges58 silver badges70 bronze badges

answered Sep 3, 2015 at 11:35

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle Cordes Over a year ago

This answer is simplest, and most directly does exactly the thing asked for. The other answers are probably more suitable for a real application, because quite commonly over time it becomes desirable to add some behavior as well as just a reused template. But that is more than needs to be understood for the problem at hand.

Rakeshk Khanapure · Accepted Answer · 2015-09-03 12:05:13Z

you can create a seperate html file as template for header if it includes complex or considerable amount of elements. create a directive for this template and use it as an attribute/customTag or include it in your html using ng-include.

app.directive('header',function(){      
    return {
        restrict: 'E', //'E': element /'A': attribute
        templateUrl : 'templates/header.html'
    }   
});

use as attribute

<div header></div> // as Attribute
<header></header> // as element

if your header involves lot of functioning on it then you can also create a separate controller (which will act as a child controller) and add the controller to the above tags. such as

<header ng-controller="headerController"></header>

Wictor Chaves · Accepted Answer · 2019-01-08 13:06:29Z

0

You probably want to use a directive template. This is a very simple directive with only the template information. Eg:

<top-header></top-header>

module.directive('topHeader', function() {
    return { 

        templateUrl: 'path', 

        // append 
        replace: true, 

        // attribute restriction 
        restrict: 'E'

    } 
});

edited Jan 8, 2019 at 13:06

Wictor Chaves

1,1591 gold badge15 silver badges25 bronze badges

answered Sep 3, 2015 at 12:07

Gerard Sans

2,2791 gold badge15 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to insert template in html using angular?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related