Block style template inheritance for AngularJS inspired by Jade, Handlebars, and Django.
Requires jquery.
Download angular-blocks.min.js or install with bower.
$ bower install angular-blocks --saveLoad angular-blocks.min.js then add the angular-blocks module to your Angular app.
angular.module('app', ['angular-blocks']);Given the template below:
<script type="text/ng-template" id="/layout.html"> <header data-block="header"> <p>:header</p> </header> <div data-block="content"> <p>:content</p> </div> <footer data-block="footer"> <p>:footer</p> </footer> </script><div data-extend-template="/layout.html"> <div data-block="content"> <p>Foo</p> </div> </div>Becomes:
<div data-extend-template="/layout.html"> <header data-block="header"> <p>:header</p> </header> <div data-block="content"> <p>Foo</p> </div> <footer data-block="footer"> <p>:footer</p> </footer> </div><div data-extend-template="/layout.html"> <div data-block-prepend="content"> <p>Foo</p> </div> </div>Becomes:
<div data-extend-template="/layout.html"> <header data-block="header"> <p>:header</p> </header> <div data-block="content"> <div data-block-prepend="content"> <p>Foo</p> </div> <p>:content</p> </div> <footer data-block="footer"> <p>:footer</p> </footer> </div><div data-extend-template="/layout.html"> <div data-block-append="content"> <p>Foo</p> </div> </div>Becomes:
<div data-extend-template="/layout.html"> <header data-block="header"> <p>:header</p> </header> <div data-block="content"> <p>:content</p> <div data-block-append="content"> <p>Foo</p> </div> </div> <footer data-block="footer"> <p>:footer</p> </footer> </div><div data-extend-template="/layout.html"> <div data-block-before="content"> <p>Foo</p> </div> </div>Becomes:
<div data-extend-template="/layout.html"> <header data-block="header"> <p>:header</p> </header> <div data-block-before="content"> <p>Foo</p> </div> <div data-block="content"> <p>:content</p> </div> <footer data-block="footer"> <p>:footer</p> </footer> </div><div data-extend-template="/layout.html"> <div data-block-after="content"> <p>Foo</p> </div> </div>Becomes:
<div data-extend-template="/layout.html"> <header data-block="header"> <p>:header</p> </header> <div data-block="content"> <p>:content</p> </div> <div data-block-after="content"> <p>Foo</p> </div> <footer data-block="footer"> <p>:footer</p> </footer> </div>See the spec.
The project requires Bower, Grunt, and PhantomJS. Once you have installed them, you can build, test, and run the project.
To build and run tests, run either...
$ make installor
$ npm install $ bower install $ grunt buildCopyright (c) 2013 William L. Bunselmeyer. https://github.com/wmluke/angular-blocks
Licensed under the MIT License