- AngularJS is a Model-View-Controller framework that can be used to build dynamic single-page applications for WordPress. - It uses bindings to connect views (HTML) to controllers, allowing real-time updates as data changes. Data binding is done through directives like ng-model, ng-repeat, etc. - The $http service provides an easy way to connect Angular models to REST APIs, like the WordPress REST API, to fetch and save data from the backend. This allows building apps that interact with WordPress remotely. - Additional topics covered include using controllers, building reusable components with directives, and ways to customize the WordPress REST API to fit the needs of Angular applications

1. Introduction To
AngularJS For
WordPress
Developers
Josh Pollock

2. @Josh412

3. JoshPress.net/wordcamp-miami-angularjs

4. Why Not X?
React, Backbone, Ember, Etc...

5. MVC
Part One

6. MVC
● Model
● View
● Controller
MVC

7. Model
The model is the current set of
data, defined by the controller,
displayed by the view.
MVC

8. View
● The visual representation of
the data.
● In Angular this is an HTML
file.
MVC

9. Controller
● Keeps the models up-to-
date using the remote API.
● Updates the model based on
your interactions with the
view.
MVC

10. Bindings
Part Two

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. 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. 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. 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. 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. 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. HTTP
Part Three

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. 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. 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. Go Further
Part Next

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. CalderaWP.com
IngotHQ.com
@Josh412
JoshPress.net