19
Plone Open Garden 2014 Timo Stollenwerk

AngularJS & Plone

Embed Size (px)

DESCRIPTION

An AngularJS front end for the Plone Open Source Enterprise Content Management System.

Citation preview

Page 1: AngularJS & Plone

Plone Open Garden 2014Timo Stollenwerk

Page 2: AngularJS & Plone

Javascript

Photo: Trey Ratcliff / stuckincustoms.com

Page 3: AngularJS & Plone

Modern Requirements

Photo: Trey Ratcliff / stuckincustoms.com

Page 4: AngularJS & Plone

Choosing the right framework...

Photo: Trey Ratcliff / stuckincustoms.com

Page 5: AngularJS & Plone

Choosing the right framework...

Full featured vs best of breed

Photo: Trey Ratcliff / stuckincustoms.com

Page 6: AngularJS & Plone

Choosing the right framework...

Full featured vs best of breed

Components

Photo: Trey Ratcliff / stuckincustoms.com

Page 7: AngularJS & Plone

Choosing the right framework...

Full featured vs best of breed

Components

Long term solution

Photo: Trey Ratcliff / stuckincustoms.com

Page 8: AngularJS & Plone

Choosing the right framework...

Full featured vs best of breed

Components

Testable

Long term solution

Photo: Trey Ratcliff / stuckincustoms.com

Page 9: AngularJS & Plone

A full featured front-end framework

Page 10: AngularJS & Plone
Page 11: AngularJS & Plone
Page 12: AngularJS & Plone

Two-Way Data Binding

<input type="text"

ng-model="yourName">

<h1>Hello {{yourName}}!</h1>

Page 13: AngularJS & Plone

Client Side Templates

<ul>

<li ng-repeat="item in items">

<a ng-href="{{item.url}}">

{{item.title}}

</a>

</li>

</ul>

Page 14: AngularJS & Plone

Dependency Injection

function($scope, $http) {

}

Page 15: AngularJS & Plone

Directives

<div navigation-directive></div>

Page 16: AngularJS & Plone

Angular vs jQuery?

Page 17: AngularJS & Plone

Angular & Plone?

Photo: Trey Ratcliff / stuckincustoms.com

Page 18: AngularJS & Plone

Angular & Plone?

github.com/tisto/plone.app.angularjs

Photo: Trey Ratcliff / stuckincustoms.com

Page 19: AngularJS & Plone

Plone Open Garden 2014Timo Stollenwerk