Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Single Page Web Apps As WordPress
Admin Interfaces Using AngularJS &
The WordPress REST API
Josh Pollock
JoshPress.net - I...
@Josh412
http://jpwp.me/ingot-admin-js
WHY?
Part One
THIS IS THE
NEW WAY
● WordPress is showing its
age…
● This is how it catches up.
6 Changes, No Page Refresh
State Change != Page Load
Deep Linking With Router
BTW: Angular UI Router > NG Router
Probably, but don't.
Common
UI/UX Pattern
● Portable
● Familiar
Custom REST
APIs In
WordPress
● Easy
● Testable
● Standardized
Why Angular?
● Respects standards &
separation of concerns
● Relatively easy to learn
● Testable
● Someone else pays to
ma...
Why Angular?
● Accessible dynamic
interfaces are not easy.
● Angular ARIA is a great
start.
HOW?
Part Two
Setting It Up
http://jpwp.me/ingot-admin-load
● Admin page callback prints basic
HTML
● http://jpwp.me/ingot-main-page-par...
Don't Forget To Make Your API
● Part 3 of my course
● Chapter 8 of my book
● My WordCamp NYC 2015 talk on
WordPress.TV
Thi...
Angular UI
Router
● What URL uses what
controller and template?
● http://jpwp.me/ingot-router
ingotApp.config(function($st...
Start It Up
● Include dependencies
● Adding translations to
$rootScope
var ingotApp = angular.module('ingotApp', [
'ui.rou...
Angular $http
● Similar to jQuery AJAX
● Use to update $scope and
$state
ingotApp.controller( 'clickDelete', ['$scope', '$...
Factories
● Reusable code for HTTP
● Makes data a injected
dependency -- easily
mocked/ modified
● http://jpwp.me/ingot-fa...
Factories
● Think of it as your own API
client
● http://jpwp.me/ingot-factory-
in-use
ingotApp.controller( 'clickGroups', ...
OTHER
BENEFITS?
Part Three
API-Driven Plugins
● REST API Isn't a bolt on
● Easier & alternative method for 3rd-party
integrations
● Jump to SAAS Is E...
Empower
Others To Be
Providers
Decentralize All The Things!
YOU?
Part Four
GO DO IT!
● Angular's docs are great read them
● More links, slides, examples:
● JoshPress.net/wordcamp-miami-angular/
Questions?
Josh Pollock - JoshPress.net - @Josh412
Ingot - IngotHQ.com - @IngotHQ.com
Upcoming SlideShare
Loading in …5
×

Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API

5,209 views

Published on

http://joshpress.net/wordcamp-miami-angularjs/

Published in: Internet
  • Be the first to comment

Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API

  1. 1. Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API Josh Pollock JoshPress.net - IngotHQ.com -- CalderaWP.com
  2. 2. @Josh412
  3. 3. http://jpwp.me/ingot-admin-js
  4. 4. WHY? Part One
  5. 5. THIS IS THE NEW WAY ● WordPress is showing its age… ● This is how it catches up.
  6. 6. 6 Changes, No Page Refresh State Change != Page Load
  7. 7. Deep Linking With Router BTW: Angular UI Router > NG Router
  8. 8. Probably, but don't.
  9. 9. Common UI/UX Pattern ● Portable ● Familiar
  10. 10. Custom REST APIs In WordPress ● Easy ● Testable ● Standardized
  11. 11. Why Angular? ● Respects standards & separation of concerns ● Relatively easy to learn ● Testable ● Someone else pays to maintain it. #thanksgoogle
  12. 12. Why Angular? ● Accessible dynamic interfaces are not easy. ● Angular ARIA is a great start.
  13. 13. HOW? Part Two
  14. 14. Setting It Up http://jpwp.me/ingot-admin-load ● Admin page callback prints basic HTML ● http://jpwp.me/ingot-main-page-partial ● Use wp_localize_script() for: ○ Partials directory path ○ Translation strings
  15. 15. Don't Forget To Make Your API ● Part 3 of my course ● Chapter 8 of my book ● My WordCamp NYC 2015 talk on WordPress.TV This Is A Different Talk
  16. 16. Angular 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' } ) });
  17. 17. Start 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; } );
  18. 18. Angular $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' ); } ); }]);
  19. 19. Factories ● Reusable code for HTTP ● Makes data a 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 } }, }) });
  20. 20. Factories ● 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 = []; } ); }]);
  21. 21. OTHER BENEFITS? Part Three
  22. 22. API-Driven Plugins ● REST API Isn't a bolt on ● Easier & alternative method for 3rd-party integrations ● Jump to SAAS Is Easier
  23. 23. Empower Others To Be Providers Decentralize All The Things!
  24. 24. YOU? Part Four
  25. 25. GO DO IT! ● Angular's docs are great read them ● More links, slides, examples: ● JoshPress.net/wordcamp-miami-angular/
  26. 26. Questions? Josh Pollock - JoshPress.net - @Josh412 Ingot - IngotHQ.com - @IngotHQ.com

×