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

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