In this article I will demonstrate how to use Angular.js to access Domino Data and display it in place of the hard coded data we used in the previous article.
Introduction
This article is based off the Angular developer tutorial on XHR and dependency injection . It is essential you go and read that article before continuing. It explains how dependency injection works, why it is used and about Angular services.
Modifying the controller
In our previous article we used a hard coded json string of data directly within the controller. In a real application though, the data will be dynamic and need to be pulled directly from the data repository as and when needed.
Injecting the $http service
When the controller is constructed we are able to pass to it an unspecified number of services which the controller code are dependent on. In a sense it is just like creating your XPage, needing to use jQuery and making sure the jQuery library is loaded on the page before you use a $(‘selector’). The jQuery library is a dependency of the XPage code running the plugin.
The previous controller looked like this
/**
* Created by mroden on 4/25/2014.
*/
var personApp = angular.module('personApp', []);
personApp.controller('PersonCtrl', function ($scope) {
$scope.people = [
{
"@entryid":"1-431C28F894B0548185257C22000A8403",
"firstname":"Agnes C.",
"lastname":"Smith",
"address":"24256 Leisure Lane"
},
{
"@entryid":"2-4ED02366A420D23985257C4F000B0BD7",
"firstname":"Albert",
"lastname":"Scoggins",
"address":"3525 Koontz Lane, second"
},
{
"@entryid":"3-6D8120FA75B4BCCF85257C4F000B0B5D",
"firstname":"Alejandra",
"lastname":"Dodge",
"address":"3044 Simpson Avenue"
}
];
});
And out new controller looks like this
/**
* Created by mroden on 4/25/2014.
*/
var personApp = angular.module('personApp', []);
personApp.controller('PeopleCtrl', function ($scope, $http) {
$http.get('http://copper.xomino.com/xomino/ainx.nsf/api/data/collections/name/byFirstName5Col?open&')
.success(function(data) {
$scope.people = data;
});
});
So you can see that the $http service has been added as a service added to the instantiation of the personApp controller PeopleCtrl. The code has also obviously got much shorter because he are not hard coding the data in here.
**yourDatabaseJSONFeed**
In Domino (R9) we have a number of methods available to us to create JSON data securely:
- LotusScript/Java agent
- Form with dataType set
- XAgent (SSJS and/or Java)
- ExtLib REST service (out of the box and custom REST)
- Domino Data Services
For the sake of these examples I am going to use Domino Data Services (DDS). For more information on what they are and how to set them up securely in your database check out these links:
- Enabling Domino Data Services
- Domino Data Services in Domino 9 – first fumblings!
- BP204 – Take a REST and put your data to work with APIs! (Read all of it – but Slide 65 onward for DDS)
In the example above we used the Domino Data Services the URL for provides the following
http://copper.xomino.com/xomino/ainx.nsf/api/data/collections/name/byFirstName5Col?open&
[
{
"@href":"\/xomino\/ainx.nsf\/api\/data\/collections\/name\/byFirstName5Col\/unid\/C5543E624FF5042805257838007ABDA3",
"@link":
{
"rel":"document",
"href":"\/xomino\/ainx.nsf\/api\/data\/documents\/unid\/C5543E624FF5042805257838007ABDA3"
},
"@entryid":"1-C5543E624FF5042805257838007ABDA3",
"@unid":"C5543E624FF5042805257838007ABDA3",
"@noteid":"18D6",
"@position":"1",
"@siblings":1298,
"@form":"fUserName",
"firstname":"Adam",
"lastname":"Saenz",
"address":"2519 Custer Street",
"city":"ROCKWOOD (SOMERSET)",
"state":"PA",
"zip":15557
},
.......
And as you can see from this the firstname, lastname and address fields are supplied in the REST JSON feed.
Note on testing
If you try and load the code up in the Webstorm debugger you will get the following CORS problem – nothing works…..
When your Browser is in the “localhost” domain it cannot pull ajax requests from the xomino.com domain – it is a security feature of the browser and server to prevent cross site scripting. Read more about CORS here.
This is why (as we saw in the previous article) we integrated the development environment with the Domino ODS. Because I am working on a sync’d version of the database – all I have to do is go over to the index.html within the Domino database on my server and it works (because we are in the correct domain)
Conclusion
What we have seen in this article is a simple evolution of the controller to allow it to pull real data from the server rather than using hard coded Data. In the next article we will look at further CRUD operations.
Xomino 