0
Nuxeo & AngularJS
10/09/2013 Damien METZLER
Thursday, 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...
What’s AngularJS?

• JS Framework
• Made to build dynamic HTML pages
• Bi-directional data binding

5
Thursday, October 17...
What’s AngularJS?
Let’s start
with a
simple
HTML page

6
Thursday, October 17, 13
What’s AngularJS

7
Thursday, October 17, 13
What’s AngularJS?
Make our page an
AngularJS application

8
Thursday, October 17, 13
9
Thursday, October 17, 13
What’s AngularJS?
We have a problem

10
Thursday, October 17, 13
What’s AngularJS?
We have a problem

10
Thursday, October 17, 13
What’s AngularJS?
We have a problem
We need a
serialization
mechanism that
works on the
web

10
Thursday, October 17, 13
Nuxeo’s New REST API

11
Thursday, October 17, 13
Nuxeo’s New REST API
HTTP is a 23-year-old protocol
Exposes resources
Through commands
12
Thursday, October 17, 13
Nuxeo’s New REST API
GET
CONNECT

OPTIONS

Resource

HEAD
PUT

POST
TRACE
PATCH

CONNECT

DELETE
13

Thursday, October 17,...
Nuxeo’s New REST API
GET
CONNECT

OPTIONS

Resource

HEAD
PUT

POST
TRACE
PATCH

CONNECT

DELETE
14

Thursday, October 17,...
Nuxeo’s New REST API
GET

POST
Resource

PUT

DELETE
14

Thursday, October 17, 13
Nuxeo’s New REST API
Resource

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

GET

Retrieves the do...
Nuxeo’s New REST API
Documents are
rendered in JSON
Perfect for the web

16
Thursday, October 17, 13
Nuxeo’s New REST API
Other API endpoints / adapters
• GET .../myWorkspace/@children
• POST .../myWorkspace/@op/zipFiles
• ...
Studio + Nuxeo + AngularJS

18
Thursday, October 17, 13
Studio + Nuxeo + AngularJS
Let’s use Nuxeo Studio to define a new Book type

19
Thursday, October 17, 13
Studio + Nuxeo + AngularJS
... and create our Books in Nuxeo

20
Thursday, October 17, 13
Studio + Nuxeo + AngularJS
• Before starting our application will need some
enhancements:
•

2 views: List and Detail

•

...
Studio + Nuxeo + AngularJS
#/

ListCtrl

#/edit/{docId}

EditCtrl

#/new

CreateCtrl

22
Thursday, October 17, 13
Studio + Nuxeo + AngularJS

23
Thursday, October 17, 13
Studio + Nuxeo + AngularJS

Let’s start by
Retrieving documents from Nuxeo ...

24
Thursday, October 17, 13
Studio + Nuxeo + Angular

25
Thursday, October 17, 13
Studio + Nuxeo + AngularJS

Creating documents ...

26
Thursday, October 17, 13
Studio + Nuxeo + Angular

27
Thursday, October 17, 13
Studio + Nuxeo + AngularJS

Editing documents ...

28
Thursday, October 17, 13
Studio + Nuxeo + Angular

29
Thursday, October 17, 13
Studio + Nuxeo + AngularJS

Deleting documents ...

30
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 comm...
Studio + Nuxeo + AngularJS

33
Thursday, October 17, 13
And now?

34
Thursday, October 17, 13
Future Evolutions
• Add a generator with tooling like Yeoman
•

$ yo nuxeo

• Provide Nuxeo AngularJS library as a Bower
c...
Best nuxeo.io Companion
• nuxeo.io provides a repository with the REST API
• Nuxeo Studio provides the customization
• Ang...
References

• Code : http://github.com/dmetzler/nuxeo-book/
• Follow me : @damienmetzler

37
Thursday, October 17, 13
13
ld

or
xW
#N

Questions
Thursday, October 17, 13

?
13
ld

or
xW
#N

Thank you
Thursday, October 17, 13

!
Upcoming SlideShare
Loading in...5
×

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

2,266

Published on

In this session you will discover to use the Nuxeo Platform to build an HTML5 application on top of a JavaScript framework. After a quick introduction to AngularJS and its ecosystem, we will review the new Nuxeo REST API and then explain how to use it to build a sample application.

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,266
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. Nuxeo & AngularJS 10/09/2013 Damien METZLER Thursday, October 17, 13
  2. 2. Schedule • What’s AngularJS? • Nuxeo’s New REST API • Studio + Nuxeo + AngularJS demo 2 Thursday, October 17, 13
  3. 3. What’s AngularJS? 3 Thursday, October 17, 13
  4. 4. What’s AngularJS? • JS Framework • Made to build dynamic HTML pages • Bi-directional data binding 4 Thursday, October 17, 13
  5. 5. What’s AngularJS? • JS Framework • Made to build dynamic HTML pages • Bi-directional data binding 5 Thursday, October 17, 13
  6. 6. What’s AngularJS? Let’s start with a simple HTML page 6 Thursday, October 17, 13
  7. 7. What’s AngularJS 7 Thursday, October 17, 13
  8. 8. What’s AngularJS? Make our page an AngularJS application 8 Thursday, October 17, 13
  9. 9. 9 Thursday, October 17, 13
  10. 10. What’s AngularJS? We have a problem 10 Thursday, October 17, 13
  11. 11. What’s AngularJS? We have a problem 10 Thursday, October 17, 13
  12. 12. What’s AngularJS? We have a problem We need a serialization mechanism that works on the web 10 Thursday, October 17, 13
  13. 13. Nuxeo’s New REST API 11 Thursday, October 17, 13
  14. 14. Nuxeo’s New REST API HTTP is a 23-year-old protocol Exposes resources Through commands 12 Thursday, October 17, 13
  15. 15. Nuxeo’s New REST API GET CONNECT OPTIONS Resource HEAD PUT POST TRACE PATCH CONNECT DELETE 13 Thursday, October 17, 13
  16. 16. Nuxeo’s New REST API GET CONNECT OPTIONS Resource HEAD PUT POST TRACE PATCH CONNECT DELETE 14 Thursday, October 17, 13
  17. 17. Nuxeo’s New REST API GET POST Resource PUT DELETE 14 Thursday, October 17, 13
  18. 18. Nuxeo’s New REST API 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 15 Thursday, October 17, 13
  19. 19. Nuxeo’s New REST API Documents are rendered in JSON Perfect for the web 16 Thursday, October 17, 13
  20. 20. Nuxeo’s New REST API Other API endpoints / adapters • GET .../myWorkspace/@children • POST .../myWorkspace/@op/zipFiles • GET /nuxeo/api/user/Administrator http://doc.nuxeo.com/x/WIvZ 17 Thursday, October 17, 13
  21. 21. Studio + Nuxeo + AngularJS 18 Thursday, October 17, 13
  22. 22. Studio + Nuxeo + AngularJS Let’s use Nuxeo Studio to define a new Book type 19 Thursday, October 17, 13
  23. 23. Studio + Nuxeo + AngularJS ... and create our Books in Nuxeo 20 Thursday, October 17, 13
  24. 24. 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
  25. 25. Studio + Nuxeo + AngularJS #/ ListCtrl #/edit/{docId} EditCtrl #/new CreateCtrl 22 Thursday, October 17, 13
  26. 26. Studio + Nuxeo + AngularJS 23 Thursday, October 17, 13
  27. 27. Studio + Nuxeo + AngularJS Let’s start by Retrieving documents from Nuxeo ... 24 Thursday, October 17, 13
  28. 28. Studio + Nuxeo + Angular 25 Thursday, October 17, 13
  29. 29. Studio + Nuxeo + AngularJS Creating documents ... 26 Thursday, October 17, 13
  30. 30. Studio + Nuxeo + Angular 27 Thursday, October 17, 13
  31. 31. Studio + Nuxeo + AngularJS Editing documents ... 28 Thursday, October 17, 13
  32. 32. Studio + Nuxeo + Angular 29 Thursday, October 17, 13
  33. 33. Studio + Nuxeo + AngularJS Deleting documents ... 30 Thursday, October 17, 13
  34. 34. Studio + Nuxeo + Angular 31 Thursday, October 17, 13
  35. 35. 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
  36. 36. Studio + Nuxeo + AngularJS 33 Thursday, October 17, 13
  37. 37. And now? 34 Thursday, October 17, 13
  38. 38. Future Evolutions • 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"> • ... 35 Thursday, October 17, 13
  39. 39. 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
  40. 40. References • Code : http://github.com/dmetzler/nuxeo-book/ • Follow me : @damienmetzler 37 Thursday, October 17, 13
  41. 41. 13 ld or xW #N Questions Thursday, October 17, 13 ?
  42. 42. 13 ld or xW #N Thank you Thursday, October 17, 13 !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×