A 20 minute introduction to AngularJS for XPage developers

2,920 views
2,685 views

Published on

Slides for the session I gave at the XPages & Beer event on July 2nd, 2014.

See https://github.com/markleusink/XPagesBeerAngular for the demo files.

Published in: Technology, Education
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,920
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
22
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

A 20 minute introduction to AngularJS for XPage developers

  1. 1. A 20 minute introduction to
  2. 2. Me • Freelance web developer • XPages, web, mobile, Teamstudio Unplugged • Open source • OpenNTF Board, XPages Debug Toolbar, Bootstrap4XPages • @markleusink • m.leusink@linqed.eu • http://linqed.eu
  3. 3. What is AngularJS? • (front end) Web application framework • Runs in the browser, all client side JavaScript • Unlike XPages where (almost) all processing is done server side. • Helps with creating dynamic sites / Single Page Applications • Partials? Dynamic? Been there, done that! • Server side templating (XPages) vs client side (Angular)
  4. 4. “Angular is what HTML would have been had it been designed for applications”
  5. 5. What is AngularJS? • Initial release: 2009 • Developed by and the community • Major driver for user (developer) adoption • MIT licensed, open source
  6. 6. Facts • Model-View-Controller (MVC) to make development and testing easier • Decouples DOM manipulation from application logic • HTML with custom attributes (‘directives’) • Tells Angular that it needs to ‘do’ something <html ng-app=“myFirstApp”> <div ng-repeat=“beer in beers”>
  7. 7. Development • A little different then XPages… • Forget about Domino Designer • You’re writing HTML, CSS, JavaScript • Any editor will do, use Notepad if you like :-) • Some editors help you: • syntax highlighting, code completion, debugging • I like Sublime Text 3, but there are more: • WebStorm (full JavaScript IDE), Coda 2, Brackets
  8. 8. Demos - Setup • Local Domino server in a Windows VM • Static files served from domino/html folder • I want to serve them from a server (local file access in browsers has restrictions) • Could also have used NodeJS, Apache, … • Demo files and NSF: https://github.com/markleusink/XPagesBeerAngular
  9. 9. On to the demos • Let’s start simple…
  10. 10. Demos - Setup • Using remote (Domino) data • For the demo I’m using Domino Data Services (DDS) • See http://www.browniesblog.com/A55CBC/blog.nsf/dx/ 09042013111234MBRF6E.htm on how to enable • Make sure that you’re logged in or the allow Anonymous access • Can also use REST service from the ExtLib (or write one yourself) • Same domain - so no CORS (Cross Origin Resource Sharing) issues.
  11. 11. Why? • Seems to be the way forward for web dev • Add structure your code • Required if you want to build mobile hybrid apps • Cordova, PhoneGap, Worklight • No server-side web framework needed • Lots of alternatives: Ember, Backbone, Knockout, Dojo, YUI • todomvc.com
  12. 12. Questions?

×