The document provides an overview of a workshop on using the WordPress REST API and AngularJS. The workshop will cover REST API fundamentals, building custom REST APIs, unit testing APIs, and getting started with AngularJS by building controllers, templates, services, and factories. Attendees will learn through hands-on examples and code walkthroughs applied to real world projects.
Extending the WordPress REST API - Josh PollockCaldera Labs
Presentation on extending the WordPress REST API -- modifying default responses and creating custom endpoints
http://joshpress.net/extending-rest-api-talk
Webinar: AngularJS and the WordPress REST APIWP Engine UK
The WordPress REST API, in conjunction with a JavaScript MVC framework such as AngularJS, opens up endless opportunities for developers to build new types of plugins and customize user experiences. This webinar goes in-depth into how to use AngularJS with the WordPress REST API. Together, these tools help you tie systems together to customize user experiences, build plugins, and advance your business in new, innovative ways that are only limited by your imagination!
What is covered in these slides:
-How to make custom admin interfaces using REST API & Angular JS
-2 practical examples of specific use cases:
-Starting point - Simple example of creating a customized post editor with AngularJS.
-End point - Using AngularJS to build a plugin admin screen using Ingot A/B testing plugin as an example.
Creating REST Applications with the Slim Micro-Framework by Vikram Vaswanivvaswani
Explains how to use the Slim PHP micro-framework to quickly deploy a REST API. Includes sample code to implement common API requirements, such as authentication, request logging and multi-format support.
Extending the WordPress REST API - Josh PollockCaldera Labs
Presentation on extending the WordPress REST API -- modifying default responses and creating custom endpoints
http://joshpress.net/extending-rest-api-talk
Webinar: AngularJS and the WordPress REST APIWP Engine UK
The WordPress REST API, in conjunction with a JavaScript MVC framework such as AngularJS, opens up endless opportunities for developers to build new types of plugins and customize user experiences. This webinar goes in-depth into how to use AngularJS with the WordPress REST API. Together, these tools help you tie systems together to customize user experiences, build plugins, and advance your business in new, innovative ways that are only limited by your imagination!
What is covered in these slides:
-How to make custom admin interfaces using REST API & Angular JS
-2 practical examples of specific use cases:
-Starting point - Simple example of creating a customized post editor with AngularJS.
-End point - Using AngularJS to build a plugin admin screen using Ingot A/B testing plugin as an example.
Creating REST Applications with the Slim Micro-Framework by Vikram Vaswanivvaswani
Explains how to use the Slim PHP micro-framework to quickly deploy a REST API. Includes sample code to implement common API requirements, such as authentication, request logging and multi-format support.
AngularJS with Slim PHP Micro FrameworkBackand Cohen
AngularJS is a popular front-end framework that can be used with many server-side technologies. In many AngularJS web applications, each web page is really a single-page application (SPA), so the role of the server-side is really an API consisting of a set of web services to interact with the server-side database
Slides from the talk at http://www.meetup.com/GTA-PHP-User-Group-Toronto/events/151672182/
Source code for the demo at https://github.com/zymsys/Slim-RedBeanPHP-KnockoutJS
This was a talk given at Django District in March, 2016. It goes over the general gist of how to integrate Django Rest Framework with React and Redux. It also includes a github repo with working code, including using Webpack for Hot Reloading and Redux Dev Tools for time traveling state.
Laravel is a PHP MVC based framework. It is as easy as codeigniter, yet provides powerful tools needed for large robust application.It is built on top of symphony components and is inspired by many other frameworks including RoR, Asp .net, Sinatra.This session focuses on the basics things needed to start building application on it.
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Ryan Weaver
If you're like me, you know that being a great backend developer isn't enough. To make *truly* great applications, we need to spend significant time in an area that's moving at a lightning pace: frontend development.
This talk is for you: the backend developer that wants to hook their API's up to rich, interactive JavaScript frontends. To do that, first, we need to demystify a lot of new terms, like ES6/ES2015, ECMAScript, JSX, Babel and the idea that modern JavaScript (surprise) *requires* a build step.
With this in mind, I'll give you a brief introduction into Webpack & the modular development it finally allows.
But the real star is ReactJS. In the frontend world, you never know what new tech will *win*, but React is a star. I'll give you enough of an intro to get you rolling on your project.
The new frontend dev world is huge! Consider the starting line down an exciting new journey.
Slide links:
- https://lumberjack.rareloop.com
- https://docs.lumberjack.rareloop.com
- https://github.com/Rareloop/lumberjack-bedrock-installer
- https://github.com/Rareloop/lumberjack
- https://github.com/Rareloop/lumberjack-validation
- https://github.com/Rareloop/hatchet
- https://lizkeogh.com/2017/08/31/reflecting-reality/amp
- https://www.upstatement.com/timber
- https://roots.io/bedrock
- https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design
- https://github.com/zendframework/zend-diactoros
- https://www.php-fig.org
- http://php-di.org
---
Often WordPress themes are not easy to change, maintain or fun to work on. This can rule WordPress out as a viable option for bespoke, non-trivial websites.
In this talk we’ll dive into how this happens & look at how we can benefit from software engineering techniques to help make your code easier to change. I’ll also show how using Lumberjack, a powerful MVC framework built on Timber, can be used to power-up your themes.
Slides from a presentation given at Laravel Chicago on November 18, 2014. Goes over the basics of building a REST API using the Laravel framework as well as some handy tips and tools.
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Building Modern and Secure PHP Applications – Codementor Office Hours with Be...Arc & Codementor
Codementor PHP expert mentor Ben Edmunds is the co-host of PHP Town Hall and author of Building Secure PHP Apps.
Ben is also the creator of Ion Auth, a simple, lightweight authentication library for CodeIgniter.
In an interactive format, Ben talked about:
Modern PHP
Latest PHP tools
SQL Injection
Password Hashing and Authentication
Other Common Hacks
https://www.codementor.io/benedmunds
https://www.codementor.io/php-tutorial/building-modern-secure-php-applications-codementor-office-hours-ben-edmunds
AngularJS with Slim PHP Micro FrameworkBackand Cohen
AngularJS is a popular front-end framework that can be used with many server-side technologies. In many AngularJS web applications, each web page is really a single-page application (SPA), so the role of the server-side is really an API consisting of a set of web services to interact with the server-side database
Slides from the talk at http://www.meetup.com/GTA-PHP-User-Group-Toronto/events/151672182/
Source code for the demo at https://github.com/zymsys/Slim-RedBeanPHP-KnockoutJS
This was a talk given at Django District in March, 2016. It goes over the general gist of how to integrate Django Rest Framework with React and Redux. It also includes a github repo with working code, including using Webpack for Hot Reloading and Redux Dev Tools for time traveling state.
Laravel is a PHP MVC based framework. It is as easy as codeigniter, yet provides powerful tools needed for large robust application.It is built on top of symphony components and is inspired by many other frameworks including RoR, Asp .net, Sinatra.This session focuses on the basics things needed to start building application on it.
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Ryan Weaver
If you're like me, you know that being a great backend developer isn't enough. To make *truly* great applications, we need to spend significant time in an area that's moving at a lightning pace: frontend development.
This talk is for you: the backend developer that wants to hook their API's up to rich, interactive JavaScript frontends. To do that, first, we need to demystify a lot of new terms, like ES6/ES2015, ECMAScript, JSX, Babel and the idea that modern JavaScript (surprise) *requires* a build step.
With this in mind, I'll give you a brief introduction into Webpack & the modular development it finally allows.
But the real star is ReactJS. In the frontend world, you never know what new tech will *win*, but React is a star. I'll give you enough of an intro to get you rolling on your project.
The new frontend dev world is huge! Consider the starting line down an exciting new journey.
Slide links:
- https://lumberjack.rareloop.com
- https://docs.lumberjack.rareloop.com
- https://github.com/Rareloop/lumberjack-bedrock-installer
- https://github.com/Rareloop/lumberjack
- https://github.com/Rareloop/lumberjack-validation
- https://github.com/Rareloop/hatchet
- https://lizkeogh.com/2017/08/31/reflecting-reality/amp
- https://www.upstatement.com/timber
- https://roots.io/bedrock
- https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design
- https://github.com/zendframework/zend-diactoros
- https://www.php-fig.org
- http://php-di.org
---
Often WordPress themes are not easy to change, maintain or fun to work on. This can rule WordPress out as a viable option for bespoke, non-trivial websites.
In this talk we’ll dive into how this happens & look at how we can benefit from software engineering techniques to help make your code easier to change. I’ll also show how using Lumberjack, a powerful MVC framework built on Timber, can be used to power-up your themes.
Slides from a presentation given at Laravel Chicago on November 18, 2014. Goes over the basics of building a REST API using the Laravel framework as well as some handy tips and tools.
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Building Modern and Secure PHP Applications – Codementor Office Hours with Be...Arc & Codementor
Codementor PHP expert mentor Ben Edmunds is the co-host of PHP Town Hall and author of Building Secure PHP Apps.
Ben is also the creator of Ion Auth, a simple, lightweight authentication library for CodeIgniter.
In an interactive format, Ben talked about:
Modern PHP
Latest PHP tools
SQL Injection
Password Hashing and Authentication
Other Common Hacks
https://www.codementor.io/benedmunds
https://www.codementor.io/php-tutorial/building-modern-secure-php-applications-codementor-office-hours-ben-edmunds
With a very low barrier to entry, developing with WordPress has become particularly popular in the past few years. However, this sometimes means that standards and best practices aren’t well respected.
This talk will cover WordPress coding standards, best practices, and technical tools to become a better developer. This will be a resourceful presentation for anyone beginning, interested in, and those who have been developing with WordPress for a long time. Some of the topics covered will be proper usage of hooks and filters, creating your own plugins (instead of always using that functions.php), making use of the mu-plugins folder, how to properly escape and sanitize user-generated content, security gotchas and more.
The talk is geared at beginning developers as much as it is for advanced developers. Basic php knowledge is strongly recommended, though not required.
Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector
Presented at Railsconf 2015 by Daniel Spector, @danielspecs.
Crossing the Bridge explores tools, patterns and best practices to connect your Javascript MVC framework to Rails in the most seamless way possible. The talk progresses from demonstrating the standard API request cycle to preloading data to your client-side framework to rendering your javascript on the server. It explores Isomorphic Javascript and ways of implementing it with Rails.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
3. CalderaLabs.org
Hi I'm Josh
Lead Developer: Caldera Labs
I make WordPress plugins
I teach about WordPress
I wrote a book about the WordPress REST API
I am a core contributor to WordPress
I am a member of The WP Crowd
4. CalderaLearn.com
Hi, I'm Roy
Senior Software Engineer:
The Walt Disney Company
I am a member of The WP Crowd
I blog on roysivan.com
I teach on Lynda.com & CalderaLearn
People say Hi to me a lot
5. What We're Covering Today
REST API 101
Building Custom REST APIs
Unit Testing Custom REST APIs
LUNCH BREAK
AngularJS (1.x) Basics
Building Decoupled Front-ends
Building Plugin Admin Screens
6. Educational Philosophy
All code is or is based on real world projects
We will show different ways of doing the same
thing.
Please ask why it's different
◇ we may give you a good answer
Stop us and ask questions
7. Structure For Today
foreach ( $sections as $section ) :
Concepts / Lecture
Example Code Walkthrough (you will be cloning locally)
Hands-on
DIY Group
Walk Through Code Group
endforeach;
8. WARNING
This workshop is to help you understand the basics
and some advanced technologies. Nothing will be
production ready code.
9. What you need for today
IDE or text editor (PHPStorm, Sublime, etc.)
Local WP install (VVV, DesktopServer, etc.)
npm
PHPUnit (optional, included in VVV)
Composer (optional)
AngularJS Batarang Chrome Extension
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehid
hipcmcojjgiloacoafjmpfk?hl=en
13. “
CalderaLearn.com
The API allows you to take WP data and put it in a
bucket. What you do with that bucket is up to you.
-- Morten Rand Hendriksen
@mor10
15. API Powered Stuff
Things you can build that are powered by the API
Phone apps
Custom UI widgets on your site
Why use feed of another site, when you can API
Custom Dashboards in the admin
Custom WP Dashboard (YAS!)
User role based dashboard
39. Registering Route(s) : Field Sanitization Callback
Use to ensure data is safe.
Defined using a callable.
Change data to a safe value.
Return prepared value
40. Registering Route(s) : Field Validation Callback
Use to ensure data is correct.
Defined using a callable.
Used to reject invalid requests
Return true or false
41. Registering Route(s) : Field Validation Callback
public function validate_type( $value ){
if( !in_array( $value, [ 'big', 'small',
'very-small' ] ) ){
return false;
}
return true;
}
58. Unit Testing 101
Make Sure Things Return What They Should Return
$this->assertEquals( 42, function_that_returns_42() );
$this->assertSame( '42', function_that_returns_42() );
$this->assertArrayHasKey( 'roy', array( 'roy' => 'hi' ) );
Google: "Pippin Williamson Unit Tests for WordPress Plugins"
67. Unit Test Case For REST API Endpoints
Create a reusable class that:
Create Instance of WP_REST_Server
Boot routes
Make sure route is booted
68. Test Case Outline
class Test_API extends WP_UnitTestCase {
/** @var WP_REST_Server*/
protected $server;
protected $namespaced_route = 'caldera-forms/v1';
public function setUp() {}
public function test_register_route() {}
public function test_endpoints() {}
}
69. Test Case: Set Up
protected $server;
public function setUp() {
parent::setUp();
/** @var WP_REST_Server $wp_rest_server */
global $wp_rest_server;
$this->server = $wp_rest_server = new WP_REST_Server;
do_action( 'rest_api_init' );
}
70. Test Case: Test Route Is Registered
public function test_register_route() {
$routes = $this->server->get_routes();
$this->assertArrayHasKey( $this->namespaced_route,
$routes );
}
79. Not WordPress
To get you through the basics of
AngularJS we will be using
sample data, not WP
Our First Project
No npm or gulp
We aren’t using any build tools,
this is a pure sample
https://github.com/caldera-learn/angularjs-intro
80. Quicker & Easier
Quicker to get going to show
overall concepts.
Honest Truth
We already have a few projects
built in it that are ready to go
Why 1.x? 2 is in RC!
Roy is lazy
I am not lazy, but didn’t have
time to learn it deeply enough
yet to give a full workshop on it.
Josh Switched Teams
He used to be team NG1.
Now he is team VueJS.
81. HTML powered JavaScript
With Angular 1.x you can use
HTML to do most things reserved
for PHP.
Get the data using JS, template
with HTML. No PHP needed.
83. Setting up the app
All functionality lives within 1 app
We use ng-app to encapsulate the app in the DOM, it can be used on
any element including HTML.
Using it on the HTML encapsulates the whole DOM
84. Sample Data JSON
data.json
This file is going to be a sample of data, that we are going to use to build out
a simple Angular App, we will then replace it with the WordPress REST API
86. AngularJS Controllers
Controller is all about $scope
A Controller is defined by a JavaScript constructor function that is used to
augment the AngularJS Scope. When a Controller is attached to the DOM via
the ng-controller directive, AngularJS will instantiate a new Controller
object, using the specified Controller's constructor function
All new data to be used must be stored within $scope.your_key
ng-controller
90. First we must get data
$http is a jQuery AJAX wrapper & returns a promise
$http({method: ‘’, url: ‘’})
$http.get(url)
$http.post(url)
Because it returns a promise we use .then()
91. Say hello to JSON
JSON is the JavaScript Object Notation.
We display JSON with curly brackets
We work with JSON similar to PHP arrays
{{Object.key}} displays that key value
In PHP that would be $object[‘key’];
92. The loop HTML
<div ng-controller="listView">
<h2>Posts</h2>
<!-- Loop through $scope.posts -->
<article ng-repeat="post in posts">
<h2>{{post.title}}</h2>
</article>
</div>
93. Add more data
<article ng-repeat="post in posts">
<img ng-src="{{post.image}}" />
<h2>{{post.title}}</h2>
<div
class="post-content"
ng-bind-html="post.content | to_trusted">
</div>
</article>
95. Decoupled Front End
Decouple front end is a front end app that doesn’t live within
WordPress at all.
Your website: myawesomesite.com
Decoupled: myawesomeapp.com - but running on the same
data!
How cool is that!
96. Decoupled Use Cases
Phone App
Piece of functionality that communicates with WP data
Advanced, Unique UI
Combine with other APIs
Different Stack (decoupled app doesn’t need to be PHP)
97. Our decoupled App
npm
gulp
REST url that is publicly accessible (we will give you one)
Tacos, you always need tacos.
What you will need:
https://github.com/caldera-learn/decoupled-app
99. CORS
Allows browsers to make requests across
domains.
IS NOT SECURITY!!
By default WordPress REST API is same-origin
only.
Set at rest_pre_serve_request hook
104. AngularJS Factories
Factories allow you to create injectable objects.
Inject $resource into the factory it to create an object that can automatically handle REST calls.
app.factory('Posts',function($resource){
return $resource( ngWP.config.api + ‘/:post_type/:ID?per_page=:per_page’, {
post_type: 'posts',
ID:'@id',
per_page: ngWP.config.posts_per_page,
});
})
106. Local Storage
https://github.com/grevory/angular-local-storage
An AngularJS module that gives you access to the browser’s local storage with
cookie fallback.
Local storage is a key/value store which we call on. In our example the regular posts (blog) will check for
local storage first, before hitting the API.
107. UI-Router
https://github.com/angular-ui/ui-router
The Angular-UI project adds modules and functionality to Angular (think WP plugins for WP)
State Driven Routing
& a lot of other functionality we won’t need.
Shows its true power when you have 1 view within another (post.detail within post.list)
108. Templates
Separating out templates into templates directory
Cleaner code
Separation of views
1 controller can have 1 template
1 template can be powered by multiple controllers
Pure HTML (with JSON)
110. First thing is first
Clone the repo
You will need to run npm install and gulp
111. The config file
Create a file called config.js in /assets/js
var ngWP = ngWP || {};
ngWP.config = {
api: 'https://calderaforms.com/wp-json/',
posts_per_page: 5
// Not needed for our menu: 'app'
};
112. Stepping through the code
Main APP file
UI Router Definitions
Small controllers live here
Templates
Blog/Author List
Blog Detail
Product List
118. What’s Next?
Angular 2 Theme currently in development
github.com/royboy789/Angular-Wordpress-Theme/tree/v7
Vue.JS - The new simple JS framework
ReactJS - What everyone else wants you to learn
Admin Theme Boilerplate
github.com/WordPress-Admin-JavaScript-Boilerplate/ReactJS-Boilerplate
119. Want more Roy & Josh teachings?
Caldera Learn teaches through 4-week live classroom
style webinars. Teachers are Josh and/or Roy with future
guest teachers