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 。等等 是否成功地加载了?

时间:原作者:0个回答

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>
原作者:
...