cargdev/angular
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(View): add support for styleUrls and styles

Browse Source 
fixes #2382
This commit is contained in:
Victor Berchet
2015-06-10 14:40:24 +02:00
parent f065a2ecb7
commit ac3e624d0f
12 changed files with 220 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
modules/angular2/src/core/annotations_impl/view.ts
View File

@ -49,6 +49,16 @@ export class View {
*/
template: string;
/**
* Specifies stylesheet URLs for an angular component.
*/
styleUrls: List<string>;
/**
* Specifies an inline stylesheet for an angular component.
*/
styles: List<string>;
/**
* Specifies a list of directives that can be used within a template.
*
@ -78,13 +88,16 @@ export class View {
/**
* Specify a custom renderer for this View.
* If this is set, neither `template`, `templateURL` nor `directives` are used.
* If this is set, neither `template`, `templateUrl`, `styles`, `styleUrls` nor `directives` are
* used.
*/
renderer: string;
constructor({templateUrl, template, directives, renderer}: ViewArgs = {}) {
constructor({templateUrl, template, directives, renderer, styles, styleUrls}: ViewArgs = {}) {
this.templateUrl = templateUrl;
this.template = template;
this.styleUrls = styleUrls;
this.styles = styles;
this.directives = directives;
this.renderer = renderer;
}
@ -94,4 +107,6 @@ export interface ViewArgs {
template?: string;
directives?: List<Type | any | List<any>>;
renderer?: string;
styles?: List<string>;
styleUrls?: List<string>;
}

9
modules/angular2/src/core/compiler/compiler.ts
View File

@ -205,6 +205,7 @@ export class Compiler {
var componentUrl =
this._urlResolver.resolve(this._appUrl, this._componentUrlMapper.getUrl(component));
var templateAbsUrl = null;
var styleAbsUrls = null;
if (isPresent(view.templateUrl)) {
templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
} else if (isPresent(view.template)) {
@ -213,9 +214,15 @@ export class Compiler {
// is able to resolve urls in stylesheets.
templateAbsUrl = componentUrl;
}
if (isPresent(view.styleUrls)) {
styleAbsUrls =
ListWrapper.map(view.styleUrls, url => this._urlResolver.resolve(componentUrl, url));
}
return new renderApi.ViewDefinition({
componentId: stringify(component),
absUrl: templateAbsUrl, template: view.template,
templateAbsUrl: templateAbsUrl, template: view.template,
styleAbsUrls: styleAbsUrls,
styles: view.styles,
directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata)
});
}

14
modules/angular2/src/render/api.ts
View File

@ -256,19 +256,25 @@ export class RenderViewRef {}
export class ViewDefinition {
componentId: string;
absUrl: string;
templateAbsUrl: string;
template: string;
directives: List<DirectiveMetadata>;
styleAbsUrls: List<string>;
styles: List<string>;
constructor({componentId, absUrl, template, directives}: {
constructor({componentId, templateAbsUrl, template, styleAbsUrls, styles, directives}: {
componentId?: string,
absUrl?: string,
templateAbsUrl?: string,
template?: string,
styleAbsUrls?: List<string>,
styles?: List<string>,
directives?: List<DirectiveMetadata>
}) {
this.componentId = componentId;
this.absUrl = absUrl;
this.templateAbsUrl = templateAbsUrl;
this.template = template;
this.styleAbsUrls = styleAbsUrls;
this.styles = styles;
this.directives = directives;
}
}

4
modules/angular2/src/render/dom/compiler/compiler.ts
View File

@ -43,7 +43,9 @@ export class DomCompiler extends RenderCompiler {
compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto> {
var hostViewDef = new ViewDefinition({
componentId: directiveMetadata.id,
absUrl: null, template: null,
templateAbsUrl: null, template: null,
styles: null,
styleAbsUrls: null,
directives: [directiveMetadata]
});
var element = DOM.createElement(directiveMetadata.selector);

79
modules/angular2/src/render/dom/compiler/template_loader.ts
View File

@ -1,6 +1,6 @@
import {Injectable} from 'angular2/di';
import {isBlank, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
import {Map, MapWrapper, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
import {Map, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
import {DOM} from 'angular2/src/dom/dom_adapter';
@ -15,35 +15,62 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
*/
@Injectable()
export class TemplateLoader {
_htmlCache: StringMap<string, /*element*/ any> = StringMapWrapper.create();
_cache: Map<string, Promise<string>> = MapWrapper.create();
constructor(public _xhr: XHR, urlResolver: UrlResolver) {}
constructor(private _xhr: XHR, urlResolver: UrlResolver) {}
load(template: ViewDefinition): Promise</*element*/ any> {
if (isPresent(template.template)) {
return PromiseWrapper.resolve(DOM.createTemplate(template.template));
}
var url = template.absUrl;
if (isPresent(url)) {
var promise = StringMapWrapper.get(this._htmlCache, url);
load(view: ViewDefinition): Promise</*element*/ any> {
let html;
let fetchedStyles;
if (isBlank(promise)) {
// TODO(vicb): change error when TS gets fixed
// https://github.com/angular/angular/issues/2280
// throw new BaseException(`Failed to fetch url "${url}"`);
promise = PromiseWrapper.then(this._xhr.get(url), html => {
var template = DOM.createTemplate(html);
return template;
}, _ => PromiseWrapper.reject(new BaseException(`Failed to fetch url "${url}"`), null));
StringMapWrapper.set(this._htmlCache, url, promise);
}
// We need to clone the result as others might change it
// (e.g. the compiler).
return promise.then((tplElement) => DOM.clone(tplElement));
// Load the HTML
if (isPresent(view.template)) {
html = PromiseWrapper.resolve(view.template);
} else if (isPresent(view.templateAbsUrl)) {
html = this._loadText(view.templateAbsUrl);
} else {
throw new BaseException('View should have either the templateUrl or template property set');
}
throw new BaseException('View should have either the url or template property set');
// Load the styles
if (isPresent(view.styleAbsUrls) && view.styleAbsUrls.length > 0) {
fetchedStyles = ListWrapper.map(view.styleAbsUrls, url => this._loadText(url));
} else {
fetchedStyles = [];
}
// Inline the styles and return a template element
return PromiseWrapper.all(ListWrapper.concat([html], fetchedStyles))
.then((res: List<string>) => {
let html = res[0];
let fetchedStyles = ListWrapper.slice(res, 1);
html = _createStyleTags(view.styles) + _createStyleTags(fetchedStyles) + html;
return DOM.createTemplate(html);
});
}
private _loadText(url: string): Promise<string> {
var response = MapWrapper.get(this._cache, url);
if (isBlank(response)) {
// TODO(vicb): change error when TS gets fixed
// https://github.com/angular/angular/issues/2280
// throw new BaseException(`Failed to fetch url "${url}"`);
response = PromiseWrapper.catchError(
this._xhr.get(url),
_ => PromiseWrapper.reject(new BaseException(`Failed to fetch url "${url}"`), null));
MapWrapper.set(this._cache, url, response);
}
return response;
}
}
function _createStyleTags(styles?: List<string>): string {
return isBlank(styles) ?
'' :
ListWrapper.map(styles, css => `<style type='text/css'>${css}</style>`).join('');
}

2
modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts
View File

@ -29,7 +29,7 @@ export class ShadowDomCompileStep implements CompileStep {
_processStyleElement(current: CompileElement, control: CompileControl) {
var stylePromise = this._shadowDomStrategy.processStyleElement(
this._template.componentId, this._template.absUrl, current.element);
this._template.componentId, this._template.templateAbsUrl, current.element);
if (isPresent(stylePromise) && PromiseWrapper.isPromise(stylePromise)) {
ListWrapper.push(this._subTaskPromises, stylePromise);
}

2
modules/angular2/src/render/dom/view/proto_view.ts
View File

@ -8,7 +8,7 @@ import {NG_BINDING_CLASS} from '../util';
import {RenderProtoViewRef} from '../../api';
export function resolveInternalDomProtoView(protoViewRef: RenderProtoViewRef) {
export function resolveInternalDomProtoView(protoViewRef: RenderProtoViewRef): DomProtoView {
return (<DomProtoViewRef>protoViewRef)._protoView;
}

2
modules/angular2/src/transform/template_compiler/generator.dart
View File

@ -88,7 +88,7 @@ class _TemplateExtractor {
Future<_ExtractResult> extractTemplates(ViewDefinition viewDef) async {
// Check for "imperative views".
if (viewDef.template == null && viewDef.absUrl == null) return null;
if (viewDef.template == null && viewDef.templateAbsUrl == null) return null;
var templateEl = await _loader.load(viewDef);

4
modules/angular2/src/transform/template_compiler/view_definition_creator.dart
View File

@ -210,11 +210,11 @@ class _TemplateExtractVisitor extends Object with RecursiveAstVisitor<Object> {
return null;
}
if (keyString == 'templateUrl') {
if (viewDef.absUrl != null) {
if (viewDef.templateAbsUrl != null) {
logger.error(
'Found multiple values for "templateUrl". Source: ${node}');
}
viewDef.absUrl = valueString;
viewDef.templateAbsUrl = valueString;
} else {
// keyString == 'template'
if (viewDef.template != null) {