[Nuxeo World 2013] BUILDING APPLICATIONS WITH ANGULARJS - DAMIEN METZLER
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,526 views

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.

Statistics

Views

Total Views
1,526
Views on SlideShare
1,128
Embed Views
398

Actions

Likes
4
Downloads
21
Comments
0

4 Embeds 398

http://www.nuxeo.com 367
https://twitter.com 17
http://nuxeodotcom.wpengine.com 11
http://2014.nuxeo.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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, 13
  • What’s AngularJS? • JS Framework • Made to build dynamic HTML pages • Bi-directional data binding 5 Thursday, October 17, 13
  • 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, 13
  • Nuxeo’s New REST API GET CONNECT OPTIONS Resource HEAD PUT POST TRACE PATCH CONNECT DELETE 14 Thursday, October 17, 13
  • 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 document PUT Updates the document POST Creates a document DELETE Deletes the document 15 Thursday, October 17, 13
  • 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 • GET /nuxeo/api/user/Administrator http://doc.nuxeo.com/x/WIvZ 17 Thursday, October 17, 13
  • 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 • Several controllers: List, Edit, Create • Needs a routing table 21 Thursday, October 17, 13
  • 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 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 • 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
  • 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
  • 13 ld or xW #N Questions Thursday, October 17, 13 ?
  • 13 ld or xW #N Thank you Thursday, October 17, 13 !