introduction to angularjs for wordpress developers
TRANSCRIPT
Introduction To AngularJS For
WordPress Developers
Josh Pollock
@Josh412
Why Not X?React, Backbone, Ember, Etc...
MVCPart One
MVC● Model● View● Controller
MVC
ModelThe 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 view.
MVC
BindingsPart Two
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
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
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
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
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
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
HTTPPart Three
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);
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);
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);
Go FurtherPart Next
Building Apps With REST API + AngularJS
Customizing The APIYour 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
CalderaWP.comIngotHQ.com@Josh412
JoshPress.net