angular-string-interpolation

This module was created to help separate a projects copy from the project DOM. Currently you can easily abstract static text out into a constant or config but if that abstracted string needs any dynamic information you will be forced to split the copy up into many smaller parts or simply leave the copy directly in the DOM.

This module allows you to keep your raw copy out of the DOM while still allowing you to use dynamic data.

Plunker Demo

Comments and Pull Requests welcome!

Contents

• Installation
• Dependencies
• How Replacement Works
• Usage
• Directive
  • bc-string
  • bc-array
• Development

Installation

NPM

npm install angular-string-interpolation --save

Bower

bower install angular-string-interpolation --save

Manual

<script src="path/to/directory/dist/angular-string-interpolation.js"></script>

Dependencies

• Angular.js (~1.4.0)

How Replacement Works

This module uses the same basic format as ES6 template strings: ${0}. Rather than naming the custom variables as you would with template strings, these placeholders simply take an integer for each replacement with the first replacement starting with 0. These numbers will be used to get the correct content from the passed in array.

<bc-interpolate
  bc-string="Item 0 matches ${0}, item 1 matches ${1}, etc..."
  bc-array="['ZERO', 'ONE']"
></bc-interpolate>

<!-- Output:
  Item 0 matches ZERO, item 2 matches ONE, etc...
-->

You can use as many instances of a placeholder as needed:

<bc-interpolate
  bc-string="How much ${0} would a woodchuck ${1} if a ${0} ${1} could ${1} ${0}?"
  bc-array="['wood', 'chuck']"
></bc-interpolate>

<!-- Output:
  How much wood would a woodchuck chuck if a wood chuck could chuck wood?
-->

Usage

Include bc.AngularStringInterpolation as a dependency in your project.

angular.module('YourModule', ['bc.AngularStringInterpolation']);

Directive

Use the directive as an element or as an attribute:

<!-- As an element -->
<bc-interpolate
  bc-string="Who is ${0} without ${1}?"
  bc-array="['Statler', 'Waldorf']"
></bc-interpolate>

<!-- Output:
  Who is Statler without Waldorf?
-->

<!-- Or as an attribute -->
<div bc-interpolate
  bc-string="Who is ${1} without ${0}?"
  bc-array="['Calvin', 'Hobbes']"
></div>

<!-- Output:
  Who is Hobbes without Calvin?
-->

bc-string

This custom attribute accepts a string containing the items to be replaced.

// You can define all the content inside your controller
this.myString = 'You have ${0} dollars in your ${1} account.';

<bc-interpolate
  bc-string="{{ vm.myString }}"
  bc-array="['200', 'checking']"
></bc-interpolate>

<!-- Output:
  You have 200 dollars in your checking account.
-->

Or pass a string directly to the attribute:

<bc-interpolate
  bc-string="Who is ${0} without ${1}?"
  bc-array="['Garth', 'Wayne']"
></bc-interpolate>

<!-- Output:
  Who is Garth without Wayne?
-->

bc-array

This custom attribute accepts an array containing the items to be injected into the placeholders. As with bc-string you can define items in the controller or directly in the DOM.

// You can define the content inside your controller
const remainingCredits = 12;
const expiration = 'Aug 31st, 2016';
this.replacements = [remainingCredits, expiration];

<bc-interpolate
  bc-string="You have ${0} credits remaining until ${1}."
  bc-array="vm.replacements"
></bc-interpolate>

<!-- Output:
  You have 200 dollars in your checking account.
-->

Or pass an array directly to the attribute:

<bc-interpolate
  bc-string="Who is ${0} without ${1}?"
  bc-array="['Bullwinkle', 'Rocky']"
></div>

<!-- Output:
  Who is Bullwinkle without Rocky?
-->

Development

• npm run build - Build JS/CSS/HTML/SVG
• npm run build:js - Build JS
• npm run watch:js - Watch JS/HTML and rebuild on change
• npm run watch - Watch JS/HTML and rebuild on change