I have successfully integrated my custom 2D JavaScript game engine with Angular. This game revolves around the space theme, where the engine takes care of simulating the space environment while Angular manages the trading menus with space stations and other activities.
The communication between the game engine and Angular is facilitated through Angular services acting as an intermediary. For example, when the game needs to log a message, it triggers
logServiceInstance.logDebug("Some message");angular.module('game')
.controller('ConsoleController', ['$scope', 'LogService', function($scope, logService) {
$scope.logs = logService.getLogs();
}]);
Since the game engine updates the service outside of Angular's knowledge, certain logs go unnoticed by Angular, leading all log methods (like logInfo, logError, logDebug, etc.) to engage with logService. Logs generated from the game pass 'true' as the second argument to initiate a digest:
addLog: function(log, updateContext) {
console.log('(' + log.level + ') ' + log.message);
logs.unshift(log);
// NOTE: updateContext should be passed if log is
// called outside of Angular context. This way Angular
// reacts to the change.
if(updateContext != null && updateContext === true) {
// notify angular of a change
$rootScope.$digest();
}
}
However, there seems to be consistency issues with the ConsoleController in fetching log messages. Some logs do not appear on the HTML display but are visible in the JavaScript console. Moreover, I am encountering errors related to triggering multiple digests.
Queries:
- How can I determine if a digest is already underway from another source?
- While services seem to offer a convenient approach for sharing states between two frameworks, is this pattern considered unfavorable? If so, why?
Any insights from experienced Angular developers would be greatly appreciated.
Note: Find the game engine at