the future of web development write once, run everywhere with angular.js and domino
TRANSCRIPT
![Page 1: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/1.jpg)
http://beyondtheeveryday.com
Everyone pull it up on their phone
![Page 2: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/2.jpg)
BTE 102: The Future of Web Development Write Once, Run Everywhere with AngularJS and Domino
Marky Roden Mark Leusink
Senior Solutions Architect LinQed
PSC Group LLC
![Page 3: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/3.jpg)
About Mark
Freelance consultant/ developer
– XPages, web, mobile, Unplugged
15 years experience (that makes me younger than Marky)
Fan of everything web dev (Angular, Bootstrap, web components)
Open source (OpenNTF, GitHub)
– XPages Debug Toolbar, Bootstrap4XPages, Bootcards
Blog: http://linqed.eu
Twitter: @markleusink
Email: [email protected]
![Page 4: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/4.jpg)
About Marky
Over 17 years IBM Notes Domino® work
Senior Solutions Architect at PSC Group
• XPages Developer
• Project Leader
• AngularJS Protagonist
Contact Information
• Blog: http://www.xomino.com
• Twitter: @markyroden
• Skype: marky.roden
www.psclistens.com @pscgroup
![Page 5: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/5.jpg)
© 2013 IBM Corporation
F O U N D E D I N 1 9 9 0
The Largest, Most Experienced
XPages Service Firm in North America
PSC Group, LLC
Congratulates our
5 IBM Champions!Brad Balassaitis Andrew Barickman Kathy Brown John Head Mark Roden
![Page 6: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/6.jpg)
Agenda
• Introduction to MVC/ REST architectures
– True Separation of UI and Business Logic
• Introduction to AngularJS
– Why Angular?
– Components and capabilities
– Examples of capabilities
• Domino as a REST Service
• Demo app
– Application Architecture
– How to run the same app “everywhere”
![Page 7: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/7.jpg)
http://beyondtheeveryday.com
Everyone pull it up on their phone
![Page 8: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/8.jpg)
About the demo app
The Demo app is built with
– AngularJS
– Bootstrap
– IBM Domino data
– Zero XPages
And to make it better
– A Bootstrap theme from Bootswatch.com (‘United’)
– Font Awesome for icons
– Animate.css for animations
– FastClick.js for a snappier UI
– angular-local-storage for local storage
Sessions data from the Totally Unofficial Totally Unsupported session database
![Page 9: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/9.jpg)
INTRODUCTION TO MVC / REST ARCHITECTURE
![Page 10: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/10.jpg)
Introduction to MVC / REST Architecture
• MVC (Model-View-Controller) is an architectural design pattern that encourages improved application organization through a separation of concerns.
– The Model manages the data
– The View is the HTML representation of the data through the use of Templates
• What your users see
– The Controller is the application code which is used to determine the way the Model is populated and displayed.
• Glues the Model and View together
• Angular provides the framework to do client-side MVC
![Page 11: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/11.jpg)
Introduction to MVC / REST Architecture
• Representational state transfer (REST) is an architecture style for designing networked applications
– Uses simple HTTP calls
– JSON
• Performant
• Scalable
• Simple interface
• Portable
![Page 12: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/12.jpg)
ServerClient
Introduction to MVC / REST Architecture
• We’ve been building web apps like this
Request page
- process request
- get data
- create HTML
Response
• HTML
• CSS
• JavaScript(display)
![Page 13: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/13.jpg)
Client
Introduction to MVC / REST Architecture
• But this is getting popular
Webserver
Request page/ app
Response
(static HTML, JS,
CSS)
(process)REST
APIData (JSON)
Request data
![Page 14: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/14.jpg)
Client
Introduction to MVC / REST Architecture
• Or this variation
WebserverResponse
(static HTML, JS,
CSS)
(process)REST
APIData (JSON)
Request data
Request page/ app
![Page 15: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/15.jpg)
INTRODUCTION TO ANGULAR.JS
![Page 16: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/16.jpg)
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write.
“Angular is what HTML would have been had it been designed for applications”
The AngularJS team
![Page 17: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/17.jpg)
What is AngularJS
• Web application framework
– Designed as a boilerplate model for an application
– Out of the box capabilities and best practices
– Built with test driven development (TDD) in mind
• Runs in the browser, all client side JavaScript
– Unlike e.g. XPages or C# (SharePoint) where most processing is done server side.
• Helps to create dynamic sites / Single Page Applications
– Partials? Dynamic? Been there, done that!
![Page 18: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/18.jpg)
Why AngularJS ?
• Large developer community
– ~75,000 questions tagged on Stackoverflow.com
• Backed by
– Developed by Google and the community
– Open source (MIT license)
• Stable, mature and performant
– Initial release 2009
– Version 1 released Jun 2012
– Current version 1.3.5 (Dec 2014)
– Version 2 scheduled for end of 2015
![Page 19: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/19.jpg)
Why AngularJS?
• Ready for the web of tomorrow
• Many Concepts adopted by Web Components standard
• Data driven
• Custom elements (functional custom attributes)
• HTML Imports
• DOM Templating
![Page 20: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/20.jpg)
AngularJS: Modules
• Ties the code to the HTML DOM model
![Page 21: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/21.jpg)
Angular Route Control
• UI-Router, state based management
• Configures the app
• When a route is encountered
– Use this template
– Use this Page Title
– Use this controller
• http://beyondtheeveryday.com/#/sessionsAll
• http://beyondtheeveryday.com/#/favorites
![Page 22: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/22.jpg)
AngularJS: Controllers
• Contains the application logic.
app.controller("MainCtrl", function($rootScope, $scope, utils,
localStorageService, SessionsFactory) {
$scope.menuDays = [
{id: '0', label:'Sunday'},
{id: '1', label:'Monday'},
{id: '2', label:'Tuesday'},
{id: '3', label:'Wednesday'}
];
//set default active menu option
$scope.pageTitle = "Connect 2015 Sessions";
$scope.activeMenu = "about";
![Page 23: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/23.jpg)
• Lazily instantiated, only when they are needed
– “Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app”
var app = angular.module("sessionsApp.services", []);
app.factory('SessionsFactory', function($http) {
return {
all : function() {
return $http.get(‘db.nsf/collections/name/sessions')
.then(
function(res) {
return res.data;
});
},
...
AngularJS: Factories and Services
![Page 24: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/24.jpg)
AngularJS: Directives
• Tells Angular that it needs to ‘do’ something
• Interact with the browser based on the controller’s instructions
• Re-usable components
• Much of Angular’s core functionality Directive based
<div class="row" ng-repeat="speaker in session.speakers">
<div class="col-xs-12 col-sm-12">
{{speaker}}
</div>
</div>
![Page 25: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/25.jpg)
AngularJS in depth
• Dependency injections
A software design pattern that deals with how components get hold of their dependencies.
The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.
![Page 26: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/26.jpg)
AngularJS in depth
• How does it all hang together?
![Page 27: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/27.jpg)
AngularJS in depth
• AngularJS core examples
– ‘$scope’
sessionsAppCtrl.controller('FeedbackCtrl', function($scope, SessionsFactory) {
$scope.submitted = false;
$scope.submit = function() {
SessionsFactory.saveFeedback( {feedback : $scope.feedback, name: $scope.name} );
$scope.submitted = true;
};
});
![Page 28: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/28.jpg)
AngularJS in depth
• AngularJS core services example
– '$http'
app.factory('SessionsFactory', function($http, $q, dasBaseUrl, utils) {
return {
all : function() {
return $http.get('collections/name/sessionsAll?count=1000', {cache: true})
.then( function(res) {
return res.data;
});
},
...
![Page 29: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/29.jpg)
AngularJS in depth
• AngularJS core directives examples
– ng-show / ng-hide
– ng-click
– ng-list, ng-class, ng-repeat, ng-keydown etc
};
<div class="col-sm-8">
<button class="btn btn-default" ng-click="home()">Back</button>
<button class="btn" ng-click="savePerson($event)" ng-hide="create">Save</button>
<button class="btn" ng-click="createPerson($event)" ng-show="create">Create</button>
</div>
![Page 30: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/30.jpg)
AngularJS in depth
• AngularJS template example
![Page 31: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/31.jpg)
AngularJS in depth
• How does AngularJS integrate with XPages ?
• An application written using AngularJS uses 4 main things
– HTML Pages
– JavaScript files
– CSS
– A Data Service
• One or many of those can be “XPages”
![Page 32: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/32.jpg)
DOMINO AS A REST SERVICE
![Page 33: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/33.jpg)
Domino as REST service
• Three options to use Domino as a data store for an Angular application:
– Domino Access Services
• Built-in, easiest to enable
– REST service component from the Extension Library
• More customization options
– Do-it-yourself REST service
• Fully customizable, requires more work
![Page 34: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/34.jpg)
Domino as REST service - Domino Access Services (DAS)
• Consists of 3 services: core, data and calendar
– For the demo app we’ve only used the data service
• Must be enabled on server level, app level and form/ view level
• Gives you the data from all fields (documents) or columns (views)
![Page 35: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/35.jpg)
Domino as REST service - Domino Access Services (DAS)
http://beyondtheeveryday.com/beyond/connect2015.nsf/api/data/collections/name/sessionsAll
Server Database path DAS View name
![Page 36: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/36.jpg)
Domino as REST service - ExtLib REST
• Drag on an XPage
• Link to data source (view, bean, …)
• Set path
• Done
<xe:restService pathInfo="contactjson">
<xe:this.service>
<xe:viewJsonService viewName="AllContacts" var="entry"
contentType="text/plain" count="10" defaultColumns="true">
</xe:viewJsonService>
</xe:this.service>
</xe:restService>
![Page 37: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/37.jpg)
Domino as REST service - custom REST service
public class MyRESTService {
public static String doGet(HttpServletRequest request, HttpServletResponse response)
{
JsonJavaObject json = new JsonJavaObject();
json.put("userName", ExtLibUtil.getCurrentSession().getEffectiveUserName() );
return JsonGenerator.toJson(JsonJavaFactory.instanceEx, json);
}
}
<!--?xml version="1.0" encoding="UTF-8"?-->
<![CDATA[#{javascript:
var externalContext = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
writer.write(
eu.linqed.MyRESTService.doGet(
externalContext.getRequest(),externalContext.getResponse()
));
writer.endDocument();
}
}]]>
![Page 38: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/38.jpg)
Domino as REST service
• More on this: “REST Services and IBM Domino/XWork” by John Dalsgaard
– http://www.slideshare.net/JohnDalsgaard/dannotes-19-20-november-2014
![Page 39: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/39.jpg)
AngularJS in XPages
• How does AngularJS work?
Model View Controller
![Page 40: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/40.jpg)
DEMONSTRATION
![Page 41: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/41.jpg)
Demo app
• Demonstration you just saw was hosted on….
– IBM Domino ®
– IBM Bluemix ®
– Microsoft SharePoint ®
– IBM MobileFirst Platform Foundation ® (previously: IBM Worklight)
– IBM Connections
• Open source
– http://github.com/markleusink/BeyondSessionsApp
![Page 42: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/42.jpg)
CONCLUSION
![Page 43: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/43.jpg)
Conclusion
• AngularJS: MVC front end client side framework
• Add structure to your code
• Enables hybrid mobile web apps– PhoneGap, Cordova, Worklight
• Use Domino as a NoSQL app server– Out-of-the-Box, Proven, Stable, Rock solid security
![Page 44: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/44.jpg)
Conclusion
• Modernize Domino Applications smartly
• Running Domino apps within other server platforms
• Make your application code portable
![Page 45: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/45.jpg)
Questions ?
@markyroden
http://xomino.com
@markleusink
http://linqed.eu
![Page 46: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/46.jpg)
Engage Online
SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
Social Business Insights blog ibm.com/blogs/socialbusiness
– Read and engage with our bloggers
Follow us on Twitter
– @IBMConnect and @IBMSocialBiz
LinkedIn http://bit.ly/SBComm
– Participate in the IBM Social Business group on LinkedIn
Facebook https://www.facebook.com/IBMConnected
– Like IBM Social Business on Facebook
![Page 47: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/47.jpg)
Notices and Disclaimers
Copyright © 2015 by International Business Machines Corporation (IBM). No part of this document may be reproduced or transmitted in any form without written permission from IBM.
U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM.
Information in these presentations (including information relating to products that have not yet been announced by IBM) has been reviewed for accuracy as of the date of initial publication and could include
unintentional technical or typographical errors. IBM shall have no responsibility to update this information. THIS DOCUMENT IS DISTRIBUTED "AS IS" WITHOUT ANY WARRANTY, EITHER EXPRESS OR
IMPLIED. IN NO EVENT SHALL IBM BE LIABLE FOR ANY DAMAGE ARISING FROM THE USE OF THIS INFORMATION, INCLUDING BUT NOT LIMITED TO, LOSS OF DATA, BUSINESS INTERRUPTION,
LOSS OF PROFIT OR LOSS OF OPPORTUNITY. IBM products and services are warranted according to the terms and conditions of the agreements under which they are provided.
Any statements regarding IBM's future direction, intent or product plans are subject to change or withdrawal without notice.
Performance data contained herein was generally obtained in a controlled, isolated environments. Customer examples are presented as illustrations of how those customers have used IBM products and the results
they may have achieved. Actual performance, cost, savings or other results in other operating environments may vary.
References in this document to IBM products, programs, or services does not imply that IBM intends to make such products, programs or services available in all countries in which IBM operates or does business.
Workshops, sessions and associated materials may have been prepared by independent session speakers, and do not necessarily reflect the views of IBM. All materials and discussions are provided for
informational purposes only, and are neither intended to, nor shall constitute legal or other guidance or advice to any individual participant or their specific situation.
It is the customer’s responsibility to insure its own compliance with legal requirements and to obtain advice of competent legal counsel as to the identification and interpretation of any relevant laws and regulatory
requirements that may affect the customer’s business and any actions the customer may need to take to comply with such laws. IBM does not provide legal advice or represent or warrant that its services or
products will ensure that the customer is in compliance with any law.
Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products in connection
with this publication and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the
suppliers of those products. IBM does not warrant the quality of any third-party products, or the ability of any such third-party products to interoperate with IBM’s products. IBM EXPRESSLY DISCLAIMS ALL
WARRANTIES, EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
The provision of the information contained herein is not intended to, and does not, grant any right or license under any IBM patents, copyrights, trademarks or other intellectual property right.
IBM, the IBM logo, ibm.com, BrassRing®, Connections™, Domino®, Global Business Services®, Global Technology Services®, SmartCloud®, Social Business®, Kenexa®, Notes®, PartnerWorld®, Prove It!®,
PureSystems®, Sametime®, Verse™, Watson™, WebSphere®, Worklight®, are trademarks of International Business Machines Corporation, registered in many jurisdictions worldwide. Other product and service
names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at: www.ibm.com/legal/copytrade.shtml.
![Page 48: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/48.jpg)
It might look like a giveaway for a gay wedding. It’s not.
![Page 49: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/49.jpg)
• EXTRA SLIDES
![Page 50: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/50.jpg)
AngularJS in depth
• Simple example of two way data binding
![Page 51: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/51.jpg)
AngularJS in XPages
• Behind the demonstration
– Cross-Origin Resource Sharing (CORS)
• Browser security
• Preventing cross site scripting attacks
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
![Page 52: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/52.jpg)
• AngularJS core function examples
AngularJS in depth
![Page 53: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/53.jpg)
AngularJS in XPages
• Behind the demonstration
– Cross-Origin Resource Sharing (CORS)
![Page 54: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/54.jpg)
AngularJS in XPages
• Behind the demonstration
– Adding Server headers in Domino with NAB (3 max)
![Page 55: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/55.jpg)
AngularJS in XPages
• How does AngularJS integrate with XPages ?
• HTML and JavaScriptin the WebContent folder
![Page 56: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/56.jpg)
AngularJS in depth
• AngularJS core provider example
– '$routeProvider'
personApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/person/new', {
templateUrl: 'partials/person.html',
controller: 'PersonDetailCtrl',
}).
otherwise({
redirectTo: '/people'
});
}]);
![Page 57: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/57.jpg)
AngularJS in XPages
• Model
– Domino Data
• View
– HTML
• Controller
– JavaScript
![Page 58: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/58.jpg)
![Page 59: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/59.jpg)
![Page 60: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/60.jpg)
![Page 61: The future of web development write once, run everywhere with angular.js and domino](https://reader030.vdocument.in/reader030/viewer/2022020106/55a78a211a28ab75548b471b/html5/thumbnails/61.jpg)
What is AngularJS
• Framework of methods and objects to model the MVC architecture easily
– App Modules
– App Controllers
– App Directives
– App Factories / Services