Downloaded 14 times
![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/75/Introduction-to-AngularJS-For-WordPress-Developers-12-2048.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/75/Introduction-to-AngularJS-For-WordPress-Developers-14-2048.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/75/Introduction-to-AngularJS-For-WordPress-Developers-16-2048.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/75/Introduction-to-AngularJS-For-WordPress-Developers-18-2048.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/75/Introduction-to-AngularJS-For-WordPress-Developers-19-2048.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/75/Introduction-to-AngularJS-For-WordPress-Developers-20-2048.jpg)
Uploaded byCaldera Labs
Introduction to AngularJS For WordPress Developers
- 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
Introduction to AngularJS For WordPress Developers
- 1.
- 2.
- 3.
- 4. Why Not X? React,Backbone, Ember, Etc...
- 5.
- 6. MVC ● Model ● View ●Controller MVC
- 7. Model The model isthe current set of data, defined by the controller, displayed by the view. MVC
- 8. View ● The visualrepresentation of the data. ● In Angular this is an HTML file. MVC
- 9. Controller ● Keeps themodels up-to- date using the remote API. ● Updates the model based on your interactions with the view. MVC
- 10.
- 11. Bindings ● Connects viewsto 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 controllerfunction 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 canbe 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 functionsfor 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: ○ Repeatitems (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.
- 18. Angular HTTP ● Useto 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 ● Supportsall 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 ● Useto 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.
- 22. Building Apps WithREST 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.