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 --save

Load angular-blocks.min.js then add the angular-blocks module to your Angular app.

angular.module('app',['angular-blocks']);

Usage

Given the template below:

<scripttype="text/ng-template" id="/layout.html"><headerdata-block="header"><p>:header</p></header><divdata-block="content"><p>:content</p></div><footerdata-block="footer"><p>:footer</p></footer></script>

Block Replace: data-block

<divdata-extend-template="/layout.html"><divdata-block="content"><p>Foo</p></div></div>

Becomes:

<divdata-extend-template="/layout.html"><headerdata-block="header"><p>:header</p></header><divdata-block="content"><p>Foo</p></div><footerdata-block="footer"><p>:footer</p></footer></div>

Block Prepend: data-block-prepend

<divdata-extend-template="/layout.html"><divdata-block-prepend="content"><p>Foo</p></div></div>

Becomes:

<divdata-extend-template="/layout.html"><headerdata-block="header"><p>:header</p></header><divdata-block="content"><divdata-block-prepend="content"><p>Foo</p></div><p>:content</p></div><footerdata-block="footer"><p>:footer</p></footer></div>

Block Append: data-block-append

<divdata-extend-template="/layout.html"><divdata-block-append="content"><p>Foo</p></div></div>

Becomes:

<divdata-extend-template="/layout.html"><headerdata-block="header"><p>:header</p></header><divdata-block="content"><p>:content</p><divdata-block-append="content"><p>Foo</p></div></div><footerdata-block="footer"><p>:footer</p></footer></div>

Block Before: data-block-before

<divdata-extend-template="/layout.html"><divdata-block-before="content"><p>Foo</p></div></div>

Becomes:

<divdata-extend-template="/layout.html"><headerdata-block="header"><p>:header</p></header><divdata-block-before="content"><p>Foo</p></div><divdata-block="content"><p>:content</p></div><footerdata-block="footer"><p>:footer</p></footer></div>

Block After: data-block-after

<divdata-extend-template="/layout.html"><divdata-block-after="content"><p>Foo</p></div></div>

Becomes:

<divdata-extend-template="/layout.html"><headerdata-block="header"><p>:header</p></header><divdata-block="content"><p>:content</p></div><divdata-block-after="content"><p>Foo</p></div><footerdata-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 install

or

$ npm install
$ bower install
$ grunt build

Licsense

Copyright (c) 2013 William L. Bunselmeyer. https://github.com/wmluke/angular-blocks

Licensed under the MIT License