Webinar: AngularJS and the WordPress REST API

Technical Deep Dive into AngularJS and the
WordPress REST API
March 16th, 2016
#wprestapi
Vote for your favorite plugins:
www.pluginmadness.com

Ask Questions as We Go!
Please use the “Questions”
pane throughout the webinar
#wprestapi
Slides and recording will be made available shortly after
the webinar

What We’ll Discuss
Building on last webinar:
The WP REST API as a Springboard for Website Greatness
❖ How to make custom admin interfaces using REST API
and AngularJS
❖ Angular basics with the WordPress REST API
❖ Build a plugin admin screen (Ingot A/B testing)
#wprestapi

Quick Intros!
#wprestapi
Josh Pollock
Owner/Developer,
CalderaWP and Ingot
@josh412
❖ CalderaWP.com
❖ IngotHQ.com
❖ JoshPress.net
Anthony Burchell
Operations Engineer,
WP Engine
@antpb
❖ Started on WordPress 2.8
❖ Casual Core Contributor
❖ Antpb.com
❖ Synth nerd

What is the benefit?
● Respects standards &
separation of concerns
● Relatively easy to
learn
● Testable
● Someone else pays to
maintain it.
#thanksgoogle

Custom or Default Routes
#wprestapi
Use Default Routes
❖ Install the plugin
❖ https://wordpress.org/plugins/r
est-api/
Make Your Own Endpoints
❖ Make your own API with
WordPress 4.4+
❖ Talk: video, slides & links
❖ Torque Article

MVCMVC
●Model
●View
●Controller

MVCModel
The model is the current set of
data, defined by the controller,
displayed by the view.

MVC$scope
Current state of the
model. Defined in
controller - used in
view.

MVCView
● The visual representation of
the data.
● In Angular this is an HTML
file.

MVCController
● Keeps the models up-to-
date using the remote API.
● Updates the model based on
your interactions with the
view.

MVCBindings
● Connects views to
controllers.
● HTML5 Attributes
● Template Tags: Curly
Brackets
<div ng-controller="postExample">
<form>
<input type="text" ng-model="post.title" />
</form>
<div>{{post.title}}</div>
</div>
Controller

MVCBindings
● Use controller function to
create controller...
● $scope is available in view
Template
(function(angular) {
'use strict';
angular.module('learnAngular', [])
.controller('postExample', ['$scope',
function($scope) {
$scope.post = {
title: 'Enter Title'
};
}]);
})(window.angular);

MVCBindings
● Bindings can be used to call
functions
● Examples:
○ ng-submit
○ ng-hide
Views
<div ng-controller="postExample">
<form ng-submit="submit()">
<input type="text" ng-model="post.title" />
<input type="submit" value="Save" ng-
hide="post.title == 'Enter Title'" />
</form>
<div>{{post.title}}</div>
</div>

MVCBindings
● Define functions for view on
$scope.
● Example: $scope.submit
Controller
'use strict';
.controller('postExample', ['$scope',
function($scope) {
$scope.post = {
};
$scope.submit = function(){
alert( 'saving' );
}
}]);
})(window.angular);

MVCBindings
● ng-repeat:
○ Repeat items (like a list
of posts)
Views
<div ng-controller="postsExample">
<h3>Posts:</h3>
<div ng-repeat="post in posts">
{{post.title}}
</div>
</div>

MVCBindings
● Look mom, two controllers!
● Iterating over posts array.
'use strict';
.controller('postExample', ['$scope', function($scope) {
$scope.post = {
};
$scope.submit = function(){
alert( 'saving' );
}
}]).controller('postsExample', ['$scope', function($scope) {
$scope.posts = [
{ title: 'Post One' },
{ title: 'Post Two' }
];
}]);
})(window.angular);

Making your own
Super Fast Super Fancy Admin Interface!
Or….

SFSFAI!
This is going to catch on...
Making your own
Super Fast Super Fancy Admin Interface!

MVCAngular
UI Router
● What URL uses what
controller and template?
● http://jpwp.me/ingot-router
ingotApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
//click tests
.state('clickTests', {
url: "/click-tests",
templateUrl: INGOT_ADMIN.partials + "/click-groups.html"
})
.state('clickTests.list', {
url: "/click-tests/all",
templateUrl: INGOT_ADMIN.partials + "/list.html",
controller: 'clickGroups'
} )
.state('clickTests.edit', {
url: "/click-tests/edit/:groupID",
templateUrl: INGOT_ADMIN.partials + "/click-group.html",
controller: 'clickGroup'
} )
.state('clickTests.new', {
url: "/click-tests/new",
templateUrl: INGOT_ADMIN.partials + "/click-group.html",
controller: 'clickGroup'
} )
});

MVCStart it up
● Include dependencies
● Adding translations to
$rootScope
var ingotApp = angular.module('ingotApp', [
'ui.router',
'ui.bootstrap',
'colorpicker.module',
'ngAria',
'ngResource',
'ngclipboard',
'ngSanitize'
] )
.run( function( $rootScope, $state ) {
$rootScope.translate = INGOT_TRANSLATION;
$rootScope.partials_url = INGOT_ADMIN.partials;
}
);

MVCAngular
$http
● Similar to jQuery AJAX
● Use to update $scope and
$state
ingotApp.controller( 'clickDelete', ['$scope', '$http',
'$stateParams', '$state', function( $scope, $http, $stateParams,
$state ){
$http({
url: INGOT_ADMIN.api + 'groups/' + $stateParams.groupID +
'?_wpnonce=' + INGOT_ADMIN.nonce,
method:'DELETE',
headers: {
'X-WP-Nonce': INGOT_ADMIN.nonce
}
} ).then(
function successCallback() {
swal( INGOT_TRANSLATION.deleted, "", "success" );
$scope.group = {};
$state.go('clickTests.list' );
}, function errorCallback( response ) {
var data = response.data;
var text = INGOT_TRANSLATION.sorry;
if( _.isObject( data ) && _.isDefined( data.message
) ){
text = data.message;
}
$state.go('clickTests.list' );
}
);
}]);

MVCFactories
● Reusable code for HTTP
● Makes data an injected
dependency -- easily
mocked/ modified
● http://jpwp.me/ingot-factory
ingotApp.factory( 'groupsFactory', function( $resource ) {
return $resource( INGOT_ADMIN.api + 'groups/:id', {
id: '@id',
_wpnonce: INGOT_ADMIN.nonce,
context: 'admin'
},{
'query' : {
transformResponse:
function( data, headers ) {
var
response = {
data: data,
headers: headers()
};
return
response;
}
},
'update':{
method:'PUT',
headers: {
'X-WP-Nonce': INGOT_ADMIN.nonce
}
},

MVCFactories
● Think of it as your own API
client
● http://jpwp.me/ingot-factory-
in-use
ingotApp.controller( 'clickGroups', ['$scope', '$http',
'groupsFactory', '$sce', function( $scope, $http, groupsFactory,
$sce ) {
var page_limit = 10;
$scope.description = $sce.trustAsHtml(
INGOT_TRANSLATION.descriptions.click );
groupsFactory.query( {
page: 1,
limit: page_limit,
context: 'admin',
type: 'click'
}, function ( res ) {
if ( res.data.indexOf( 'No matching' ) > -1 ) {
$scope.groups = {};
return;
};
$scope.groups = JSON.parse( res.data );
var total_groups = parseInt( res.headers[ 'x-ingot-total'
] );
var total_pages = total_groups / page_limit;
$scope.total_pages = new Array( Math.round( total_pages )
);
$scope.groups.shortcode = [];
} );
}]);

Resources
❖eBook: The Ultimate Guide to the WordPress REST API
http://wpeng.in/rest-api-ebook/
❖Article: Basics of AngularJS with the WordPress REST API
http://torquemag.io/2016/02/basics-of-angularjs-with-the-wordpress-rest-
api/
❖Building Apps with the WordPress REST API
https://learn.joshpress.net/downloads/building-apps-wordpress-rest-api/
❖Creating a Javascript Single Page App in the WordPress Dashboard
http://torquemag.io/2015/12/creating-javascript-single-page-app-wordpress-
dashboard/
#wprestapi

CalderaWP
REST API Course
CalderaWP.com
Q&A
Feel free to ask away in
the “Questions” pane!
Are you an agency or freelancer?
● Finish more sites in less time
● Unlimited staging installs for WordPress projects for as little
as $29 per month.
Ask about qualifying for a listing in our online consultants’ directory!
Call +1-512-827-3500, or
Chat with us wpengine.com

Myths, Mistakes & Management of WooCommerce at Scale
Wednesday, April 13th, 12 pm EDT/ 11 am CDT/ 9 am PDT/ 5 pm GMT+1
Register Now! http://wpeng.in/woo/
❖ Myths associated with scaling WooCommerce
❖ Mistakes and how to avoid them
❖ How to pick development and hosting partners
Next
Next Webinar

Webinar: AngularJS and the WordPress REST API

Recommended

More Related Content

What's hot (20)

Similar to Webinar: AngularJS and the WordPress REST API (20)

More from WP Engine UK (10)

Recently uploaded (20)

Webinar: AngularJS and the WordPress REST API