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