npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-string-interpolation

v1.1.1

Published

A simple module that allows you to inject content into strings.

Downloads

3

Readme

angular-string-interpolation

inˈtərpəˌlāt/ - verb: insert (something) between fixed points

This module was created to help developers create a separation between the text for a project and the actual project code. Currently you can easily abstract static text out into a constant or configuration file, but if that abstracted string needs any dynamic information you will be forced to split the copy up into many smaller parts or leave the copy directly in the DOM.

This module allows you to keep marketing or interface copy out of the DOM while still allowing you to use dynamic data.

:tv: All Demos

Comments and Pull Requests welcome!

Contents

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?
-->

:tv: Directive demo

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?
-->

Service

The interpolation method is exposed through bcInterpolationService. This allows you to interpolate text inside a controller, service or anywhere it is needed.

Parameters
  • string: {String}
    • A string containing placeholders (${})
  • values: {Array}
    • An array of values to replace the placeholders
Returns String

:tv: Service demo

// Controller Example

export class MyController() {
  // Inject the service into your controller
  constructor(bcInterpolationService) {
    'ngInject';

    // Define our string and the values to inject into the placeholders
    this.string = 'You have ${0} credits remaining as of ${1}.';
    this.values = ['12', new Date()];

    // Pass both into the service to get back an interpolated string
    this.string = bcInterpolationService.interpolate(string, values);

  }
}

Filter

The interpolation method is also exposed through the bcInterpolation filter. This allows several uses.

Parameters
  • string: {String}
    • A string containing placeholders (${})
  • values: {Array}
    • An array of values to replace the placeholders
Returns String

:tv: Filter demo

// Controller Example

export class MyController() {
  constructor() {

    // Define our string and the values to inject into the placeholders
    this.string = 'You have ${0} credits remaining as of ${1}.';
    this.values = ['12', new Date()];

    // Pass both into the filter to get back the interpolated string
    this.filteredString = this.$filter('bcInterpolation')(string, values);

    // Outputs:
    // "You have 12 credits remaining as of Fri Jul 08 2016 16:45:19 GMT-0400 (EDT)."

  }
}
<p>
  {{ vm.string | bcInterpolation:vm.values }}
</p>

<!-- or -->

<p>
  {{ "Neither ${0} nor ${1} nor ${2} nor gloom of ${3}..." |
      bcInterpolation:['❄', '🌧', '🔥', '🌃'] }}
</p>

<!-- Outputs:
  Neither ❄ nor 🌧 nor 🔥 nor gloom of 🌃...
-->

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