Login/Register
AngularJs (1.X) Include Partial Template
Asked Answered
Solved angularjstemplatesincludepartial
H

2

59

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.

Hoke answered 11/3, 2014 at 15:12 Comment(2)
Can you provide more of your code? The controllers for example... – Percale
Hey, sure. But these controllers are empty atm. I've pasted bin it here: pastebin.com/89EzgzSH – Hoke
S
98

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>
Selfreproach answered 11/3, 2014 at 20:39 Comment(10)
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. – Hoke
strange, haven't run into that one..it'd be safe to reference your image with the ng-src attribute, see if that helps – Selfreproach
Yah, tried this already....It happens only sometimes. Maybe it has nothing to do with angular. anyways, thank you for your answer :) – Hoke
The div syntax is wrong, it should be something like: <div ng-include="/path/to/header.html"></div> – Krispin
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'" – Kerianne
but what if I've something like that? <div ng-include src="'{{ part }}'"></div> – Ottillia
@user1315599 Then you should get rid of the single quotes, it should just be src="{{ part }}" - provided that part is of type string – Selfreproach
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. – Susumu
this worked for me, thank you so much. This helped alot. – Ranaerancagua
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: <div ng-include src="'template.html'"></div>. – Leprosy
G
6

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

  1. 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 ---->
  1. Define a base.html, which will contain the body tag and the app tag

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

  1. Now, final step is defining the components for Navigation and Footer like the MainComponent, which point to your partial templates
Gale answered 25/11, 2015 at 0:24 Comment(3)
With Angular2 Is there a way to use a non-visible div in your index.html as a template, for example? – Pickup
I have the same question. but also need it for angular 1 – Everick
We need answer about angularjs, not angular 2+. – Mundford

© 2022 - 2024 — McMap. All rights reserved.