Intro to Developing Web Sites with WordPress and AngularJS

18 Pages·2012·1.34 MB·English

Intro to
Developing Websites with
AngularJS and
WordPress
GitHub: https://github.com/WPKitIO/WPKit
Slides: https://goo.gl/MgNg1O
Who are we?
Ben Newton Joseph Van
Director of Technology at Web Developer at
Worldmedia Interactive Worldmedia Interactive
@BenENewton @joedajigalo
BenENewton.com josephvan.me
@BenENewton @Joedajigalo #wcmia
Agenda
What we do. And Why.
What is AngularJS?
Why AngularJS?
Why WordPress?
Quick How To
WordPress/AngularJS Demo
How We Use AngularJS and WordPress in Production
Questions?
@BenENewton @Joedajigalo #wcmia
What We Do. And Why.
We are using one WordPress back end as an API endpoint for multiple
front end “clients”.
One WordPress installation can serve data for:
Multiple Websites,
Apps,
Landing Pages,
Ads
and more.
@BenENewton @Joedajigalo #wcmia
What is AngularJS?
From The AngularJS Documentation
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template
language and lets you extend HTML's syntax to express your application's components clearly and
succinctly. Angular's data binding and dependency injection eliminate much of the code you would
otherwise have to write.
@BenENewton @Joedajigalo #wcmia
Why AngularJS?
Reusable Services
Easy Injection of data from any back end endpoint
Simple HTML Templating
<div>Easy as {{this}}</div>
Speed
Serve static HTML Pages and still have dynamic content
Separate production teams.
Front End Devs/Back End Devs
@BenENewton @Joedajigalo #wcmia
Why WordPress?
Easy to Modify
Well supported
Huge community
Client friendly
@BenENewton @Joedajigalo #wcmia
Demo -
https://github.com/WPKitIO/WPKit/tree/Car-Example
*Requires Mamp and Gulp
@BenENewton @Joedajigalo #wcmia
AngularJS Simple Repeater
Factory
Controller
Template
@BenENewton @Joedajigalo #wcmia
AngularJS Factory
angular.module('wpKit')
.factory('carFactory', function ($resource, CONFIG) {
return $resource('http://' + CONFIG.apiBaseUrl + '/cars/:car', {
callback: 'JSON_CALLBACK', car: '@car' }, {
getData: {method: 'JSONP', params: { car: ''} }
});
});