Phát hiện nếu phụ thuộc góc [góc-đường, góc-tài nguyên, vv] được nạp cho dự phòng CDN

Question

Tôi đang sử dụng Angular JS trên ASP.NET MVC 4 và tôi đang sử dụng gói tập lệnh để tải từ cdn và cũng tải từ các máy chủ gốc trong trường hợp của một thất bại cdn như vậy:

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

và

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

Nó là khá dễ dàng để phát hiện nếu jQuery hoặc AngularJS tồn tại sử dụng window.jQuery và window.Angular tương ứng. Cơ chế gói ASP.NET đánh giá văn bản CdnFallbackExpression để xem liệu nó có cần quay trở lại máy chủ gốc hay không.

Tuy nhiên, trong các phiên bản sau của AngularJS, các mô-đun khác như ngRoute và ngResource được tách thành các tệp riêng của chúng để được tải theo quyết định của nhà phát triển.

Làm cách nào để phát hiện xem các mô-đun AngularJS khác có được tải không? Tôi có thể nhập gì vào bảng điều khiển để xem liệu ngAnimate, ngRoute, ngResource, v.v. đã tải thành công từ CDN chưa?

Answer 1

Đây là một phương pháp làm việc cụ thể với các Optimization Khung Microsoft như bạn cung cấp trong OP

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

Biểu thức này là không hợp lệ javascript chính nó, nhưng Optimization Khung MS sử dụng này và cuối cùng xuất ra như sau đến trang. Bây giờ chúng ta có một hàm JavaScript tự thực hiện hợp lệ trả về true hoặc false dựa trên việc module tải có góc.

<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

Đây là những gì tôi sử dụng:

<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 ném một lỗi nếu không có mô-đun như vậy, đó là chính xác những gì chúng ta cần phải biết! try/catch thật tuyệt vời ở đây.

Answer 3

(Biến thể trên câu trả lời từ qntmfred.)

Thay vì rời khỏi rằng lạ trailing khung mở, chỉ cần sử dụng một chức năng ngay lập tức-gọi bình thường.

Kết quả sẽ đơn giản là Khung tối ưu hóa sẽ bao bọc nó trong một bộ ngoặc đơn khác, nhưng để cho C# của bạn rõ ràng hơn nhiều.

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

Answer 4

biến khác ...

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