Download as PDF, PPTX
Uploaded byMark Leusink
A 20 minute introduction to AngularJS for XPage developers
This document introduces AngularJS as a front-end web application framework that enhances client-side programming, contrasting its architecture with server-side XPages. It discusses the development process, tools, and provides setup instructions for demos using Domino data services. The document highlights the significance of AngularJS in modern web development and mobile hybrid applications.
More Related Content
Similar to A 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developers
- 1.
- 2. Me • Freelance webdeveloper • 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 whatHTML 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 littledifferent 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 thedemos • 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 tobe 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.