Generate an Angular Service from a Script Include

I figured I would dedicate Fridays to Angular and Jelly articles, first up here is generating an Angular Service automatically from a Script Include.

You might be tempted to just put GlideAjax calls right within your Angular Controller but that’s bad.  It clutters your controller and if you ever need to use that same function you would need to copy and paste that code.  On the other hand if all you need to do is create a Service that calls a Script Include it makes no sense to create UI Scripts for each that all essentially do the same thing.  To me this is not a problem but a chance to simplify creation of these Services by using a Processor.

To start I need to programatically extract the functions and parameters from a given Script Include.  Initially I thought a Regular Expression might work but it’s not a good solution.  Instead I chose to use Esprima to generate an Abstract Syntax Tree (a sort of representation of the code as a tree) and use that to find functions and parameters.

Esprima (http://esprima.org) actually loads right into ServiceNow as a Script Include without any issues.   Once loaded you can just include that Script Include and create syntax trees from any code in the system.

I created a Processor which generates an AST from a Script Include.  I look through the AST to find the main object (the one that is assigned to a variable of the same name as the Script Include) and then looked through that object for functions.

Each function not prefixed with _ is expected to be a public function and will be added to the returned Angular Service.

Within the body of that function if I find any assignments that have “getParameter” in the expression I pull out the name and use that as a parameter for the Angular Service method.

I also included a function to parse the XML response that is automatically called when the response comes back from ServiceNow.

Now for any Script Include, which extends AbstractAjaxProcessor, I can link to my processor which will generate an Angular Service with all the functions from the Script Include automatically.  I can inject that service into my apps controllers and call the functions as if they were on the client side.

Instead of using GlideAjax I use the Angular $http provider which returns a promise object.  So when you use the result of the function call you must do so through a `then` function.  Check out the examples below to see this in action.

github:gist https://gist.github.com/salcosta/c68686e4e82c237dd627


Example

The Angular Service that should be generated from this Script Include should have 2 methods with one accepting `sysparm_sys_id` as a parameter.

var IncidentTest= Class.create();

IncidentTest.prototype = Object.extendsObject(AbstractAjaxProcessor, {

getIncidents : function(){
var sys_id = this.getParameter("sysparm_sys_id").toString().toString();

return sys_id
},

getIncidents2 : function(){
return "test"
}

});

Here is the example output that would be generated.


angular.module('IncidentTestService', []).factory('IncidentTestServ', ['$http', function($http) {

return {
config : { headers: {'Accept' : '*/*', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8','X-UserToken': g_ck } },
url : 'xmlhttp.do',

getIncidents : function ( sysparm_sys_id ){
var data = 'sysparm_processor=IncidentTest&sysparm_name=getIncidents&ni.nolog.x_referer=ignore&x_referer=home.do&sysparm_sys_id=' + sysparm_sys_id + ''

return $http.post( this.url , data , this.config ).then( getAnswer );
},

getIncidents2 : function ( ){
var data = 'sysparm_processor=IncidentTest&sysparm_name=getIncidents2&ni.nolog.x_referer=ignore&x_referer=home.do'

return $http.post( this.url , data , this.config ).then( getAnswer );
}
}

}]);

Here’s a sample usage in a UI Page.

HTML

<script src="IncidentTest?ng-service"></script>

Script

angular.module("Inventory",['InventoryCtrl','IncidentTestService']);

angular.module("InventoryCtrl",[]).controller("InventoryController", ['$scope', 'IncidentTestServ', function($scope, IncidentTestService){
IncidentTestService.getIncidents("Test").then(function(res){
console.log(res)
});
}]);

Leave a Reply

Your email address will not be published. Required fields are marked *