I've recently started using a framework known as Radiant UI, which allows me to incorporate HTML5 UI elements into Unreal Engine 4. As I work on this project, I decided to enhance my knowledge of modern JavaScript by developing the UI in AngularJS.
Although I'm still grappling with the concepts of Angular, I find myself slightly confused about the best practices to follow. The extension injects the following JavaScript code during setup:
var RadiantUI;
if (!RadiantUI)
RadiantUI = {};
(function() {
RadiantUI.TriggerEvent = function() {
native function TriggerEvent();
return TriggerEvent(Array.prototype.slice.call(arguments));
};
RadiantUI.SetCallback = function(name, callback) {
native function SetHook();
return SetHook(name, callback);
};
RadiantUI.RemoveCallback = function(name) {
native function RemoveHook();
return RemoveHook(name);
};
})();;
This script essentially adds RadiantUI to the global namespace. While this approach is acceptable when the extension is always present, it's not the case in the test environment (such as Chrome). The extension only exists when running within the game engine. Due to this dynamic behavior and the common drawbacks associated with globals, I aim to encapsulate it.
In a previous attempt, I encapsulated it within an AMD module, yielding successful results:
define([], function()
{
if ("RadiantUI" in window)
{
console.log("RadiantUI already in the global scope!");
return window.RadiantUI;
}
var RadiantUI;
if (!RadiantUI) {
RadiantUI = {};
RadiantUI.TriggerEvent = function() {}
RadiantUI.SetCallback = function() {}
RadiantUI.RemoveCallback = function() {}
}
console.log("Using fake RadiantUI bindings");
return RadiantUI;
});
To summarize my intentions:
I intend to include Radiant as a dependency within my app/stateProvider and have it injected similar to how it would be in AMD, while ensuring that stub methods are in place if the extension is absent. What would be the most appropriate approach for achieving this? Should I use a module or a service provider?
UPDATE: Below is the updated code based on the provided solution.
var myapp = angular.module('bsgcProtoApp', ['ui.router']);
myapp.value('radiant', window.RadiantUI || {
TriggerEvent: function()
{
console.log("TriggerEvent called");
},
SetCallback: function(name, callback)
{
console.log("Setcallback called");
},
RemoveCallback: function(name)
{
console.log("RemoveCallback called");
}
});
myapp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise("/mainmenu");
$stateProvider.state('mainmenu',
{
name: "mainmenu",
url: "/mainmenu",
templateUrl: 'templates/mainmenu.html',
controller: ['$scope', 'radiant', function($scope, radiant)
{
$scope.tester = function()
{
radiant.TriggerEvent("DuderDude");
console.log("Duder!");
}
}],
});
}]);