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.

Umur Kontacı · Accepted Answer · 2012-08-27 09:04:29Z

9

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.

answered Aug 27, 2012 at 9:04

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

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

Comments

Eisi Sig · Accepted Answer · 2014-01-26 02:26:47Z

9

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 :)

edited Jan 26, 2014 at 2:26

answered Jan 26, 2014 at 1:46

Eisi Sig

1011 silver badge4 bronze badges

1 Comment

Øystein Amundsen Over a year ago

This should be marked as the correct answer to this question.

Collectives™ on Stack Overflow

Extending AngularJS Templates

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related