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

Is this the new way?

What is the benefit?● Respects standards &

separation of concerns● Relatively easy to learn● Testable● Someone else pays to

maintain it. #thanksgoogle

But admin-ajax!

Custom or Default Routes

#wprestapi

Use Default Routes

❖ Install the plugin

❖ https://wordpress.org/plugins/rest-api/

Make Your Own Endpoints

❖ Make your own API with WordPress 4.4+

❖ Talk: video, slides & links

❖ Torque Article

Part One

MVC

MVCMVC●Model●View●Controller

MVCModelThe model is the current set of data, defined by the controller,

displayed by the view.

MVC$scopeCurrent 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.

Part Two

Bindings

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(function(angular) { 'use strict'; angular.module('learnAngular', []) .controller('postExample', ['$scope', function($scope) { $scope.post = { title: 'Enter Title' }; $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.

(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);

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

n-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 APIhttp://wpeng.in/rest-api-ebook/

❖Article: Basics of AngularJS with the WordPress REST APIhttp://torquemag.io/2016/02/basics-of-angularjs-with-the-wordpress-rest-api/

❖Building Apps with the WordPress REST APIhttps://learn.joshpress.net/downloads/building-apps-wordpress-rest-api/

❖Creating a Javascript Single Page App in the WordPress Dashboardhttp://torquemag.io/2015/12/creating-javascript-single-page-app-wordpress-dashboard/ #wprestapi

CalderaWPREST API CourseCalderaWP.com

Q&A

Feel free to ask away inthe “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, orChat 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