[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


What’s AngularJS?

• JS Framework

• Made to build dynamic HTML pages

• Bi-directional data binding

4


What’s AngularJS?

• JS Framework

• Made to build dynamic HTML pages

• Bi-directional data binding

5


What’s AngularJS?

6

Let’s start with a simple

HTML page


What’s AngularJS

7


What’s AngularJS?

8

Make our page an AngularJS application


9


What’s AngularJS?

10

We have a problem


What’s AngularJS?

10

We have a problem

We need a serialization

mechanism that works on the

web


Nuxeo’s New REST API

11



12

HTTP is a 23-year-old protocol

Exposes resources

Through commands



13

Resource

GET

CONNECT

OPTIONSPOST

HEAD

CONNECTDELETE

PATCH

PUT

TRACE



14

Resource

GETPOST

DELETEPUT

CONNECT

OPTIONS

HEAD

CONNECT

PATCH

TRACE



14

Resource

GETPOST

DELETEPUT



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



16

Documents are rendered in JSON

Perfect for the web



17

• GET .../myWorkspace/@children

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

• GET /nuxeo/api/user/Administrator

Other API endpoints / adapters

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




Studio + Nuxeo + AngularJS

18



19

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



20

... and create our Books in Nuxeo



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

• Several controllers: List, Edit, Create

• Needs a routing table

21



22

#/ ListCtrl

EditCtrl

CreateCtrl

#/edit/{docId}

#/new



23



24

Retrieving documents from Nuxeo ...

Let’s start by


Studio + Nuxeo + Angular

25



26

Creating documents ...



27



28

Editing documents ...



29



30

Deleting documents ...



31



• AngularJS nxSession service wraps call to the REST API

• Allows GET, PUT, POST & DELETE commands

• Integrates seamlessly with AngularJS

32



33


And now?

34


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">

• ...


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


References

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

• Follow me : @damienmetzler

37


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

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

?#Nx

World1

3

Questions


#NxWor

ld13

!Thank you


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

Technology

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