A 20 minute introduction to AngularJS for XPage developers
•
1 like•4,387 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (6)
Similar to A 20 minute introduction to AngularJS for XPage developers
Similar to A 20 minute introduction to AngularJS for XPage developers (20)
More from Mark Leusink
More from Mark Leusink (10)
Recently uploaded
Recently uploaded (20)
A 20 minute introduction to AngularJS for XPage developers
- 1. A 20 minute introduction to
- 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. 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. “Angular is what HTML would have been had it been designed for applications”
- 5. What is AngularJS? • Initial release: 2009 • Developed by and the community • Major driver for user (developer) adoption • MIT licensed, open source
- 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. 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. 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. On to the demos • Let’s start simple…
- 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. 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. Questions?