https://github.com/wmluke/angular-blocks

Template inheritance for Angular JS
https://github.com/wmluke/angular-blocks

Last synced: 5 days ago
JSON representation

Template inheritance for Angular JS

• Host: GitHub
• URL: https://github.com/wmluke/angular-blocks
• Owner: wmluke
• License: mit
• Created: 2013-04-23T10:27:46.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2018-03-15T18:57:08.000Z (over 6 years ago)
• Last Synced: 2024-10-01T14:10:56.462Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://www.bunselmeyer.net/#!/thoughts/angular-blocks
• Size: 421 KB
• Stars: 216
• Watchers: 11
• Forks: 24
• Open Issues: 8
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - wmluke/angular-blocks - Template inheritance for Angular JS (others)

README

        
# angular-blocks

[![Build Status](https://travis-ci.org/wmluke/angular-blocks.png?branch=master)](https://travis-ci.org/wmluke/angular-blocks)

[![Coverage Status](https://coveralls.io/repos/wmluke/angular-blocks/badge.png?branch=master)](https://coveralls.io/r/wmluke/angular-blocks?branch=master)

Block style template inheritance for [AngularJS](http://angularjs.org) inspired by [Jade](http://jade-lang.com), [Handlebars](http://thejohnfreeman.com/blog/2012/03/23/template-inheritance-for-handlebars.html), and [Django](https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance).

## Installation

Requires jquery.

Download [angular-blocks.min.js](https://github.com/wmluke/angular-blocks/blob/master/dist/angular-blocks.min.js) or install with bower.

```bash

$ bower install angular-blocks --save

```

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

```javascript

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

```

## Usage

Given the template below:

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

```

### Block Replace: `data-block`

```html



   


       
Foo

   



```


Becomes:

```html



    

        
:header

    

    


        
Foo

    

    

        
:footer

    



```


### Block Prepend: `data-block-prepend`

```html



   


       
Foo

   



```


Becomes:

```html



    

        
:header

    

    


       


           
Foo

       

       
:content

    

    

        
:footer

    



```


### Block Append: `data-block-append`

```html



   


       
Foo

   



```


Becomes:

```html



    

        
:header

    

    


       
:content

       


           
Foo

       

    

    

        
:footer

    



```


### Block Before: `data-block-before`

```html



   


       
Foo

   



```


Becomes:

```html



    

        
:header

    

   


       
Foo

   

    


       
:content

    

    

        
:footer

    



```


### Block After: `data-block-after`

```html



   


       
Foo

   



```


Becomes:

```html



    

        
:header

    

    


       
:content

    

   


       
Foo

   

    

        
:footer

    



```


## API

See the [spec](https://github.com/wmluke/angular-blocks/blob/master/test/angular-blocks-spec.js).

## Contributing

### Prerequisites

The project requires [Bower](http://bower.io), [Grunt](http://gruntjs.com), and [PhantomJS](http://phantomjs.org).  Once you have installed them, you can build, test, and run the project.

### Build & Test

To build and run tests, run either...

```bash

$ make install

```

or

```bash

$ npm install

$ bower install

$ grunt build

```

## Licsense

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

Licensed under the MIT License