A set of placeholder directives & services for use during development of AngularJS apps.


Added by: Sam Deering





Stars: 206

Watchers: 206

Forks: 46

Module Description

Placeholders for AngularJS!

See the demo!

Placeholder Text

angular-placeholders includes a phTxt directive for the insertion of "Lorem ipsum"-style text. It can work as either an element or an attribute and accepts two optional attributes: num-sentences and num-paragraphs. If num-sentences is provided, the body of the element will be replaced with the specified number of sentences. num-paragraphs will replace the body of the element with the specified number of <p> tags containing random sentences.

The default behavior is a random number of paragraphs.

Placeholder Images

The phImg directive creates client-side placeholder images in any size. The directive creates a PNG image using the HTML5 canvas library and uses the generated client-side URL as the src on an img element.

The directive takes a single eponymous attribute that specifies the dimensions of the image to create; the expected format is "100x100".


The build toolchain for angular-placeholders was ~~stolen~~ borrowed from the ui-bootstrap project.

The build script is written using Grunt, a command-line build tool for JavaScript projects. To build, run the following command in the terminal:

$ grunt

That was easy! It will run tests, generate the documentation/demo site, compile the modules, and minify the source. The resulting files will be in the dist/ directory.

Module stats last updated: 2018-01-08 16:00:06

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!