This was presented at MWLUG - August 26th 2014

1. Write once, run anywhere
Angular.js in XPages
Mark Roden
PSC Group LLC
Senior Solutions Architect
MWLUG 2014

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

4. 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 ?

5. Angular.js in XPages

6. 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.

7. 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.

8. 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

9. 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”

10. Angular.js in XPages
• How does Angular.js integrate with XPages ?
• HTML and JavaScript
in the WebContent folder

11. Angular.js in XPages
• How does Angular.js integrate with XPages ?
• Data from the server via Domino Data Services

12. Angular.js in XPages
• How does Angular.js integrate with XPages ?
• Code written in *anything* including (but mostly excluding)
Domino Designer
– Notepad
– Notepad++
– JetBrainsWebStorm

13. Angular.js in XPages
• How does Angular.js integrate with XPages ?
– Hook WebStorm up to the On Disk Structure of your DB

14. Angular.js in XPages
• How does Angular.js work?
– Model
• Domino Data
– View
• HTML
– Controller
• JavaScript

15. Angular.js in XPages
• How does Angular.js work?
Model View

16. Angular.js in XPages
• How does Angular.js work?
– PersonDetailCtrl
C .createPerson()
R .getPerson()
U .savePerson()
D .deletePerson()

17. Angular.js in XPages
• How does Angular.js work?
Controller

18. 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

19. 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?

20. 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

21. Angular.js in XPages
• Demonstration
• People application
1. Running independently on Domino
2. Running within another application
3. Running on different Domino Server

22. Angular.js in XPages
• Demonstration
• Basic People application
– Add new People
– Edit
– Delete

23. Angular.js in XPages
• Demonstration

24. Angular.js in XPages
• Demonstration

25. Angular.js in XPages
• Demonstration

26. Angular.js in XPages
• Demonstration
– Including the application to a new Domino site

27. Angular.js in XPages
• Demonstration

28. Angular.js in XPages
• Demonstration
– Running the same app on a different Domino Server

29. Angular.js in XPages
• Demonstration

30. 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

31. Angular.js in XPages
• Behind the demonstration
– Consolidating the inclusion code

32. Angular.js in XPages
• Behind the demonstration
– Consolidating the inclusion code

33. 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.

34. Angular.js in XPages
• Ok I care – so now what ?
– A new paradigm of business application integration
Write once – run anywhere? Seriously !

35. Angular.js in XPages
• Ok I care – so now what ?
– More Demonstrations 

36. Angular.js in XPages
• Demonstration
– Data Binding with an Angular Driven Chart Directive

37. Angular.js in XPages
• Bluemix

38. Angular.js in XPages
• Bluemix

39. Angular.js in XPages
• Demonstration
– XPages application running inside of Connections

40. Angular.js in XPages
• Demonstration
– XPages application running inside of Connections using
the Connections Business Card API

41. Angular.js in XPages
• Demonstration
– Context specific, integrated Charting within Connections

42. Angular.js in XPages
• Demonstration
– XPages application running inside of SharePoint

43. 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

44. Angular.js in XPages
Questions ?
For more information on Angular.js, XPages and
Application Modernization
mroden@psclistens.com
twitter: marky.roden
skype: marky.roden