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,588 views

Published on

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

Published in: Internet
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ♥♥♥ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×