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.

A 20 minute introduction to AngularJS for XPage developers


Published on

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

See for the demo files.

Published in: Technology, Education

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 • •
  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:
  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 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 •
  12. 12. Questions?