javascript - javascript检测是否为CDN回退加载Angular 依赖项 [angular route, angular resource, etc]

  显示原文与译文双语对照的内容
72 5

我在 ASP.NET MVC 4上使用 Angular JS,并使用脚本包加载,并从原源服务器加载,如果发生了:


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);



使用 window.jQuery 和 window.Angular 分别检测jQuery或者AngularJS是相当容易的。 ASP.NET 绑定机制评估CdnFallbackExpression文本,以查看它是否需要回退到原始服务器。

然而,在AngularJS的后续版本中,其他模块( 比如ngRoute和 ngResource ) 被分离到自己的文件中,以便在开发人员。

如何检测其他AngularJS模块是否已经加载? 我可以在控制台中输入什么,以查看 ngAnimate 。ngRoute 。ngResource 。等等 是否成功地加载了?

时间: 原作者:

126 2

下面是一个与OP优化框架works的方法,就像你在操作中所提供


angularjsRoute.CdnFallbackExpression = @"


 function() { 


 try { 


 window.angular.module('ngRoute');


 } catch(e) {


 return false;


 } 


 return true;


 })(";



这个表达式本身不是有效的javascript,但是MS优化框架使用这个,最终将下面的输出生成到页面。 现在我们有了一个有效的自执行javascript函数,它根据 Angular 模块是否加载来返回 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>



原作者:
143 5

以下是我使用的内容:


<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 在这里很出色。

原作者:
62 4

( 来自qntmfred的答案的变化) 。

不要留下那个奇怪的尾随括号,只需要使用正常的调用函数即可。

结果就是优化框架将在另一组括号中包装,但是使你的C# 更清晰。


angularjsRoute.CdnFallbackExpression = 


 @"(function() { 


 try { 


 window.angular.module('ngRoute');


 } catch(e) {


 return false;


 } 


 return true;


 })()";



原作者:
139 1

另一个变化。


<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>



...