21

我在 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 加载？

4

4 回答 4

18

这是一种专门与您在 OP 中提供的 Microsoft 优化框架一起使用的方法

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>
于 2013-12-25T05:01:28.093 回答
10

这就是我使用的：

<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-06T07:28:17.890 回答
4

（来自 qntmfred 的答案的变化。）

而不是留下那个奇怪的尾随左括号，只需使用一个正常的立即调用函数。

结果将只是优化框架将其包装在另一组括号中，但使您的 C# 更加清晰。

angularjsRoute.CdnFallbackExpression = 
    @"(function() { 
        try { 
            window.angular.module('ngRoute');
        } catch(e) {
            return false;
        } 
        return true;
    })()";
于 2014-10-04T13:23:24.717 回答
0

另一种变化...

<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-12T00:19:01.547 回答