AngularJs (1.X) Include Partial Template

Question

I've this in my main layout file

<body>
    <header id="header" ng-controller="HeaderController"></header>
    <div class="container" ng-view></div>

I've a header.html partial template in my directory structure.

How to include this template in my app? I thought angular automatically includes the template after processing the controller, but it doesnt work.

The header node should be replaced with the content of this file.

Can you provide more of your code? The controllers for example... — thomas, Mar 11 '14 at 15:16
Hey, sure. But these controllers are empty atm. I've pasted bin it here: http://pastebin.com/89EzgzSH — user3403716, Mar 11 '14 at 15:33

score 97 · Accepted Answer · edited Mar 04 '15 at 04:02

97

One way of including templates/html fragments from external files is to use the ng-include directive (doc).

<ng-include src="'/path/to/the/header.html'"></ng-include>

or

<div ng-include src="'/path/to/the/header.html'"></div>

edited Mar 04 '15 at 04:02

user276648

6,018
6
60
86

answered Mar 11 '14 at 20:39

Suvi Vignarajah

5,758
27
38

3

Hey, thanks. This works! But this resolves in a another problem. I've an image tag inside in of these templates and If I include the template with ng-include, the image wont load anymore. I'm sure, that the image path is correct. – user3403716 Mar 12 '14 at 08:52
strange, haven't run into that one..it'd be safe to reference your image with the `ng-src` attribute, see if that helps – Suvi Vignarajah Mar 12 '14 at 18:29
Yah, tried this already....It happens only sometimes. Maybe it has nothing to do with angular. anyways, thank you for your answer :) – user3403716 Mar 12 '14 at 19:57
1

The div syntax is wrong, it should be something like: `
` – ariscris Jun 25 '14 at 19:30
18

Just posted an edit, but I'll say it again here. Make sure to wrap string constants in single quotes like this: `"'/path/to/header.html'"` – Joel Brewer Sep 24 '14 at 19:47
but what if I've something like that?
– yu.pitomets Sep 17 '15 at 21:57
@user1315599 Then you should get rid of the single quotes, it should just be `src="{{ part }}"` - provided that `part` is of type `string` – Suvi Vignarajah Sep 18 '15 at 04:14
The problem with ng-include is that it loads the partial asynchronously. So if you use it inside a custom directive that manipulates DOM, the directive's link function won't get the DOM ready. – C-F Feb 16 '16 at 00:37
this worked for me, thank you so much. This helped alot. – Mrunal Jun 20 '16 at 15:04
1

Single quotes do matter. Otherwise it's not working. I thought I did mistake and removed single quotes, and it stopped working. So you should use: `
`. – liberborn Dec 19 '17 at 13:44

score 6 · Answer 2 · answered Nov 25 '15 at 00:24

From Angular 2, ngInclude has been removed and custom directives are preferred. This is the way I come up with

Define the main component for your app, which link to the master page

    @View({
        templateUrl:   'client/app/layout/main.html',
        directives: [ROUTER_DIRECTIVES, Navigation, Footer]
    })
    @Component({selector: 'app'})
    @RouteConfig(
        routerConfig
    )
    class MainComponent {
    }

And this is the main template

<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->

<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->

Define a base.html, which will contain the body tag and the app tag

<body> <app>Loading ...</app> </body>

Now, final step is defining the components for Navigation and Footer like the MainComponent, which point to your partial templates

With Angular2 Is there a way to use a non-visible div in your index.html as a template, for example? — Chris K, Dec 23 '15 at 16:57

AngularJs (1.X) Include Partial Template

2 Answers2

Linked