Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Write once, run anywhere 
Angular.js in XPages 
Mark Roden 
PSC Group LLC 
Senior Solutions Architect 
MWLUG 2014
About Marky 
Over 17 years IBM Notes Domino® work 
Senior Solutions Architect at PSC Group 
• XPages Developer 
• Project ...
Angular.js in XPages 
• What is Angular.js ? 
• How does Angular.js integrate with XPages ? 
• Why do I care ? 
• Demonstr...
Angular.js in XPages
Angular.js in XPages 
• What is Angular.js ? 
• AngularJS is a structural framework for dynamic web apps. It lets 
you use...
Angular.js in XPages 
• What is Angular.js ? 
• MVC web framework to model your application using client side 
JavaScript ...
Angular.js in XPages 
• How does Angular.js integrate with XPages ? 
http://xomino.com/category/angular-in-xpages/ 
• Domi...
Angular.js in XPages 
• How does Angular.js integrate with XPages ? 
• An application written using Angular.js uses 4 main...
Angular.js in XPages 
• How does Angular.js integrate with XPages ? 
• HTML and JavaScript 
in the WebContent folder
Angular.js in XPages 
• How does Angular.js integrate with XPages ? 
• Data from the server via Domino Data Services
Angular.js in XPages 
• How does Angular.js integrate with XPages ? 
• Code written in *anything* including (but mostly ex...
Angular.js in XPages 
• How does Angular.js integrate with XPages ? 
– Hook WebStorm up to the On Disk Structure of your D...
Angular.js in XPages 
• How does Angular.js work? 
– Model 
• Domino Data 
– View 
• HTML 
– Controller 
• JavaScript
Angular.js in XPages 
• How does Angular.js work? 
Model View
Angular.js in XPages 
• How does Angular.js work? 
– PersonDetailCtrl 
C .createPerson() 
R .getPerson() 
U .savePerson() ...
Angular.js in XPages 
• How does Angular.js work? 
Controller
Angular.js in XPages 
• Why do I care? 
• Business Perspective 
– Requirements 
– Customers 
• Personal Perspective 
– Web...
Angular.js in XPages 
• Why do I care? 
• Requirements 
– Mixed technology production environment 
– Multiple Web Server e...
Angular.js in XPages 
• Why do I care? 
• Requirements 
– Because you want a subset of one application’s 
functionality to...
Angular.js in XPages 
• Demonstration 
• People application 
1. Running independently on Domino 
2. Running within another...
Angular.js in XPages 
• Demonstration 
• Basic People application 
– Add new People 
– Edit 
– Delete
Angular.js in XPages 
• Demonstration
Angular.js in XPages 
• Demonstration
Angular.js in XPages 
• Demonstration
Angular.js in XPages 
• Demonstration 
– Including the application to a new Domino site
Angular.js in XPages 
• Demonstration
Angular.js in XPages 
• Demonstration 
– Running the same app on a different Domino Server
Angular.js in XPages 
• Demonstration
Angular.js in XPages 
• Behind the demonstration 
– Cross-Origin Resource Sharing (CORS) 
• Browser security 
• Preventing...
Angular.js in XPages 
• Behind the demonstration 
– Consolidating the inclusion code
Angular.js in XPages 
• Behind the demonstration 
– Consolidating the inclusion code
Angular.js in XPages 
• Directives 
– Angular.js “plugins” to run a batch of code based on an 
HTML attribute 
– Portable ...
Angular.js in XPages 
• Ok I care – so now what ? 
– A new paradigm of business application integration 
Write once – run ...
Angular.js in XPages 
• Ok I care – so now what ? 
– More Demonstrations 
Angular.js in XPages 
• Demonstration 
– Data Binding with an Angular Driven Chart Directive
Angular.js in XPages 
• Bluemix
Angular.js in XPages 
• Bluemix
Angular.js in XPages 
• Demonstration 
– XPages application running inside of Connections
Angular.js in XPages 
• Demonstration 
– XPages application running inside of Connections using 
the Connections Business ...
Angular.js in XPages 
• Demonstration 
– Context specific, integrated Charting within Connections
Angular.js in XPages 
• Demonstration 
– XPages application running inside of SharePoint
Angular.js in XPages 
• Conclusion 
– Angular.js: MVC front end client side framework 
– Use Domino as a NoSQL app server ...
Angular.js in XPages 
Questions ? 
For more information on Angular.js, XPages and 
Application Modernization 
mroden@pscli...
Angular.js in XPages
Upcoming SlideShare
Loading in …5
×

Angular.js in XPages

8,798 views

Published on

This was presented at MWLUG - August 26th 2014

Published in: Software

Angular.js in XPages

  1. 1. Write once, run anywhere Angular.js in XPages Mark Roden PSC Group LLC Senior Solutions Architect MWLUG 2014
  2. 2. About Marky Over 17 years IBM Notes Domino® work Senior Solutions Architect at PSC Group • XPages Developer • Project Leader • Angular.js Protagonist Contact Information – Blog: http://www.xomino.com – Email: marky@xomino.com – Twitter: @markyroden – Skype: marky.roden – "Come work for us - it will be fun" www.psclistens.com @pscgroup
  3. 3. Angular.js in XPages • What is Angular.js ? • How does Angular.js integrate with XPages ? • Why do I care ? • Demonstration • Behind the demonstration • Ok I care – so now what ?
  4. 4. Angular.js in XPages
  5. 5. Angular.js in XPages • What is Angular.js ? • AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write.
  6. 6. Angular.js in XPages • What is Angular.js ? • MVC web framework to model your application using client side JavaScript as opposed to Server side code. – The Model is the data created by the application – The View is the HTML representation of the data through the use of Templates – The Controller is the application code which is used to determine the way the Model is populated and displayed.
  7. 7. Angular.js in XPages • How does Angular.js integrate with XPages ? http://xomino.com/category/angular-in-xpages/ • Domino is the original NoSQL database – Secure – XPages is Domino with a Java Server Faces server – Multiple options for data retrieval • Domino Data Services • Custom Rest Service • ExtLib Rest Service • ?ReadViewEntries
  8. 8. Angular.js in XPages • How does Angular.js integrate with XPages ? • An application written using Angular.js uses 4 main things – HTML Pages – JavaScript files – CSS – A Data Service • One or many of those can be “XPages”
  9. 9. Angular.js in XPages • How does Angular.js integrate with XPages ? • HTML and JavaScript in the WebContent folder
  10. 10. Angular.js in XPages • How does Angular.js integrate with XPages ? • Data from the server via Domino Data Services
  11. 11. Angular.js in XPages • How does Angular.js integrate with XPages ? • Code written in *anything* including (but mostly excluding) Domino Designer – Notepad – Notepad++ – JetBrainsWebStorm
  12. 12. Angular.js in XPages • How does Angular.js integrate with XPages ? – Hook WebStorm up to the On Disk Structure of your DB
  13. 13. Angular.js in XPages • How does Angular.js work? – Model • Domino Data – View • HTML – Controller • JavaScript
  14. 14. Angular.js in XPages • How does Angular.js work? Model View
  15. 15. Angular.js in XPages • How does Angular.js work? – PersonDetailCtrl C .createPerson() R .getPerson() U .savePerson() D .deletePerson()
  16. 16. Angular.js in XPages • How does Angular.js work? Controller
  17. 17. Angular.js in XPages • Why do I care? • Business Perspective – Requirements – Customers • Personal Perspective – Web development – Increasingly popular – Too bleeding edge for Enterprise today but they will catch up eventually
  18. 18. Angular.js in XPages • Why do I care? • Requirements – Mixed technology production environment – Multiple Web Server environment – Pressure on existing Notes applications to Modernize or Die?
  19. 19. Angular.js in XPages • Why do I care? • Requirements – Because you want a subset of one application’s functionality to appear in another application – Dashboards • Charts • Reports – Functional decision making across systems
  20. 20. Angular.js in XPages • Demonstration • People application 1. Running independently on Domino 2. Running within another application 3. Running on different Domino Server
  21. 21. Angular.js in XPages • Demonstration • Basic People application – Add new People – Edit – Delete
  22. 22. Angular.js in XPages • Demonstration
  23. 23. Angular.js in XPages • Demonstration
  24. 24. Angular.js in XPages • Demonstration
  25. 25. Angular.js in XPages • Demonstration – Including the application to a new Domino site
  26. 26. Angular.js in XPages • Demonstration
  27. 27. Angular.js in XPages • Demonstration – Running the same app on a different Domino Server
  28. 28. Angular.js in XPages • Demonstration
  29. 29. Angular.js in XPages • Behind the demonstration – Cross-Origin Resource Sharing (CORS) • Browser security • Preventing cross site scripting attacks • https://developer.mozilla.org/en- US/docs/Web/HTTP/Access_control_CORS
  30. 30. Angular.js in XPages • Behind the demonstration – Consolidating the inclusion code
  31. 31. Angular.js in XPages • Behind the demonstration – Consolidating the inclusion code
  32. 32. Angular.js in XPages • Directives – Angular.js “plugins” to run a batch of code based on an HTML attribute – Portable code which can be plugged into any application at any time.
  33. 33. Angular.js in XPages • Ok I care – so now what ? – A new paradigm of business application integration Write once – run anywhere? Seriously !
  34. 34. Angular.js in XPages • Ok I care – so now what ? – More Demonstrations 
  35. 35. Angular.js in XPages • Demonstration – Data Binding with an Angular Driven Chart Directive
  36. 36. Angular.js in XPages • Bluemix
  37. 37. Angular.js in XPages • Bluemix
  38. 38. Angular.js in XPages • Demonstration – XPages application running inside of Connections
  39. 39. Angular.js in XPages • Demonstration – XPages application running inside of Connections using the Connections Business Card API
  40. 40. Angular.js in XPages • Demonstration – Context specific, integrated Charting within Connections
  41. 41. Angular.js in XPages • Demonstration – XPages application running inside of SharePoint
  42. 42. Angular.js in XPages • Conclusion – Angular.js: MVC front end client side framework – Use Domino as a NoSQL app server – Modernize Domino Applications smartly – Running Domino apps within other server platforms – Make your application code portable
  43. 43. Angular.js in XPages Questions ? For more information on Angular.js, XPages and Application Modernization mroden@psclistens.com twitter: marky.roden skype: marky.roden

×