The WordPress REST API, in conjunction with a JavaScript MVC framework such as AngularJS, opens up endless opportunities for developers to build new types of plugins and customize user experiences. This webinar goes in-depth into how to use AngularJS with the WordPress REST API. Together, these tools help you tie systems together to customize user experiences, build plugins, and advance your business in new, innovative ways that are only limited by your imagination! What is covered in these slides: -How to make custom admin interfaces using REST API & Angular JS -2 practical examples of specific use cases: -Starting point - Simple example of creating a customized post editor with AngularJS. -End point - Using AngularJS to build a plugin admin screen using Ingot A/B testing plugin as an example.

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

2. 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

3. 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

4. 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

5. Is this the new way?

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

7. But admin-ajax!

8. 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

9. Part One
MVC

10. MVCMVC
●Model
●View
●Controller

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

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

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

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

15. Part Two
Bindings

16. 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

17. 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);

18. 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>

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

20. 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>

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

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

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

24. 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'
} )
});

25. 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;
}
);

26. 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' );
}
);
}]);

27. 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
}
},

28. 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 = [];
} );
}]);

29. 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

30. 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

31. 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