Benson

Simple Angular integration with the WP REST API. Takes an endpoint and binds it to scope so you can use mustache in your templates and the WordPress HTML editor.

Description

Benson accepts a local endpoint from your wordpress install, binds the result to scope and makes that available to your templates and the WordPress HTML editor.

Supports ACF.

Installation

1. Upload benson to the /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress

Usage

1. Add an endpoint to a post or page
2. Check any modules you want to include
3. Write your controllers in a wordpress template or within the HTML editor.

Frequently Asked Questions

Where do I get my endpoint?

Use this for now. Eventually it'll be part of core.

How do I template?

Use ng-app="benson" and ng-controller="MainController" like this:

<div ng-app="benson">
  <div ng-controller="MainController">
    {{title}}
    {{content}}
  </div>
</div>

Recipes

Show posts with input for filtering

<div ng-app="benson" ng-controller="MainController">

  <form class="form-inline">
      <input ng-model="query" type="text" placeholder="Filter by" autofocus>
  </form>

Showing {{(data | filter: query).length}} of {{data.length}} posts.

  <div ng-repeat="post in data | filter: query">
    <h1>{{post.title}}</h1>
    <div ng-bind-html="post.content">{{post.content}}</div>
  </div>
</div>

Show posts with input for filtering and pagination

<div ng-app="benson" ng-controller="MainController">

  <form class="form-inline">
      <input ng-model="query" type="text" placeholder="Filter by" autofocus>
  </form>

  Showing {{(data | filter: query).length}} of {{data.length}} posts.

  <div dir-paginate="post in data | itemsPerPage: 5 | filter: query">
    <h1>{{post.title}}</h1>
    <div ng-bind-html="post.excerpt">{{post.excerpt}}</div>
  </div>

  <dir-pagination-controls></dir-pagination-controls>

</div>

Check out the Angular docs for more info.

How do I sanitize html?

use ng-bind-html like this

<div ng-bind-html="content"></div>

Why Benson?

Because he is a gumball machine, also known as The Park's manager. [source]

Change log

v1.1.1 Add support for loading animations

v1.1 Added pagination module option https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination