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.
Introduction To
AngularJS For
WordPress
Developers
Josh Pollock
@Josh412
JoshPress.net/wordcamp-miami-angularjs
Why Not X?
React, Backbone, Ember, Etc...
MVC
Part One
MVC
● Model
● View
● Controller
MVC
Model
The model is the current set of
data, defined by the controller,
displayed by the view.
MVC
View
● The visual representation of
the data.
● In Angular this is an HTML
file.
MVC
Controller
● Keeps the models up-to-
date using the remote API.
● Updates the model based on
your interactions with the
vi...
Bindings
Part Two
Bindings
● Connects views to
controllers.
● HTML5 Attributes
● Template Tags: Curly
Brackets
<div ng-controller="postExamp...
Bindings
● Use controller function to
create controller...
● $scope is available in view
(function(angular) {
'use strict'...
Bindings
● Bindings can be used to call
functions
● Examples:
○ ng-submit
○ ng-hide
<div ng-controller="postExample">
<for...
Bindings
● Define functions for view on
$scope.
● Example: $scope.submit
(function(angular) {
'use strict';
angular.module...
Bindings
● ng-repeat:
○ Repeat items (like a list
of posts)
<div ng-controller="postsExample">
<h3>Posts:</h3>
<div ng-rep...
Bindings
● Look mom, two controllers!
● Iterating over posts array.
(function(angular) {
'use strict';
angular.module('lea...
HTTP
Part Three
Angular HTTP
● Use to connect model to
remote API
● Syntax similar to jQuery
AJAX
(function(angular) {
'use strict';
angul...
Angular HTTP
● Supports all methods
○ IE Use POST to save
● Caching… promises.. etc.
(function(angular) {
'use strict';
an...
Angular HTTP
● Use to connect model to
remote API
● Syntax similar to jQuery
AJAX
(function(angular) {
'use strict';
angul...
Go Further
Part Next
Building Apps With REST API + AngularJS
Customizing The API
Your app likely needs custom routes
or to customize the defaul...
CalderaWP.com
IngotHQ.com
@Josh412
JoshPress.net
Upcoming SlideShare
Loading in …5
×

Introduction to AngularJS For WordPress Developers

4,312 views

Published on

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

Published in: Internet
  • Be the first to comment

Introduction to AngularJS For WordPress Developers

  1. 1. Introduction To AngularJS For WordPress Developers Josh Pollock
  2. 2. @Josh412
  3. 3. JoshPress.net/wordcamp-miami-angularjs
  4. 4. Why Not X? React, Backbone, Ember, Etc...
  5. 5. MVC Part One
  6. 6. MVC ● Model ● View ● Controller MVC
  7. 7. Model The model is the current set of data, defined by the controller, displayed by the view. MVC
  8. 8. View ● The visual representation of the data. ● In Angular this is an HTML file. MVC
  9. 9. Controller ● Keeps the models up-to- date using the remote API. ● Updates the model based on your interactions with the view. MVC
  10. 10. Bindings Part Two
  11. 11. Bindings ● 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
  12. 12. Bindings ● Use controller function to create controller... ● $scope is available in view (function(angular) { 'use strict'; angular.module('learnAngular', []) .controller('postExample', ['$scope', function ($scope) { $scope.post = { title: 'Enter Title' }; }]); })(window.angular); Template
  13. 13. Bindings ● Bindings can be used to call functions ● Examples: ○ ng-submit ○ ng-hide <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> Views
  14. 14. Bindings ● Define functions for view on $scope. ● Example: $scope.submit (function(angular) { 'use strict'; angular.module('learnAngular', []) .controller('postExample', ['$scope', function($scope) { $scope.post = { title: 'Enter Title' }; $scope.submit = function(){ alert( 'saving' ); } }]); })(window.angular); Controller
  15. 15. Bindings ● ng-repeat: ○ Repeat items (like a list of posts) <div ng-controller="postsExample"> <h3>Posts:</h3> <div ng-repeat="post in posts"> {{post.title}} </div> </div> Views
  16. 16. Bindings ● 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); Controller
  17. 17. HTTP Part Three
  18. 18. Angular HTTP ● Use to connect model to remote API ● Syntax similar to jQuery AJAX (function(angular) { 'use strict'; angular.module('learnAngular', []) .controller('postExample', ['$scope', '$http', function($scope, $http) { $http({ url: 'http://joshpress.net/wp- json/wp/v2/posts/1', cache: true } ).then( function( res ) { $scope.post = res.data; }); }]).controller('postsExample', ['$scope', '$http', function($scope, $http) { $http( { url: 'http://joshpress.net/wp- json/wp/v2/posts/', cache: true } ).then( function ( res ) { $scope.posts = res.data; $scope.totalPages = res.headers('x-wp- totalpages'); $scope.total = res.headers( 'x-wp-total' ); } ); }]); })(window.angular);
  19. 19. Angular HTTP ● Supports all methods ○ IE Use POST to save ● Caching… promises.. etc. (function(angular) { 'use strict'; angular.module('learnAngular', []) .controller('postExample', ['$scope', '$http', function($scope, $http) { $http({ url: 'http://joshpress.net/wp- json/wp/v2/posts/1', cache: true } ).then( function( res ) { $scope.post = res.data; }); }]).controller('postsExample', ['$scope', '$http', function($scope, $http) { $http( { url: 'http://joshpress.net/wp- json/wp/v2/posts/', cache: true } ).then( function ( res ) { $scope.posts = res.data; $scope.totalPages = res.headers('x-wp- totalpages'); $scope.total = res.headers( 'x-wp-total' ); } ); }]); })(window.angular);
  20. 20. Angular HTTP ● Use to connect model to remote API ● Syntax similar to jQuery AJAX (function(angular) { 'use strict'; angular.module('learnAngular', []) .controller('postExample', ['$scope', '$http', function($scope, $http) { $http({ url: 'http://joshpress.net/wp- json/wp/v2/posts/1', cache: true } ).then( function( res ) { $scope.post = res.data; }); $scope.save = function(){ $http({ url: 'http://joshpress.net/wp- json/wp/v2/posts/1', cache: true, method: "POST" } ).then( function( res ) { $scope.post = res.data; }); }; }]); })(window.angular);
  21. 21. Go Further Part Next
  22. 22. Building Apps With REST API + AngularJS Customizing The API Your app likely needs custom routes or to customize the defaults ● Slides, Video Of Talk ● More information Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API ● 3PM Today:) ● Slides
  23. 23. CalderaWP.com IngotHQ.com @Josh412 JoshPress.net

×