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.

Webinar: AngularJS and the WordPress REST API

2,032 views

Published on

The WordPress REST API, in conjunction with a JavaScript MVC framework such as AngularJS, opens up endless opportunities for developers to build new types of plugins and customize user experiences. This webinar goes in-depth into how to use AngularJS with the WordPress REST API. Together, these tools help you tie systems together to customize user experiences, build plugins, and advance your business in new, innovative ways that are only limited by your imagination!

What is covered in these slides:
-How to make custom admin interfaces using REST API & Angular JS
-2 practical examples of specific use cases:
-Starting point - Simple example of creating a customized post editor with AngularJS.
-End point - Using AngularJS to build a plugin admin screen using Ingot A/B testing plugin as an example.

Published in: Technology
  • Be the first to comment

Webinar: AngularJS and the WordPress REST API

  1. 1. Technical Deep Dive into AngularJS and the WordPress REST API March 16th, 2016 #wprestapi Vote for your favorite plugins: www.pluginmadness.com
  2. 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. 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. 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. 5. Is this the new way?
  6. 6. What is the benefit? ● Respects standards & separation of concerns ● Relatively easy to learn ● Testable ● Someone else pays to maintain it. #thanksgoogle
  7. 7. But admin-ajax!
  8. 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. 9. Part One MVC
  10. 10. MVCMVC ●Model ●View ●Controller
  11. 11. MVCModel The model is the current set of data, defined by the controller, displayed by the view.
  12. 12. MVC$scope Current state of the model. Defined in controller - used in view.
  13. 13. MVCView ● The visual representation of the data. ● In Angular this is an HTML file.
  14. 14. MVCController ● Keeps the models up-to- date using the remote API. ● Updates the model based on your interactions with the view.
  15. 15. Part Two Bindings
  16. 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. 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. 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. 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. 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. 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. 22. Making your own Super Fast Super Fancy Admin Interface! Or….
  23. 23. SFSFAI! This is going to catch on... Making your own Super Fast Super Fancy Admin Interface!
  24. 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. 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. 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. 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. 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. 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. 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. 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

×