javascript - 在 AngularJS 代码中使用此扩展的正确方法是什么？

Question

我正在使用一个名为 Radiant UI 的框架，这是一种将 HTML5 UI 引入虚幻引擎 4 的方法。我在这样做的同时尝试学习一些现代 Javascript，所以我在 AngularJS 中构建 UI。

虽然我对 Angular 的理解仍然很薄弱，而且我对这里的最佳实践有些困惑。该扩展程序在设置时会注入(inject)以下 Javascript。

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);
  };
})();;

所以这只是将 RadiantUI 插入全局命名空间。如果扩展名始终存在，那会很好，但事实并非如此。在测试环境(Chrome)中，它不存在。它仅在游戏引擎中运行时存在。那，再加上全局变量很糟糕的事实，意味着我想封装它。

在之前的迭代中，我将它封装在一个 AMD 模块中，并且运行良好。像这样:

define([], function()
{
    if ("RadiantUI" in window)
    {
        console.log("RadiantUI in global scope already!");
        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;
});

所以这是我想做的:

我想将 radiant 作为我的 app/stateProvider 的依赖项并注入(inject)它，这与在 AMD 中的方式非常相似。如果扩展不存在，则使用 stub 方法。正确的做法是什么？模块？服务提供商？

更新:这是使用给定答案的工作代码。

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!");
            }               
        }],
    });
}]);

Answer 1

您大概有一个 Angular 模块或应用程序。为了这个答案，我们称它为 MyApp。

现在你可以做

MyApp.value("RadiantUI", window.RadiantUI || {
    TriggerEvent = function(){},
    //... more properties
});

例如，现在要在 Controller 中将此值作为依赖项访问，您可以这样做

MyApp.controller(["$scope", "RadiantUI", function($scope, RadiantUI){
    // ... controller code ...
}]);