nvdnkpr / angular-blocks

Template inheritance for Angular JS

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:

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