SlideShare a Scribd company logo
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

!

More Related Content

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

Similar to [Nuxeo World 2013] BUILDING APPLICATIONS WITH ANGULARJS - DAMIEN METZLER (20)

How to build a PostgreSQL-backed website quickly
How to build a PostgreSQL-backed website quicklyHow to build a PostgreSQL-backed website quickly
How to build a PostgreSQL-backed website quickly
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day Workshop
 
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
 
From Renamer Plugin to Polyglot IDE
From Renamer Plugin to Polyglot IDEFrom Renamer Plugin to Polyglot IDE
From Renamer Plugin to Polyglot IDE
 
Nextflow and AWS Batch - GCC/BOSC 2018
Nextflow and AWS Batch - GCC/BOSC 2018Nextflow and AWS Batch - GCC/BOSC 2018
Nextflow and AWS Batch - GCC/BOSC 2018
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New Angle
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
 
Django
DjangoDjango
Django
 
Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9
 
Docker &amp; azure
Docker &amp; azureDocker &amp; azure
Docker &amp; azure
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
 
KubeSecOps
KubeSecOpsKubeSecOps
KubeSecOps
 
The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.jsThe MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
 
Developing apps in Windows Containers using Docker
Developing apps in Windows Containers using DockerDeveloping apps in Windows Containers using Docker
Developing apps in Windows Containers using Docker
 
Create responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJSCreate responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJS
 
SPUnite17 Introducing Logic Apps
SPUnite17 Introducing Logic AppsSPUnite17 Introducing Logic Apps
SPUnite17 Introducing Logic Apps
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JS
 
Add Cycleops to your development cycles - Docker Athens meetup.pptx
Add Cycleops to your development cycles - Docker Athens meetup.pptxAdd Cycleops to your development cycles - Docker Athens meetup.pptx
Add Cycleops to your development cycles - Docker Athens meetup.pptx
 

More from Nuxeo

Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...
Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...
Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...
Nuxeo
 

More from Nuxeo (20)

Own the Digital Shelf Strategies Food and Beverage Companies
Own the Digital Shelf Strategies Food and Beverage CompaniesOwn the Digital Shelf Strategies Food and Beverage Companies
Own the Digital Shelf Strategies Food and Beverage Companies
 
How DAM Librarians Can Get Ready for the Uncertain Future
How DAM Librarians Can Get Ready for the Uncertain FutureHow DAM Librarians Can Get Ready for the Uncertain Future
How DAM Librarians Can Get Ready for the Uncertain Future
 
How Insurers Fueled Transformation During a Pandemic
How Insurers Fueled Transformation During a PandemicHow Insurers Fueled Transformation During a Pandemic
How Insurers Fueled Transformation During a Pandemic
 
Manage your Content at Scale with MongoDB and Nuxeo
Manage your Content at Scale with MongoDB and NuxeoManage your Content at Scale with MongoDB and Nuxeo
Manage your Content at Scale with MongoDB and Nuxeo
 
Accelerate the Digital Supply Chain From Idea to Support
Accelerate the Digital Supply Chain From Idea to SupportAccelerate the Digital Supply Chain From Idea to Support
Accelerate the Digital Supply Chain From Idea to Support
 
Where are you in the DAM Continuum
Where are you in the DAM ContinuumWhere are you in the DAM Continuum
Where are you in the DAM Continuum
 
Customer Experience in 2021
Customer Experience in 2021Customer Experience in 2021
Customer Experience in 2021
 
L’IA personnalisée, clé d’une gestion de l’information innovante
L’IA personnalisée, clé d’une gestion de l’information innovanteL’IA personnalisée, clé d’une gestion de l’information innovante
L’IA personnalisée, clé d’une gestion de l’information innovante
 
Gérer ses contenus avec MongoDB et Nuxeo
Gérer ses contenus avec MongoDB et NuxeoGérer ses contenus avec MongoDB et Nuxeo
Gérer ses contenus avec MongoDB et Nuxeo
 
Le DAM en 2021 : Tendances, points clés et critères d'évaluation
Le DAM en 2021 : Tendances, points clés et critères d'évaluationLe DAM en 2021 : Tendances, points clés et critères d'évaluation
Le DAM en 2021 : Tendances, points clés et critères d'évaluation
 
Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...
Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...
Enabling Digital Transformation Amidst a Global Pandemic | Low-Code, Cloud, A...
 
Elevate your Customer's Experience and Stay Ahead of the Competition
Elevate your Customer's Experience and Stay Ahead of the CompetitionElevate your Customer's Experience and Stay Ahead of the Competition
Elevate your Customer's Experience and Stay Ahead of the Competition
 
Driving Brand Loyalty Through Superior Customer Experience
Driving Brand Loyalty Through Superior Customer Experience Driving Brand Loyalty Through Superior Customer Experience
Driving Brand Loyalty Through Superior Customer Experience
 
Drive Enterprise Speed and Scale with A Cloud-Native DAM
Drive Enterprise Speed and Scale with A Cloud-Native DAMDrive Enterprise Speed and Scale with A Cloud-Native DAM
Drive Enterprise Speed and Scale with A Cloud-Native DAM
 
The Big Picture: the Role of Video, Photography, and Content in Enhancing the...
The Big Picture: the Role of Video, Photography, and Content in Enhancing the...The Big Picture: the Role of Video, Photography, and Content in Enhancing the...
The Big Picture: the Role of Video, Photography, and Content in Enhancing the...
 
How Creatives Are Getting Creative in 2020 and Beyond
How Creatives Are Getting Creative in 2020 and BeyondHow Creatives Are Getting Creative in 2020 and Beyond
How Creatives Are Getting Creative in 2020 and Beyond
 
Digitalisation : Améliorez la collaboration et l’expérience client grâce au DAM
Digitalisation : Améliorez la collaboration et l’expérience client grâce au DAMDigitalisation : Améliorez la collaboration et l’expérience client grâce au DAM
Digitalisation : Améliorez la collaboration et l’expérience client grâce au DAM
 
Reimagine Your Claims Process with Future-Proof Technologies
Reimagine Your Claims Process with Future-Proof TechnologiesReimagine Your Claims Process with Future-Proof Technologies
Reimagine Your Claims Process with Future-Proof Technologies
 
Comment le Centre Hospitalier Laborit dématérialise ses processus administratifs
Comment le Centre Hospitalier Laborit dématérialise ses processus administratifsComment le Centre Hospitalier Laborit dématérialise ses processus administratifs
Comment le Centre Hospitalier Laborit dématérialise ses processus administratifs
 
Accelerating the Packaging Design Process with Artificial Intelligence
Accelerating the Packaging Design Process with Artificial IntelligenceAccelerating the Packaging Design Process with Artificial Intelligence
Accelerating the Packaging Design Process with Artificial Intelligence
 

Recently uploaded

Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 

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