Child pages
  • Angular services

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

A service must contain the specification file and the js file. The service specification file is exactly the same as web component specification file. However, as there is no UI, there is no support for handlers.

Services implementations have to be present in special folders whose names end with It is recommended to have a suffix "services" suffix as the service package name. (for example default servoy services are found into "servoyservices" directory). A folder that doesn't end with "services" will be handled as webcomponent folderTo avoid naming collisions between components and services packages.

A service can get it scope from the $services angular service/factory that the system provides. On that factory you can ask for the service scope: 

$services.getServiceScope(serviceName);.

This returns an angular $scope instance, that one holds an model property that is the javascript object that is synced between server and client (just as a webcomponent). Also that scope instance can be used to watch on its own properties, so that the service can interact with state changes from the server. This is for example very handy if the service must interact with a browser refresh, then the state is transferred over to the client and the service should use the model state of the scope to reconstruct it behavior. This is done in an angular run function that is executed when the browser page loads.

When a service scope (the model object) is changed through by a server push, or when a service api function is called, the system will call the angular $digest() function on the scope object of the service. This way all the watches that are on that service scope will be evaluated by angular. If your service is can be used throughout the whole page, so webcomponents are using your service to get state from it (webcomponent do have watches on your service) then you have to make sure that you call the rootScope digest so that a full digest cycle will happen:

if (!$rootScope.$$phase) $rootScope.$digest();

The if is for checking if there is already a digest cycle happening, else you call the $rootScope $digest method so that all the watches of the page are evaluated and webcomponents or other services that have watches on your state will see the change.

Services can also have service side api just like webcomponents, The same kind of object structure is then also provided, so there is a $scope object which has a model property that is the object that is synced between server and client.

An example service:

Code Block
titletestservice.spec
{
	"name": "testservice",
	"displayName": "Test service that says helloworld",
	"definition": "servoyservices/testservice/testservice.js",
	"libraries": [],
	"model":
	{
		"text": "string"
	},
	"api":
	{
	 	"talk": {
	        }
	}
}

...

Code Block
titletestservice.js
angular.module('testservice',['servoy'])
.factory("testservice",function($window,$services) {
	var state scope= $services.getServiceStategetServiceScope('testservice');
	return {
		talk: function() {
			alert("talk: " + statescope.model.text);
			statescope.model.text = "something else"
		}
	}
})
.run(function($rootScope,$services)
{
	var scope = $rootScope.$new(true); 	scope.state = $services.getServiceStategetServiceScope('testservice');
    // watch the whole model
	scope.$watch('statemodel', function(newvalue,oldvalue) {

		// handle state changes
	}, true);
})

...