Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API
1 like6,601 views
This document discusses using AngularJS to build single page applications for WordPress admin interfaces that use the WordPress REST API. It covers why this approach is beneficial, how to set it up using Angular routing, controllers, factories and HTTP requests to interact with the REST API. Benefits mentioned include making WordPress interfaces more modern and dynamic, empowering others to build plugins in a decentralized way, and the ease of transitioning to software as a service models. The document encourages readers to learn Angular and check out additional resources on the topic.
![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;
}
);](https://image.slidesharecdn.com/wcmia-spa-angularjs-wpapi-160221144449/85/Single-Page-Web-Apps-As-WordPress-Admin-Interfaces-Using-AngularJS-The-WordPress-REST-API-17-320.jpg)
![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' );
}
);
}]);](https://image.slidesharecdn.com/wcmia-spa-angularjs-wpapi-160221144449/85/Single-Page-Web-Apps-As-WordPress-Admin-Interfaces-Using-AngularJS-The-WordPress-REST-API-18-320.jpg)
![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 = [];
} );
}]);](https://image.slidesharecdn.com/wcmia-spa-angularjs-wpapi-160221144449/85/Single-Page-Web-Apps-As-WordPress-Admin-Interfaces-Using-AngularJS-The-WordPress-REST-API-20-320.jpg)
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API
- 1. Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API Josh Pollock JoshPress.net - IngotHQ.com -- CalderaWP.com
- 2. @Josh412
- 5. THIS IS THE NEW WAY ● WordPress is showing its age… ● This is how it catches up.
- 6. 6 Changes, No Page Refresh State Change != Page Load
- 7. Deep Linking With Router BTW: Angular UI Router > NG Router
- 9. Common UI/UX Pattern ● Portable ● Familiar
- 10. Custom REST APIs In WordPress ● Easy ● Testable ● Standardized
- 11. Why Angular? ● Respects standards & separation of concerns ● Relatively easy to learn ● Testable ● Someone else pays to maintain it. #thanksgoogle
- 12. Why Angular? ● Accessible dynamic interfaces are not easy. ● Angular ARIA is a great start.
- 13. HOW? Part Two
- 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. 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. 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. 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. 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. 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. 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 = []; } ); }]);
- 22. API-Driven Plugins ● REST API Isn't a bolt on ● Easier & alternative method for 3rd-party integrations ● Jump to SAAS Is Easier
- 23. Empower Others To Be Providers Decentralize All The Things!
- 24. YOU? Part Four
- 25. GO DO IT! ● Angular's docs are great read them ● More links, slides, examples: ● JoshPress.net/wordcamp-miami-angular/
- 26. Questions? Josh Pollock - JoshPress.net - @Josh412 Ingot - IngotHQ.com - @IngotHQ.com