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

3,807 views
3,940 views

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
3,807
On SlideShare
0
From Embeds
0
Number of Embeds
2,309
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

[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 !

×