Extending AngularJS Templates

Question

In the Play! Framework, I can do the following to DRY up my layout code:

In main.html:

<h1>This is main</h1>

#{doLayout /}

<div id="footer">Footer content</div>

In home.html:

 #{extends 'main.html' /}  

 <p>This is the home page content</p>

I would like to do the same in AngularJS i.e I would like to create an HTML file and have it inherit from another. I see that there is the ngInclude directive, but using it causes a lot of layout code duplication in my current application. If AngularJS does not natively support it, are there any other HTML templating solutions that do?

Thanks.

Answer 1

ng-view directive updates the current element with the new data/template that comes from router, so you can make a generic layout and use ng-view, and if you still have a repetitive code; use ng-include.

Answer 2

Take a look at https://github.com/wmluke/angular-blocks. Looks like it has the thing you are looking for

Yeah i know this is an old question but I got here through googling the same thing so maybe It will help someone :)