javascript – 如何使用带有requirejs的角度场景

发布时间:2020-01-16 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了javascript – 如何使用带有requirejs的角度场景大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
当角度应用程序准备就绪时,Angular-scenario可以很好地工作.使用requirejs或其他AMD lib时不是这种情况.如何在角度场景中添加对AMD的支持?

解决方法

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

第一件事是在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'
    },'*');
}

接下来,在您的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;
        };
    }
})();

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

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

你现在准备好了

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

大佬总结

以上是大佬教程为你收集整理的javascript – 如何使用带有requirejs的角度场景全部内容,希望文章能够帮你解决javascript – 如何使用带有requirejs的角度场景所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。