AngularJS Placeholders
Client-side placeholder directives written in pure AngularJS by Josh David Miller
Img
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 either (a) the src
attribute, if the
element is an img
, or (b) the css-background
for all other types of
elements.
The directive takes a single eponymous attribute that specifies the dimensions of the image to create; the expected format is "100x100".
<div ng-controller="ImageDemoCtrl">
<ul class="thumbnails">
<li class="span3"><a class="thumbnail"><img ph-img="260x196" /></a></li>
<li class="span2"><a class="thumbnail"><img ph-img="160x83" /></a></li>
<li class="span1"><a class="thumbnail"><img ph-img="60x83" /></a></li>
<li class="span2"><a class="thumbnail"><img ph-img="160x83" /></a></li>
<li class="span1"><a class="thumbnail"><img ph-img="60x83" /></a></li>
</ul>
<hr />
<div>
<h3>It Can Also Do a CSS Background</h3>
<div ph-img="550x100" style="width: 550px; height: 100px; background-repeat: no-repeat;">
<h4>Oooh...</h4>
</div>
</div>
<hr />
<div>
<h3>It's More Powerful with Bootstrap!</h3>
<ul class="inline">
<li>
<h4><center><code>.img-polaroid</code></center></h4>
<img class="img-polaroid" ph-img="160x160" />
</li>
<li>
<h4><center><code>.img-circle</code></center></h4>
<img class="img-circle" ph-img="160x160" />
</li>
<li>
<h4><center><code>.img-rounded</code></center></h4>
<img class="img-rounded" ph-img="160x160" />
</li>
</ul>
</div>
<hr />
<div>
<h3>It Can Change in Real Time</h3>
<p>Image Dimensions: <input ng-model="imageDimension"></p>
<img class="img-polaroid" ph-img="{{imageDimension}}" />
</div>
</div>
var ImageDemoCtrl = function ( $scope ) {
$scope.imageDimension = '550x300';
};
Txt
Here's a few sentences
# Sentences:
And a few paragraphs
# Paragraphs:
And combining both:
# Paragraphs:
The phTxt
directive dynamically inserts "Lorem ipsum"-style text
into an element. It can work as either an element or an attribute.
phTxt
accepts a single value that can express the number of desired paragraphs
and/or sentences. The format is #p#s
, where the numbers represent the number
of requested paragraphs and sentences, respectively. Order is irrelevant.
If both are provided, the element will contain the requested number of paragraphs, each with the requested number of sentences.
If just the number of paragraphs is provided, the number of sentences will be random for each paragraph. If just the number of sentences is provided, no paragraphs will be generated - just the specified number of sentences.
If neither are provided, the default behavior is a random number of paragraphs, each with a random number of sentences.
<div ng-controller="TextDemoCtrl">
<h3>Here's a few sentences</h3>
<p># Sentences: <input ng-model="numSentences" /></p>
<p ph-txt="{{numSentences}}s"></p>
<h3>And a few paragraphs</h3>
<p># Paragraphs: <input ng-model="numParagraphs" /></p>
<div ph-txt="{{numParagraphs}}p"></div>
<h3>And combining both:</h3>
<p># Paragraphs: <input ng-model="numCombined" /></p>
<div ph-txt="{{numCombined}}"></div>
</div>
var TextDemoCtrl = function ( $scope ) {
$scope.numSentences = "3";
$scope.numParagraphs = "2";
$scope.numCombined = "2p3s";
};