如何在requirejs中使用角度場景

當您的角度應用準備好DOM準備就緒時，角度場景運行良好。使用requirejs或其他AMD lib時情況並非如此。如何在角度場景中添加對AMD的支持？如何在requirejs中使用角度場景

2013-03-19 Francis

你必須做的是覆蓋默認的幀加載行爲，並在你的應用程序準備就緒時發出新的事件。

第一件事是在角度應用程序中添加以下幾行以及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跑步者中，您必須包含這些線。如果它是一個外部腳本，它必須角方案之後被加載，它必須被解析之前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添加到角場景的腳本標記。

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

現在你可以去

與角度的場景V1.0.3

來源

2013-03-19 12:50:13 Francis

任何機會，你可以提供一個github回購或小提琴？ – 2013-08-16 15:34:49

非常感謝弗朗西斯。需要注意的是，如果出於任何原因在runner頁面中包含JQuery，則需要在到達時解開消息事件，如：if（e.originalEvent）e = e.originalEvent; – 2013-09-06 06:21:37

以上回答部分是我的方案失敗（角1.1.4，新鮮噶）進行測試。在調試視圖中，它運行正常，在正常概覽頁面失敗。我注意到一個額外的嵌套。

我更改了代碼以將消息發送到測試應用程序的父級iframe。

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

來源

2013-05-14 18:18:44

是的，這是一個很好的觀點。噶創建另一個框架，其中包括角度的情節框架，其中包括你的應用程序的框架。所以在這種情況下，它確實是父框架而不是頂框架。 – Francis 2013-05-14 19:55:21

接受的答案是絕對正確的，但遺憾的是您必須將該代碼放入您的頁面。

所以，如果有幫助的話，我創建了一個業力預處理程序來注入'修復'作爲測試運行的一部分。

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

注意，如果你是通過因果報應服務中的文件這僅適用。如果你是代理他們，他們不通過預處理器。因此，作爲替代方案，我有一個ng-scenario的分支，它可以執行類似的操作，以允許手動引導的網站運行;

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

這不是一個節點模塊，所以你必須手動設置它，但它的更好（恕我直言）有到位這樣的事情，而不是傳染的生產代碼的東西只是爲了讓測試通過。

來源

2014-06-06 13:22:02 tapmantwo

如何在requirejs中使用角度場景

回答

相關問題