Template inheritance for Angular JS
JavaScript Makefile
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test Added `$blocksExtendTemplateLinkStart` and `$blocksExtendTemplateLink… Mar 11, 2016
.gitattributes
.gitignore
.jshintrc
.travis.yml Added coveralls.io support Feb 17, 2014
Gruntfile.js
LICENSE
Makefile
bower.json
karma.conf.js
npm-shrinkwrap.json Added `$blocksExtendTemplateLinkStart` and `$blocksExtendTemplateLink… Mar 11, 2016
package.json Bumped version to 0.1.10 Mar 11, 2016
readme.md

readme.md

angular-blocks

Build Status Coverage Status

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