Introduction to AngularJS For WordPress Developers
2 likes•5,610 views
- 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
![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](https://image.slidesharecdn.com/wcmia-angularjs-intro-160221144447/85/Introduction-to-AngularJS-For-WordPress-Developers-12-320.jpg)
![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](https://image.slidesharecdn.com/wcmia-angularjs-intro-160221144447/85/Introduction-to-AngularJS-For-WordPress-Developers-14-320.jpg)
![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](https://image.slidesharecdn.com/wcmia-angularjs-intro-160221144447/85/Introduction-to-AngularJS-For-WordPress-Developers-16-320.jpg)
![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);](https://image.slidesharecdn.com/wcmia-angularjs-intro-160221144447/85/Introduction-to-AngularJS-For-WordPress-Developers-18-320.jpg)
![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);](https://image.slidesharecdn.com/wcmia-angularjs-intro-160221144447/85/Introduction-to-AngularJS-For-WordPress-Developers-19-320.jpg)
![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);](https://image.slidesharecdn.com/wcmia-angularjs-intro-160221144447/85/Introduction-to-AngularJS-For-WordPress-Developers-20-320.jpg)
Introduction to AngularJS For WordPress Developers
- 2. @Josh412
- 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
- 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);
- 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