当我的静态文件位于具有不同URL的CDN上时，如何使用AngularDart？ [英] How do I use AngularDart when my static files are on a CDN with a varying URL?

问题描述

我使用AngularDart作为我的一个新应用程序。我有一个组件设置如下：

  @NgComponent（
 selector： game-timeline'，
 templateUrl：'/static/dart/game/web/views/timelineview.html'，
 cssUrl：'/static/dart/game/web/views/timelineview.css' ，
 publishAs：'ctrl'
）
  

但我的问题是，模板和css位置在构建时不一定已知。他们将在一个具有唯一部署标识符的CDN上。像...一样...

  http://cdn.domain.com/static/30294832098/dart/game/web/views /timelineview.html 
  

每个部署都有不同的数字。

路径似乎是相对于它托管的html页面，这不是在CDN上，所以我不能只使用相对路径（../ blah / blah）

我可以在页面中注入一个JS变量，告诉我静态根的位置，如果有帮助的话。

主要的.dart / .js文件是从CDN加载的，但我似乎不能相对于它。

？

更新，这是我的完整解决方案，改编自pavelgj的伟大的答案，在页面上读取一个js变量STATIC_URL。

  import'package：angular / angular.dart'; 
 import'package：js / js.dart'as js; 
 
 class CDNRewriter implements UrlRewriter {
 String staticUrl; 
 
 CDNRewriter（）{
 var context = js.context; 
 staticUrl = js.context.STATIC_URL; 
} 
 
字符串调用（String url）{
 if（url.startsWith（'/ static /'））{
 return _rewriteCdnUrl（url）; 
} 
 return url; 
} 
 
 String _rewriteCdnUrl（String url）{
 return url.replaceFirst（new RegExp（r'/ static /'），staticUrl）; 
} 
} 
  

解决方案

可以实施自定义 UrlRewriter 。 UrlRewriter 用于通过角度获取的所有资源 Http 服务，包括模板和css。

class MyUrlRewriter implements UrlRewriter {
String call（String url）{
if（url.startsWith（'/ static /' ））{
return _rewriteCdnUrl（url）;
}
return url;
}
}

myModule.type（UrlRewriter，implementedBy：MyUrlRewriter）;


I'm using AngularDart for a new application of mine. I have a component set up like so:

@NgComponent(
    selector: 'game-timeline',
    templateUrl: '/static/dart/game/web/views/timelineview.html',
    cssUrl: '/static/dart/game/web/views/timelineview.css',
    publishAs: 'ctrl'
)

But my problem is, the template and css locations aren't necessarily known at build-time. They'll be on a CDN with a unique deploy-identifier on them. Something like...

http://cdn.domain.com/static/30294832098/dart/game/web/views/timelineview.html

And that number varies every deploy.

The path seems to be relative to the html page it's hosted on, which is not on the CDN, so I can't just use a relative path (../blah/blah)

I can inject a JS variable into the page telling me where the static root it, if that helps.

The main .dart/.js file is loaded from the CDN, but I can't seem to make it be relative to that.

Any ideas?

Update, here's my full solution adapted from pavelgj's great answer that reads in a js variable called STATIC_URL on the page.

import 'package:angular/angular.dart';
import 'package:js/js.dart' as js;

class CDNRewriter implements UrlRewriter {
  String staticUrl;

  CDNRewriter() {
    var context = js.context;
    staticUrl = js.context.STATIC_URL;
  }

  String call(String url) {
    if (url.startsWith('/static/')) {
      return _rewriteCdnUrl(url);
    }
    return url;
  } 

  String _rewriteCdnUrl(String url) {
    return url.replaceFirst(new RegExp(r'/static/'), staticUrl);
  }
}

解决方案

You can implement a custom UrlRewriter. UrlRewriter is called for all resources fetched via angular Http service, including templates and css.

class MyUrlRewriter implements UrlRewriter {
  String call(String url) {
    if (url.startsWith('/static/')) {
      return _rewriteCdnUrl(url);
    }
    return url;
  } 
}

myModule.type(UrlRewriter, implementedBy: MyUrlRewriter);

这篇关于当我的静态文件位于具有不同URL的CDN上时，如何使用AngularDart？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！