Webinar: AngularJS and the WordPress REST API
Download as PPTX, PDF0 likes580 views
The document is a technical webinar on using AngularJS with the WordPress REST API, covering the creation of custom admin interfaces and plugin development. It discusses key concepts like MVC architecture and bindings, as well as practical examples of building admin screens and utilizing HTTP for data manipulation. The webinar also includes additional resources for further learning and encourages audience participation through questions.
![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);](https://image.slidesharecdn.com/3-16webinar-angularjsandthewordpressrestapi-160316172137-160406143838/85/Webinar-AngularJS-and-the-WordPress-REST-API-17-320.jpg)
![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);](https://image.slidesharecdn.com/3-16webinar-angularjsandthewordpressrestapi-160316172137-160406143838/85/Webinar-AngularJS-and-the-WordPress-REST-API-19-320.jpg)
![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);](https://image.slidesharecdn.com/3-16webinar-angularjsandthewordpressrestapi-160316172137-160406143838/85/Webinar-AngularJS-and-the-WordPress-REST-API-21-320.jpg)
![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;
}
);](https://image.slidesharecdn.com/3-16webinar-angularjsandthewordpressrestapi-160316172137-160406143838/85/Webinar-AngularJS-and-the-WordPress-REST-API-25-320.jpg)
![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' );
}
);
}]);](https://image.slidesharecdn.com/3-16webinar-angularjsandthewordpressrestapi-160316172137-160406143838/85/Webinar-AngularJS-and-the-WordPress-REST-API-26-320.jpg)
![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 = [];
} );
}]);](https://image.slidesharecdn.com/3-16webinar-angularjsandthewordpressrestapi-160316172137-160406143838/85/Webinar-AngularJS-and-the-WordPress-REST-API-28-320.jpg)
Webinar: AngularJS and the WordPress REST API
- 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
- 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
- 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.
- 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