A 20 minute introduction to AngularJS for XPage developers
-
Upload
mark-leusink -
Category
Technology
-
view
1.483 -
download
0
description
Transcript of A 20 minute introduction to AngularJS for XPage developers
![Page 1: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/1.jpg)
A 20 minute introduction to
![Page 2: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/2.jpg)
Me• Freelance web developer
• XPages, web, mobile, Teamstudio Unplugged
• Open source
• OpenNTF Board, XPages Debug Toolbar, Bootstrap4XPages
• @markleusink
• http://linqed.eu
![Page 3: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/3.jpg)
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)
![Page 4: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/4.jpg)
“Angular is what HTML would have been had it been designed for applications”
![Page 5: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/5.jpg)
What is AngularJS?
• Initial release: 2009
• Developed by and the community
• Major driver for user (developer) adoption
• MIT licensed, open source
![Page 6: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/6.jpg)
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”>
![Page 7: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/7.jpg)
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
![Page 8: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/8.jpg)
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
![Page 10: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/10.jpg)
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.
![Page 11: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/11.jpg)
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
![Page 12: A 20 minute introduction to AngularJS for XPage developers](https://reader034.fdocuments.us/reader034/viewer/2022052619/556467f2d8b42a90338b50df/html5/thumbnails/12.jpg)
Questions?