如何使用带有requirejs的角度场景-Howtouseangular-scenariowithrequirejs

9  

What you have to do is to override the default frame load behaviour and to emit a new event when you amd app is ready.

您需要做的是覆盖默认的帧加载行为，并在应用程序准备就绪时发出新事件。

The first thing is to add the following lines in your angular application along with the angular.bootstrap call. This data is required by angular-scenario.

第一件事是在angular应用程序中添加以下行以及angular.bootstrap调用。角度场景需要此数据。

angular.bootstrap(document, ['app']);

var html = document.getElementsByTagName('html')[0];

html.setAttribute('ng-app', 'app');
html.dataset.ngApp = 'app';

if (top !== window) {
    top.postMessage({
        type: 'loadamd'
    }, '*');
}

Next, in your e2e runner, you have to include those lines. If it's an external script, it must be loaded after angular-scenario and it must be parsed before the DOM is ready :

接下来，在您的e2e跑步者中，您必须包含这些线。如果它是外部脚本，则必须在angular-scenario之后加载它，并且必须在DOM准备好之前解析它：

/**
 *  Hack to support amd with angular-scenario
 */
(function() {
    var setUpAndRun = angular.scenario.setUpAndRun;

    angular.scenario.setUpAndRun = function(config) {
        if (config.useamd) {
            amdSupport();
        }
        return setUpAndRun.apply(this, arguments);
    };

    function amdSupport() {
        var getFrame_ = angular.scenario.Application.prototype.getFrame_;

        /**
         *  This function should be added to angular-scenario to support amd. It overrides the load behavior to wait from
         *  the inner amd frame to be ready.
         */
        angular.scenario.Application.prototype.getFrame_ = function() {
            var frame = getFrame_.apply(this, arguments);
            var load = frame.load;

            frame.load = function(fn) {
                if (typeof fn === 'function') {
                    angular.element(window).bind('message', function(e) {
                        if (e.data && e.source === frame.prop('contentWindow') && e.data.type === 'loadamd') {
                            fn.call(frame, e);
                        }
                    });
                    return this;
                }
                return load.apply(this, arguments);
            }

            return frame;
        };
    }
})();

Finally, to enable the amd configuration, you must add the attribute ng-useamd to angular-scenario's script tag.

最后，要启用amd配置，必须将属性ng-useamd添加到angular-scenario的脚本标记中。

You're now ready to go

你现在准备好了

tested with angular-scenario v1.0.3

使用角度场景v1.0.3进行测试

4  

The above answer failed partly in my scenario (Angular 1.1.4, fresh Karma). In the debug view it ran fine, in the normal overview page it failed. I noticed an extra nested .

上面的答案在我的场景中部分失败了（Angular 1.1.4，新鲜的Karma）。在调试视图中它运行正常，在正常的概述页面中失败了。我注意到了一个额外的嵌套。

I changed the code to message to the parent iframe of the tested application.

我将代码更改为消息到测试应用程序的父iframe。

if (top !== window) {
    window.parent.postMessage({
        type: 'loadamd'
    }, '*');
}

1  

The accepted answer is absolutely correct, but it's a shame that you have to put that code into your page.

接受的答案是绝对正确的，但是你必须将这些代码放入你的页面是一种耻辱。

So, if it helps, I created a preprocessor for karma to inject the 'fix' in as part of the test run.

因此，如果它有所帮助，我为业力创建了一个预处理器，以便在测试运行中注入“修复”。

Code: https://github.com/tapmantwo/karma-ng-bootstrap-fix-preprocessor npm: https://www.npmjs.org/package/karma-ng-bootstrap-fix-preprocessor

代码：https://github.com/tapmantwo/karma-ng-bootstrap-fix-preprocessor NPM：https://www.npmjs.org/package/karma-ng-bootstrap-fix-preprocessor

Note, this only works if you are serving the files through karma. If you are proxying them, they dont go through the pre-processor. So, as an alternative I have a fork of ng-scenario which does something similar to allow manually bootstrapped sites to run;

请注意，这仅适用于通过业力提供文件的情况。如果你代理他们，他们不会通过预处理器。所以，作为一种替代方案，我有一个ng-scenario的分支，它做了类似的事情，允许手动引导的站点运行;

https://github.com/tapmantwo/karma-ng-scenario

https://github.com/tapmantwo/karma-ng-scenario

This isn't a node module, so you'll have to set it up manually, but its better (IMHO) to have something like this in place instead of infecting production code with something just to get tests to pass.

这不是一个节点模块，所以你必须手动设置它，但它更好（恕我直言）有这样的东西，而不是感染生产代码只是为了让测试通过。