Sharing partial pages between views in AngularJS

Question

I have a classic AngularJS application with a routing to several views, each one having its own controller. I have some pages very different from the other ones, so my amount of shared HTML between the pages is kind of low :

<html>
 <head>    
  <!-- typical header links -->
 </head>
 <body ng-app="NeXT">

 <div class="div_view" ng-view></div>

 </body>
</html>

But now, I have several views having the same header and I wonder how to make them share the same header without changing this file, because I still have some pages I don't want the header in. Basically, I'm looking for a "control" I can share between my views, so I don't have to copy/paste my header in each view I need it.

I'm pretty sure there is a way to do that in AngularJS but I could not find my answer on Google, what is the name of the component I am looking for please ?

Thank you !

Bas Slagter · Accepted Answer · 2015-03-17 14:10:32Z

1

If you want your header to appear on certain pages only you can:

a. create a directive of your header and include this directive in the template's your want.

b. create a directive of your header, place it outside your view and let it hide/show on certain pages. This can, for example, be done by listening to the $locationChangeSuccess event of angular.

answered Mar 17, 2015 at 14:10

Bas Slagter

9,9419 gold badges51 silver badges81 bronze badges

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

2 Comments

bviale Over a year ago

Thank you for your answer, so using directives I can write something like <div ng-headerDirective="My text to display in header"></div> wherever I need it, and it could produce innerHTML like <h1>My text to display in header</h1> according to the way I have implemented it ?

Bas Slagter Over a year ago

Well...that's more a question regarding AngularJS basics on directives. Try to read more on that. One hint: you probably want to do something with transclusion.

bviale · Accepted Answer · 2015-03-18 09:23:40Z

So I went through my need with directives as Baszz advised me. For the header, I have created a new directive having a scope variable (let's say 'title'), and a link to a HTML template file :

        angular.module('next.directives', [])
.directive('nextHeader', function() {
    return {
        restrict:'E',
        transclude: true,
        replace : true,
        scope : {
            'title': '@'
        },
        templateUrl: "app/views/partials/header.html"
    }; 
});

In the header.html file, I put my template like (simplified) :

<h1>{{ title }}</h1>

And from there, wherever I needed a header, I could write the tag

<next-header title="My awesome title"></next-header>

which replace "next-header" by the h1 tag with the appropriate title. This is what I was looking for, coming from an ASP.NET MVC environment.

Hope it can help someone, cheers

Collectives™ on Stack Overflow

Sharing partial pages between views in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related