AngularJS Placeholders

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

Code on Github Download (0.0.1-SNAPSHOT)


It Can Also Do a CSS Background

Oooh...


It's More Powerful with Bootstrap!

  • .img-polaroid

  • .img-circle

  • .img-rounded


It Can Change in Real Time

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>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';
};

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";
};