检测是否为CDN回退加载了角度依赖关系[angular-route,angular-resource等]

Question

我在ASP.NET MVC 4上使用Angular JS,我使用脚本捆绑从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);

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

但是,在AngularJS的更高版本中,其他模块(如ngRoute和ngResource)被分成自己的文件,由开发人员自行决定加载.

如何检测是否加载了其他AngularJS模块？我可以在控制台中输入什么来查看ngAnimate,ngRoute,ngResource等是否成功从CDN加载？

Answer 1

这是一种专门针对您在OP中提供的Microsoft优化框架的方法

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

此表达式本身不是有效的javascript,但MS Optimization Framework使用此表达式并最终生成以下输出到页面.现在我们有一个有效的自执行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>

Answer 2

这是我使用的:

<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这里太棒了