如何使用角度的场景与requirejs [英] How to use angular-scenario with requirejs

问题描述

角的场景效果很好，当你的角度程序已经准备好对DOM准备就绪。不使用requirejs或其他AMD LIB时的情况。如何在角情况下增加对AMD的支持？

Angular-scenario works well when your angular app is ready on DOM ready. Is not the case when using requirejs or an other AMD lib. How to add support for AMD in angular-scenario?

推荐答案

您所要做的是覆盖默认的框架加载行为，当你AMD APP准备发出一个新的事件。

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.

的第一件事就是在你的应用程序的角度加上下面几行与angular.bootstrap调用一起。此数据由角方案所需

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.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'
    }, '*');
}

接下来，在你的E2E亚军，你必须包括这些行。如果它是一个外部脚本，它必须角方案之后被加载，而且必须分析之前的DOM已准备就绪：

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 :

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

最后，为了使AMD的配置，您必须将属性NG​​-useamd添加到角场景的脚本标记。

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

<script type="text/javascript" src="lib/angular-1.0.3/angular-scenario.js" ng-autotest ng-useamd></script>

您现在已经准备好

的具有角情景测试V1.0.3 的

这篇关于如何使用角度的场景与requirejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！