Spout is a RESTful CMS written in PHP using BEAR.Sunday and Angular.js

1. BUILDING A RESTFUL WEB APP WITH
ANGULAR.JS AND BEAR.SUNDAY

2. RICHARD MCINTYRE
@MACKSTAR

4. GOAL RESTFUL CMS
FRONT-END ANGULAR.JS
BACK-END BEAR.SUNDAY

5. WHY ANOTHER CMS?
▸ Building RESOURCES
▸ Power through simplicity
▸ Easy overrides with AOP
▸ Kill plugin culture
▸ Build re-usable libraries

6. CONTINUED...
▸ Embed in any PHP project
▸ Testable
▸ Relationships between resources / Hypermedia
▸ Templating through TWIG

7. BEAR.SUNDAY
▸ REST
▸ DI
▸ AOP

8. In most MVC application frameworks,
CRUD and OOP paradigms are mapped
to HTTP methods and resources. But the
opposite is not true. - Akihito Koriyama

9. EVERYTHING IS A RESOURCE
Request: /api/resources/index?_start=1
Request Method: GET
Status Code: 200 OK

10. {
"resources": [
{
"id": "16",
"slug": "2332",
"type": "blog",
"title": "2332",
"type_name": "Blog",
"title_label": "Title"
}
],
"_model": "resources",
"_pager": {
"maxPerPage": 5,
"current": "1",
"total": 1,
"hasNext": false,
"hasPrevious": false
},
"_links": {
"self": {
"href": "spout/app/resources/index/?_start=1"
}
}
}

11. Request: /api/resources/types
Request Method: POST
Status Code: 200 OK

12. {
"title_label": "Title",
"resource_fields": [
{
"field_type": {
"id": "1",
"name": "String",
"slug": "string"
},
"multiple": 0,
"weight": 1,
"label": "Body",
"slug": "body"
}
],
"name": "Page",
"slug": "page"
}

13. Request: /api/menus/links?menu=primary
Request Method: GET
Status Code: 200 OK

14. {
"links": [
{
"id": "6",
"name": "Link 1",
"url": "/url1",
"type": "url",
"resource": null,
"resource_type": null,
"weight": "999",
"depth": null,
"parent_id": "0",
"menu": "primary"
},
{
"id": "7",
"name": "Link 2",
"url": "/url2",
"type": "url",
"resource": null,
"resource_type": null,
"weight": "999",
"depth": null,
"parent_id": "0",
"menu": "primary"
}
],
"_model": "links"
}

15. namespace MackstarSpoutAdminResourceAppResources;
/**
* Resources Index
*
* @Db
*/
class Index extends ResourceObject
{
/**
* @Link(rel="type", href="app://self/resources/detail?type={slug}&slug={slug}")
* @DbPager(5)
*/
public function onGet()
{
$sql = "SELECT {$this->table}.*, type.name as type_name, type.title_label FROM {$this->table} ";
$sql .= "INNER JOIN resource_types AS type ";
$sql .= "ON type.slug = {$this->table}.type";
$stmt = $this->db->query($sql);
$this['resources'] = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $this;
}

16. CUSTOM RESOURCES CAN CALL OTHER
RESOURCES
public function onGet($id = null)
{
$this['types'] = $this->resource->get->uri('app://self/resources/types')
}
RESOURCES OF A TYPE HAVE RESOURCE AND
RESOURCE INDEX RELATIONSHIPS

17. OVERRIDES THROUGH AOP
▸ Validation
▸ Permissions
▸ Template Switching
▸ Other custom events

18. DEPENDENCIES
INJECTED

19. namespace MackstarSpoutAdminInterceptorUsers;
use RayAopMethodInterceptor;
use RayAopMethodInvocation;
use RayDiDiInject;
use SymfonyComponentHttpFoundationSessionSession as PhpSession;
class Session implements MethodInterceptor
{
private $session;
/**
* @Inject
*/
public function setSession(PhpSession $session)
{
$this->session = $session;
}
public function invoke(MethodInvocation $invocation)
{
$response = $invocation->proceed();
$response->body['_user'] = $this->session->get('user');
return $response;
}

20. BIND USING MODULES

21. private function installUserSessionAppender()
{
$session = $this->requestInjection('MackstarSpoutAdminInterceptorUsersSession');
$this->bindInterceptor(
$this->matcher->subclassesOf('BEARResourceResourceObject'),
$this->matcher->startsWith('onGet'),
[$session]
);
}

22. TESTS

23. namespace MackstarSpoutAdminTestInterceptorValidators;
use MackstarSpoutAdminInterceptorValidatorsUserValidator;
class UserValidatorTest extends PHPUnit_Framework_TestCase
{
public function testErrorsWhenNoEmailIsPassedIn()
{
...
}
}

24. FRONT-END INTEGRATION
{{ resource('app://spout/menus/links?menu=primary', 'menus.primary') }}

25. PAGINATION
{{ resource('app://spout/menus/links?menu=primary', 'menus.primary', page) }}

26. MENU
{{
resource |
app://spout/menus?slug=primary |
primary-menu.twig
}}

27. ARCHITECTURE

31. ANGULAR.JS
ADMIN

32. BE YOUR OWN
CONSUMER

33. COMPONENTS
▸ Routes
▸ Directives
▸ Controllers
▸ Services

34. 2 WAY DATA
BINDING

35. TEMPLATE
<input type="email" ng-model="login.email" required>
CONTROLLER
scope.$watch('login.email', function () {
console.log("Login Email Changed To:" + scope.login.email);
});

36. ROUTESANGULAR-UI ROUTER

37. app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('login', {
url: "/login",
controller: 'LoginCtrl',
templateUrl: '/js/templates/login/index.html',
resolve: {
authentication: ['Restangular', function (Restangular) {
return Restangular.all('users/authenticate');
}]
}
})
.state('logout', {
url: "/logout",
controller: "LogoutCtrl",
resolve: {
authenticate: ['Restangular', function (Restangular) {
return Restangular.all('users/authenticate');
}]
}
});
}]);

38. DIRECTIVES<SP-THUMBNAIL />

39. app.directive('spThumbnail', function (Restangular) {
return {
restrict: 'E',
template: "<img src='/img/spinner.gif' ng-click='select()' />",
scope: { media: "=media"},
replace: true,
link: function(scope, element, attrs) {
var src = '/uploads/media/' + scope.media.directory + '/140x140_' + scope.media.file,
img = new Image();
function loadImage() {
element[0].src = src;
}
img.src = src;
img.onerror = function() {
Restangular.all('media/resize').post(
{media: scope.media, height: 140, width: 140}
).then(function() {
loadImage();
});
};
...

40. DEPENDENCY
INJECTION

41. Declare
var module = angular.module('restangular', []);
module.provider('Restangular', function() {}
Implement
var app = angular.module('myApp', ['restangular']);
app.controller('MyController', ['Restangular', function (Restangular) {
Restangular.all('users/authenticate').get().then(function(auth) {
...
});
}]);

42. TESTS

43. describe('Roles Directive', function () {
var scope,
$element;
beforeEach(function () {
module('Application');
angular.mock.inject(
function ($rootScope, $compile) {
var element = angular.element('<roles-selector></roles-selector>');
scope = $rootScope;
scope.roles = [{"id": 1, "name": "Admin"},{"id": 2, "name": "Contributor"}];
$compile(element)(scope);
scope.$digest();
$element = $(element);
}
);
});
it('should have a select menu', function () {
expect($element.prop("tagName")).toEqual('SELECT');
expect($element.find("option").length).toBe(2);
});

44. DEMO

45. STUFF TO DO
▸ Security
▸ DB/API Schema lock-down
▸ Create as composer component / Assetic
▸ More field types (locations/times/md etc)
▸ Blocks
▸ Get others input

46. GET INVOLVEDGITHUB.COM/MACKSTAR/SPOUT