angular-blocks
Block style template inheritance for AngularJS inspired by Jade, Handlebars, and Django.
Installation
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']);Usage
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>Block Replace: data-block
<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>Block Prepend: data-block-prepend
<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>Block Append: data-block-append
<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>Block Before: data-block-before
<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>Block After: data-block-after
<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>API
See the spec.
Contributing
Prerequisites
The project requires Bower, Grunt, and PhantomJS. Once you have installed them, you can build, test, and run the project.
Build & Test
To build and run tests, run either...
$ make installor
$ npm install
$ bower install
$ grunt buildLicsense
Copyright (c) 2013 William L. Bunselmeyer. https://github.com/wmluke/angular-blocks
Licensed under the MIT License