javascript - 检测是否加载 Angular 依赖项 [ Angular 路由、 Angular 资源等] 以进行 CDN 回退

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 Optimization Framework 配合使用的方法

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>