[Nuxeo World 2013] BUILDING APPLICATIONS WITH ANGULARJS - DAMIEN METZLER

Nuxeo & AngularJS

10/09/2013 Damien METZLERThursday, October 17, 13

Schedule

• What’s AngularJS?

• Nuxeo’s New REST API

• Studio + Nuxeo + AngularJS demo

2

Thursday, October 17, 13

What’s AngularJS?

3

Thursday, October 17, 13

What’s AngularJS?

• JS Framework

• Made to build dynamic HTML pages

• Bi-directional data binding

4

Thursday, October 17, 13

What’s AngularJS?

• JS Framework

• Made to build dynamic HTML pages

• Bi-directional data binding

5

Thursday, October 17, 13

What’s AngularJS?

6

Let’s start with a simple

HTML page

Thursday, October 17, 13

What’s AngularJS

7

Thursday, October 17, 13

What’s AngularJS?

8

Make our page an AngularJS application

Thursday, October 17, 13

9

Thursday, October 17, 13

What’s AngularJS?

10

We have a problem

Thursday, October 17, 13

What’s AngularJS?

10

We have a problem

Thursday, October 17, 13

What’s AngularJS?

10

We have a problem

We need a serialization

mechanism that works on the

web

Thursday, October 17, 13

Nuxeo’s New REST API

11

Thursday, October 17, 13

Nuxeo’s New REST API

12

HTTP is a 23-year-old protocol

Exposes resources

Through commands

Thursday, October 17, 13

Nuxeo’s New REST API

13

Resource

GET

CONNECT

OPTIONSPOST

HEAD

CONNECTDELETE

PATCH

PUT

TRACE

Thursday, October 17, 13

Nuxeo’s New REST API

14

Resource

GETPOST

DELETEPUT

CONNECT

OPTIONS

HEAD

CONNECT

PATCH

TRACE

Thursday, October 17, 13

Nuxeo’s New REST API

14

Resource

GETPOST

DELETEPUT

Thursday, October 17, 13

Nuxeo’s New REST API

15

Resource http://...:8080/nuxeo/api/path/default-domain/workspaces/myWorkspace

GET Retrieves the document

PUT Updates the document

POST Creates a document

DELETE Deletes the document

Thursday, October 17, 13

Nuxeo’s New REST API

16

Documents are rendered in JSON

Perfect for the web

Thursday, October 17, 13

Nuxeo’s New REST API

17

• GET .../myWorkspace/@children

• POST .../myWorkspace/@op/zipFiles

• GET /nuxeo/api/user/Administrator

Other API endpoints / adapters

http://doc.nuxeo.com/x/WIvZ

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

18

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

19

Let’s use Nuxeo Studio to define a new Book type

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

20

... and create our Books in Nuxeo

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

• Before starting our application will need some enhancements:• 2 views: List and Detail

• Several controllers: List, Edit, Create

• Needs a routing table

21

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

22

#/ ListCtrl

EditCtrl

CreateCtrl

#/edit/{docId}

#/new

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

23

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

24

Retrieving documents from Nuxeo ...

Let’s start by

Thursday, October 17, 13

Studio + Nuxeo + Angular

25

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

26

Creating documents ...

Thursday, October 17, 13

Studio + Nuxeo + Angular

27

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

28

Editing documents ...

Thursday, October 17, 13

Studio + Nuxeo + Angular

29

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

30

Deleting documents ...

Thursday, October 17, 13

Studio + Nuxeo + Angular

31

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

• AngularJS nxSession service wraps call to the REST API

• Allows GET, PUT, POST & DELETE commands

• Integrates seamlessly with AngularJS

32

Thursday, October 17, 13

Studio + Nuxeo + AngularJS

33

Thursday, October 17, 13

And now?

34

Thursday, October 17, 13

Future Evolutions

35

• Add a generator with tooling like Yeoman• $ yo nuxeo

• Provide Nuxeo AngularJS library as a Bower component

• Add some Nuxeo directives• <nuxeo-form doc="doc" view="create">

• <nuxeo-content-view doc="doc" name="libraryCV">

• ...

Thursday, October 17, 13

Best nuxeo.io Companion

• nuxeo.io provides a repository with the REST API

• Nuxeo Studio provides the customization

• AngularJS provides the front-end

• No Java needed

36

Thursday, October 17, 13

References

• Code : http://github.com/dmetzler/nuxeo-book/

• Follow me : @damienmetzler

37

Thursday, October 17, 13

?#Nx

World1

3

Questions

Thursday, October 17, 13

#NxWor

ld13

!Thank you

Thursday, October 17, 13