Configuring CORS requires custom HTTP headers for each call, and results in a great deal of code duplication.
This can be avoided by registering a QBO Service with our Angular module.
For an excellent explanation of Angular Services, please visit this blog post: http://blog.pluralsight.com/angularjs-step-by-step-services
Here we declare an Angular Module called quandisDemo, and register an Angular Service called qbo:
angular.module('quandisDemo').factory('qbo', function ($http) {
return {
request: function (url, params, success) {
$http({
method: 'POST',
url: url,
params: params,
crossDomain: false,
headers: {
'qboAutomation': true
},
withCredentials: true,
responseType: 'json'
}).success(success);
}
};
});
The headers above are required for each CORS request made to QBO, and so we isolate them in order that any future changes can be made in one place.
We also pass in a success() method, as each Controller that call this CORS Request Factory will have specific needs in a success function.
This module will be used in each of the examples below.
Given our CORS Request factory above, logging in is fairly simple:
angular.module('quandisDemo').controller('LoginController', function (qbo) {
var login = this;
login.url = "http://demo.quandis.net/Security/Person.ashx/Select?ID=1&Output=Json";
login.success = function (data) {
console.log('You have logged in.');
};
qbo.request(login.url, login.params, login.success);
});
This login module will prompt a user for a login, and pass the url, username, password, and success function to the CORS Request Factory.
Each of the examples below will also use this module.
QBO delivers dates in UTC format, which Angular does not natively display in a Date field.
The following filter can be applied to UTC dates in order that the Angular DatePicker will load dates correctly:
angular.module('quandisDemo').filter('myDate', function($filter){
return function(input){
var _date = $filter('date')(new Date(input), 'yyyy-MM-dd');
return _date;
};
});
When JSON is received as the result of an HTTP request, dates can be filtered in the following manner:
task.formData.TestDate = $filter('myDate')(task.formData.TestDate);
The date can then be displayed in a input field:
<div>Date:
<input type="date" ng-model="task.formData.TestDate"/>
</div>
When we save an updated form, Date field values should be parsed as such:
task.formData.TestDate = new Date(task.formData.TestDate).toISOString();
A complete example can be found here: JSFiddle Form Save/Edit Example