+ +
+
+

+ AngularJS Placeholders +

+ +

Client-side placeholder directives written in pure AngularJS by Josh David Miller

+ +

+ Code on Github + + Download (0.0.1-SNAPSHOT) + +

+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + + +
    • +
  • + +
    + + + +
    • +
+
+
+
+ +
+ +
+
+

Img

+
+
+
+
+
    +
    • +
    • +
    • +
    • +
    • +
+
+
+

It Can Also Do a CSS Background

+
+

Oooh...

+
+
+
+
+

What about a custom label?

+ +
+
+
+

It's More Powerful with Bootstrap!

+
    +
  • +

    .img-polaroid

    + +
    • +
  • +

    .img-circle

    + +
    • +
  • +

    .img-rounded

    + +
    • +
+
+
+
+

It Can Change in Real Time

+

Image Dimensions:

+

Image Dimensions:

+ +
+
+ +
+
+

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

+
+ From module: placeholders.img +
+
+
+
+
+
+
+ +
+ + 
<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>What about a custom label?</h3>
+    <img ph-img="550x90" ph-img-label="Custom label">
+  </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>
+    <p>Image Dimensions: <input ng-model="imageLabel"></p>
+    <img class="img-polaroid" ph-img="{{imageDimension}}" ph-img-label="{{imageLabel}}" />
+  </div>
+</div>
+
 + 
var ImageDemoCtrl = function ( $scope ) {
+  $scope.imageDimension = '550x300';
+  $scope.imageLabel = 'labels are awesome!';
+};
+
 + +
+
+
+ + +
+
+

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.

+
+ From module: placeholders.txt +
+
+
+
+
+
+
+ +
+ + 
<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";
+};
+
 + +
+
+
+ + +
+