檢測角度依賴關係[角度路由，角度資源等]加載CDN回退

我在ASP.NET MVC 4上使用Angular JS，我使用腳本包來從CDN加載，也加載在CDN失效的情況下，原始服務器，像這樣：檢測角度依賴關係[角度路由，角度資源等]加載CDN回退

var jQuery = new ScriptBundle("~/bundles/scripts/jquery", 
      "//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js") // CDN 
      .Include("~/Scripts/jquery-{version}.js"); // Local fallback 
jQuery.CdnFallbackExpression = "window.jQuery"; // Test existence 
bundles.Add(jQuery);

和

var angular = new ScriptBundle("~/bundles/scripts/angular", 
      "//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js") 
      .Include("~/Scripts/angular.js"); 
angular.CdnFallbackExpression = "window.angular"; 
bundles.Add(angular);

這是相當容易的，如果jQuery的或AngularJS分別存在使用window.jQuery和window.Angular檢測。 ASP.NET捆綁機制計算CdnFallbackExpression文本以查看是否需要回退到原始服務器。

但是，在更高版本的AngularJS中，其他模塊（如ngRoute和ngResource）被分離到它們自己的文件中，以供開發人員隨意加載。

如何檢測是否加載了其他AngularJS模塊？我可以在控制檯中輸入什麼內容以查看ngAnimate，ngRoute，ngResource等是否成功從CDN加載？

來源

2013-09-11 Mike Trionfo

也許'angular.module（ '模塊名'）'的作品。如果模塊不存在，它可能會拋出異常，但我不確定這是否是正確的方式。 – gustavohenke

@gustavohenke我正在玩弄，但你說的對，注射器很生氣。很生氣。 –

如果你可以將它封裝在'try..catch'塊中，也許這就是:) – gustavohenke

這裏是您在OP

angularjsRoute.CdnFallbackExpression = @" 
    function() { 
     try { 
      window.angular.module('ngRoute'); 
     } catch(e) { 
      return false; 
     } 
     return true; 
    })(";

這種表達提供了與微軟優化框架具體工作的方法是不正確的JavaScript本身，而是MS優化框架使用了這一點，並最終產生以下輸出到頁面。現在我們有一個有效的自執行javascript函數，根據角度模塊是否加載，返回true或false。

<script>(
function() { 
    try { 
     window.angular.module('ngRoute'); 
    } 
    catch(e) { 
     return false; 
    } 

    return true; 
})()||document.write('<script src="/bundles/scripts/angularjs-route"><\/script>');</script>

來源

2013-12-25 05:01:28 kenwarner

你作爲編譯版本的語句不是有效的javascript，而且控制檯在Chrome不喜歡。 – Brad

這是我使用：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap.min.js"></script> 
<script> 
    try { //try to load from cdn 
    //use the name of the angular module here 
    angular.module('ui.bootstrap'); 
    } 
    catch(e) { //error thrown, so the module wasn't loaded from cdn 
    //write into document from local source 
    document.write('<script src="sys/lib/ui-bootstrap.js"><\/script>'); 
    } 
</script>

angular.module如果沒有這樣的模塊，這正是我們需要知道拋出一個錯誤！ try/catch在這裏很棒。

來源

2013-12-06 07:28:17 m59

（變化從qntmfred。答案）

而不是離開那個奇怪的尾隨開放支架，只需使用普通的立即調用的函數。

結果很簡單，就是優化框架將把它包裝在另一組圓括號中，但讓C＃更清晰。

angularjsRoute.CdnFallbackExpression = 
    @"(function() { 
     try { 
      window.angular.module('ngRoute'); 
     } catch(e) { 
      return false; 
     } 
     return true; 
    })()";

來源

2014-10-04 13:23:24

另一個變化......

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> 
<script> 
    try { 
     window.angular.module('ui.bootstrap'); 
    } 
    catch(e) { 
     var script = document.createElement('script'); 
     script.src = 'lib/bootstrap/dist/js/bootstrap.js'; 
     document.getElementsByTagName('head')[0].appendChild(script); 
    } 
</script>

來源

2016-01-12 00:19:01 droidalmatter

檢測角度依賴關係[角度路由，角度資源等]加載CDN回退

回答

相關問題