Your SlideShare is downloading. ×
  • Like
[Nuxeo World 2013] BUILDING APPLICATIONS WITH ANGULARJS - DAMIEN METZLER
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,645 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,645
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
26
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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