refactor(compiler): rename decorator directives into directive
BREAKING CHANGE: Previously, `Directive` was the abstract base class of several directives. Now, `Directive` is the former `Decorator`, and `Component` inherits from it.
This commit is contained in:
parent
c671706518
commit
f75a50c1dd
|
@ -4,7 +4,7 @@
|
|||
* @description
|
||||
*
|
||||
* Annotations provide the additional information that Angular requires in order to run your application. This module
|
||||
* contains {@link Component}, {@link Decorator}, and {@link View} annotations, as well as {@link Parent} and {@link Ancestor} annotations that are
|
||||
* contains {@link Component}, {@link Directive}, and {@link View} annotations, as well as {@link Parent} and {@link Ancestor} annotations that are
|
||||
* used by Angular to resolve dependencies.
|
||||
*
|
||||
*/
|
||||
|
|
|
@ -6,11 +6,7 @@ Directives are the cornerstone of an Angular application. We use Directives to b
|
|||
|
||||
Angular applications do not have a main method. Instead they have a root Component. Dependency Injection then assembles the directives into a working Angular application.
|
||||
|
||||
There are three different kinds of directives (described in more detail in later sections).
|
||||
|
||||
1. *Decorators*: can be placed on any DOM element and can be combined with other directives.
|
||||
2. *Components*: Components have an encapsulated view and can configure injectors.
|
||||
|
||||
Directives with an encapsulated view and an optional injector are called *Components*.
|
||||
|
||||
|
||||
## CSS Selectors
|
||||
|
@ -53,18 +49,18 @@ CSS Selectors can be combined:
|
|||
|
||||
|
||||
|
||||
## Decorators
|
||||
## Directives
|
||||
|
||||
The simplest kind of directive is a decorator. Directives are usefull for encapsulating behavior.
|
||||
|
||||
* Multiple decorators can be placed on a single element.
|
||||
* Decorators do not introduce new evaluation context.
|
||||
* Decorators are registered through the `@Decorator` meta-data annotation.
|
||||
* Directives do not introduce new evaluation context.
|
||||
* Directives are registered through the `@Directive` meta-data annotation.
|
||||
|
||||
Here is a trivial example of a tooltip decorator. The directive will log a tooltip into the console on every time mouse enters a region:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[tooltip]', // CSS Selector which triggers the decorator
|
||||
properties: { // List which properties need to be bound
|
||||
text: 'tooltip' // - DOM element tooltip property should be
|
||||
|
@ -75,7 +71,7 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
|
|||
})
|
||||
class Form { // Directive controller class, instantiated
|
||||
// when CSS matches.
|
||||
text:string; // text property on the Decorator Controller.
|
||||
text:string; // text property on the Directive Controller.
|
||||
|
||||
show(event) { // Show method which implements the show action.
|
||||
console.log(this.text);
|
||||
|
@ -238,7 +234,7 @@ class MyService {} | Assume a service which needs to be inject
|
|||
}) |
|
||||
class MyApp {} |
|
||||
|
|
||||
@Decorator({ | This is the directive into which we would like
|
||||
@Directive({ | This is the directive into which we would like
|
||||
selector: '[house]' | to inject the MyService.
|
||||
}) |
|
||||
class House { |
|
||||
|
@ -285,7 +281,7 @@ Here is an example of the kinds of injections which can be achieved:
|
|||
}) |
|
||||
class MyApp {} |
|
||||
|
|
||||
@Decorator({ selector: 'form' }) |
|
||||
@Directive({ selector: 'form' }) |
|
||||
class Form { |
|
||||
constructor( |
|
||||
@descendant sets:Query<FieldSet> |
|
||||
|
@ -293,14 +289,14 @@ class Form { |
|
|||
} |
|
||||
} |
|
||||
|
|
||||
@Decorator({ selector: 'fieldset' }) |
|
||||
@Directive({ selector: 'fieldset' }) |
|
||||
class FieldSet { |
|
||||
constructor( |
|
||||
@child sets:Query<Field> |
|
||||
) { ... } |
|
||||
} |
|
||||
|
|
||||
@Decorator({ selector: 'field' }) |
|
||||
@Directive({ selector: 'field' }) |
|
||||
class Field { |
|
||||
constructor( |
|
||||
@ancestor field:Form, |
|
||||
|
@ -308,7 +304,7 @@ class Field { |
|
|||
) { ... } |
|
||||
} |
|
||||
|
|
||||
@Decorator({ selector: '[primary]'}) |
|
||||
@Directive({ selector: '[primary]'}) |
|
||||
class Primary { |
|
||||
constructor(field:Field ) { ... } |
|
||||
} |
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
|
||||
export {
|
||||
Component as ComponentAnnotation,
|
||||
Decorator as DecoratorAnnotation,
|
||||
Directive as DirectiveAnnotation,
|
||||
onDestroy, onChange, onAllChangesDone
|
||||
} from '../annotations_impl/annotations';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {ABSTRACT, CONST, normalizeBlank, isPresent} from 'angular2/src/facade/lang';
|
||||
import {CONST, normalizeBlank, isPresent} from 'angular2/src/facade/lang';
|
||||
import {ListWrapper, List} from 'angular2/src/facade/collection';
|
||||
import {Injectable} from 'angular2/di';
|
||||
import {DEFAULT} from 'angular2/change_detection';
|
||||
|
@ -8,7 +8,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
/**
|
||||
* Directives allow you to attach behavior to elements in the DOM.
|
||||
*
|
||||
* Directive is an abstract concept, instead use concrete directives: {@link Component}, or {@link Decorator}.
|
||||
* {@link Directive}s with an embedded view are called {@link Component}s.
|
||||
*
|
||||
* A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
|
||||
* elements in the DOM, the following steps occur:
|
||||
|
@ -54,7 +54,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
*
|
||||
* To inject element-specific special objects, declare the constructor parameter as:
|
||||
* - `element: ElementRef` to obtain a reference to logical element in the view.
|
||||
* - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link Decorator} directives only
|
||||
* - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link Directive} directives only
|
||||
* - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
|
||||
*
|
||||
* ## Example
|
||||
|
@ -84,7 +84,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* class SomeService {
|
||||
* }
|
||||
*
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
|
@ -103,7 +103,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor() {
|
||||
* }
|
||||
|
@ -120,7 +120,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
|
||||
* component's injector.
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(someService: SomeService) {
|
||||
* }
|
||||
|
@ -135,7 +135,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* Directives can inject other directives declared on the current element.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(dependency: Dependency) {
|
||||
* expect(dependency.id).toEqual(3);
|
||||
|
@ -152,7 +152,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* the dependency.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(@Parent() dependency: Dependency) {
|
||||
* expect(dependency.id).toEqual(2);
|
||||
|
@ -169,7 +169,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(@Ancestor() dependency: Dependency) {
|
||||
* expect(dependency.id).toEqual(2);
|
||||
|
@ -191,7 +191,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* that uses a {@link ViewContainerRef} such as a `for`, an `if`, or a `switch`.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(@Query(Marker) dependencies:QueryList<Maker>) {
|
||||
* }
|
||||
|
@ -208,7 +208,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* Similar to `@Children` above, but also includes the children of the child elements.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(@QueryDescendents(Marker) dependencies:QueryList<Maker>) {
|
||||
* }
|
||||
|
@ -224,7 +224,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({ selector: '[my-directive]' })
|
||||
* @Directive({ selector: '[my-directive]' })
|
||||
* class MyDirective {
|
||||
* constructor(@Optional() dependency:Dependency) {
|
||||
* }
|
||||
|
@ -234,9 +234,141 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
|
||||
* found, the injector supplies `null` instead of throwing an error.
|
||||
*
|
||||
* ## Example
|
||||
*
|
||||
* Here we use a decorator directive to simply define basic tool-tip behavior.
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[tooltip]',
|
||||
* properties: {
|
||||
* 'text': 'tooltip'
|
||||
* },
|
||||
* hostListeners: {
|
||||
* 'onmouseenter': 'onMouseEnter()',
|
||||
* 'onmouseleave': 'onMouseLeave()'
|
||||
* }
|
||||
* })
|
||||
* class Tooltip{
|
||||
* text:string;
|
||||
* overlay:Overlay; // NOT YET IMPLEMENTED
|
||||
* overlayManager:OverlayManager; // NOT YET IMPLEMENTED
|
||||
*
|
||||
* constructor(overlayManager:OverlayManager) {
|
||||
* this.overlay = overlay;
|
||||
* }
|
||||
*
|
||||
* onMouseEnter() {
|
||||
* // exact signature to be determined
|
||||
* this.overlay = this.overlayManager.open(text, ...);
|
||||
* }
|
||||
*
|
||||
* onMouseLeave() {
|
||||
* this.overlay.close();
|
||||
* this.overlay = null;
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
|
||||
* like so:
|
||||
*
|
||||
* ```
|
||||
* <div tooltip="some text here"></div>
|
||||
* ```
|
||||
*
|
||||
* Directives can also control the instantiation, destruction, and positioning of inline template elements:
|
||||
*
|
||||
* A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at runtime.
|
||||
* The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a location in the current view
|
||||
* where these actions are performed.
|
||||
*
|
||||
* Views are always created as children of the current {@link View}, and as siblings of the `<template>` element. Thus a
|
||||
* directive in a child view cannot inject the directive that created it.
|
||||
*
|
||||
* Since directives that create views via ViewContainers are common in Angular, and using the full `<template>` element syntax is wordy, Angular
|
||||
* also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
|
||||
*
|
||||
* Thus,
|
||||
*
|
||||
* ```
|
||||
* <ul>
|
||||
* <li *foo="bar" title="text"></li>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Expands in use to:
|
||||
*
|
||||
* ```
|
||||
* <ul>
|
||||
* <template [foo]="bar">
|
||||
* <li title="text"></li>
|
||||
* </template>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the directive
|
||||
* controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
|
||||
*
|
||||
*
|
||||
* ## Example
|
||||
*
|
||||
* Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
|
||||
*
|
||||
* Here is a simple directive that triggers on an `unless` selector:
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[unless]',
|
||||
* properties: {
|
||||
* 'unless': 'unless'
|
||||
* }
|
||||
* })
|
||||
* export class Unless {
|
||||
* viewContainer: ViewContainerRef;
|
||||
* protoViewRef: ProtoViewRef;
|
||||
* prevCondition: boolean;
|
||||
*
|
||||
* constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
|
||||
* this.viewContainer = viewContainer;
|
||||
* this.protoViewRef = protoViewRef;
|
||||
* this.prevCondition = null;
|
||||
* }
|
||||
*
|
||||
* set unless(newCondition) {
|
||||
* if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
|
||||
* this.prevCondition = true;
|
||||
* this.viewContainer.clear();
|
||||
* } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
|
||||
* this.prevCondition = false;
|
||||
* this.viewContainer.create(this.protoViewRef);
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* We can then use this `unless` selector in a template:
|
||||
* ```
|
||||
* <ul>
|
||||
* <li *unless="expr"></li>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Once the directive instantiates the child view, the shorthand notation for the template expands and the result is:
|
||||
*
|
||||
* ```
|
||||
* <ul>
|
||||
* <template [unless]="exp">
|
||||
* <li></li>
|
||||
* </template>
|
||||
* <li></li>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
|
||||
* view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
|
||||
*
|
||||
* @exportedAs angular2/annotations
|
||||
*/
|
||||
@ABSTRACT()
|
||||
export class Directive extends Injectable {
|
||||
/**
|
||||
* The CSS selector that triggers the instantiation of a directive.
|
||||
|
@ -303,7 +435,7 @@ export class Directive extends Injectable {
|
|||
* with standard Angular syntax. For example:
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[tooltip]',
|
||||
* properties: {
|
||||
* 'text': 'tooltip'
|
||||
|
@ -339,7 +471,7 @@ export class Directive extends Injectable {
|
|||
* See {@link Pipe} and {@link keyValDiff} documentation for more details.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[class-set]',
|
||||
* properties: {
|
||||
* 'classChanges': 'classSet | keyValDiff'
|
||||
|
@ -423,14 +555,14 @@ export class Directive extends Injectable {
|
|||
* You would define the event binding as follows:
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: 'input',
|
||||
* hostListeners: {
|
||||
* 'change': 'onChange($event)',
|
||||
* 'window:resize': 'onResize($event)'
|
||||
* }
|
||||
* })
|
||||
* class InputDecorator {
|
||||
* class InputDirective {
|
||||
* onChange(event:Event) {
|
||||
* }
|
||||
* onResize(event:Event) {
|
||||
|
@ -438,7 +570,7 @@ export class Directive extends Injectable {
|
|||
* }
|
||||
* ```
|
||||
*
|
||||
* Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
|
||||
* Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event.
|
||||
*
|
||||
*/
|
||||
hostListeners:any; // StringMap
|
||||
|
@ -450,13 +582,13 @@ export class Directive extends Injectable {
|
|||
* ## Syntax
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: 'input',
|
||||
* hostProperties: {
|
||||
* 'value': 'value'
|
||||
* }
|
||||
* })
|
||||
* class InputDecorator {
|
||||
* class InputDirective {
|
||||
* value:string;
|
||||
* }
|
||||
*
|
||||
|
@ -473,6 +605,12 @@ export class Directive extends Injectable {
|
|||
*/
|
||||
lifecycle:List; //List<LifecycleEvent>
|
||||
|
||||
/**
|
||||
* If set to true the compiler does not compile the children of this directive.
|
||||
*/
|
||||
//TODO(vsavkin): This would better fall under the Macro directive concept.
|
||||
compileChildren: boolean;
|
||||
|
||||
@CONST()
|
||||
constructor({
|
||||
selector,
|
||||
|
@ -480,14 +618,16 @@ export class Directive extends Injectable {
|
|||
events,
|
||||
hostListeners,
|
||||
hostProperties,
|
||||
lifecycle
|
||||
lifecycle,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners: any,
|
||||
hostProperties: any,
|
||||
lifecycle:List
|
||||
lifecycle:List,
|
||||
compileChildren:boolean
|
||||
}={})
|
||||
{
|
||||
super();
|
||||
|
@ -497,6 +637,7 @@ export class Directive extends Injectable {
|
|||
this.hostListeners = hostListeners;
|
||||
this.hostProperties = hostProperties;
|
||||
this.lifecycle = lifecycle;
|
||||
this.compileChildren = compileChildren;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -658,7 +799,8 @@ export class Component extends Directive {
|
|||
hostProperties,
|
||||
injectables,
|
||||
lifecycle,
|
||||
changeDetection = DEFAULT
|
||||
changeDetection = DEFAULT,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:Object,
|
||||
|
@ -667,200 +809,7 @@ export class Component extends Directive {
|
|||
hostProperties:any,
|
||||
injectables:List,
|
||||
lifecycle:List,
|
||||
changeDetection:string
|
||||
}={})
|
||||
{
|
||||
super({
|
||||
selector: selector,
|
||||
properties: properties,
|
||||
events: events,
|
||||
hostListeners: hostListeners,
|
||||
hostProperties: hostProperties,
|
||||
lifecycle: lifecycle
|
||||
});
|
||||
|
||||
this.changeDetection = changeDetection;
|
||||
this.injectables = injectables;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Directive that attaches behavior to DOM elements.
|
||||
*
|
||||
* A decorator directive attaches behavior to a DOM element in a composable manner.
|
||||
* (see: http://en.wikipedia.org/wiki/Composition_over_inheritance)
|
||||
*
|
||||
* Decorators:
|
||||
* - are simplest form of {@link Directive}s.
|
||||
* - are best used as a composition pattern ()
|
||||
*
|
||||
* Decorators differ from {@link Component}s in that they:
|
||||
* - can have multiple decorators per element
|
||||
* - do not create their own evaluation context
|
||||
* - do not have a template (and therefor do not create Shadow DOM)
|
||||
*
|
||||
*
|
||||
* ## Example
|
||||
*
|
||||
* Here we use a decorator directive to simply define basic tool-tip behavior.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* selector: '[tooltip]',
|
||||
* properties: {
|
||||
* 'text': 'tooltip'
|
||||
* },
|
||||
* hostListeners: {
|
||||
* 'onmouseenter': 'onMouseEnter()',
|
||||
* 'onmouseleave': 'onMouseLeave()'
|
||||
* }
|
||||
* })
|
||||
* class Tooltip{
|
||||
* text:string;
|
||||
* overlay:Overlay; // NOT YET IMPLEMENTED
|
||||
* overlayManager:OverlayManager; // NOT YET IMPLEMENTED
|
||||
*
|
||||
* constructor(overlayManager:OverlayManager) {
|
||||
* this.overlay = overlay;
|
||||
* }
|
||||
*
|
||||
* onMouseEnter() {
|
||||
* // exact signature to be determined
|
||||
* this.overlay = this.overlayManager.open(text, ...);
|
||||
* }
|
||||
*
|
||||
* onMouseLeave() {
|
||||
* this.overlay.close();
|
||||
* this.overlay = null;
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
|
||||
* like so:
|
||||
*
|
||||
* ```
|
||||
* <div tooltip="some text here"></div>
|
||||
* ```
|
||||
*
|
||||
* Decorators can also control the instantiation, destruction, and positioning of inline template elements:
|
||||
*
|
||||
* A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at runtime.
|
||||
* The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a location in the current view
|
||||
* where these actions are performed.
|
||||
*
|
||||
* Views are always created as children of the current {@link View}, and as siblings of the `<template>` element. Thus a
|
||||
* directive in a child view cannot inject the directive that created it.
|
||||
*
|
||||
* Since directives that create views via ViewContainers are common in Angular, and using the full `<template>` element syntax is wordy, Angular
|
||||
* also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
|
||||
*
|
||||
* Thus,
|
||||
*
|
||||
* ```
|
||||
* <ul>
|
||||
* <li *foo="bar" title="text"></li>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Expands in use to:
|
||||
*
|
||||
* ```
|
||||
* <ul>
|
||||
* <template [foo]="bar">
|
||||
* <li title="text"></li>
|
||||
* </template>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the directive
|
||||
* controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
|
||||
*
|
||||
*
|
||||
* ## Example
|
||||
*
|
||||
* Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
|
||||
*
|
||||
* Here is a simple directive that triggers on an `unless` selector:
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[unless]',
|
||||
* properties: {
|
||||
* 'unless': 'unless'
|
||||
* }
|
||||
* })
|
||||
* export class Unless {
|
||||
* viewContainer: ViewContainerRef;
|
||||
* protoViewRef: ProtoViewRef;
|
||||
* prevCondition: boolean;
|
||||
*
|
||||
* constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
|
||||
* this.viewContainer = viewContainer;
|
||||
* this.protoViewRef = protoViewRef;
|
||||
* this.prevCondition = null;
|
||||
* }
|
||||
*
|
||||
* set unless(newCondition) {
|
||||
* if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
|
||||
* this.prevCondition = true;
|
||||
* this.viewContainer.clear();
|
||||
* } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
|
||||
* this.prevCondition = false;
|
||||
* this.viewContainer.create(this.protoViewRef);
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* We can then use this `unless` selector in a template:
|
||||
* ```
|
||||
* <ul>
|
||||
* <li *unless="expr"></li>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Once the directive instantiates the child view, the shorthand notation for the template expands and the result is:
|
||||
*
|
||||
* ```
|
||||
* <ul>
|
||||
* <template [unless]="exp">
|
||||
* <li></li>
|
||||
* </template>
|
||||
* <li></li>
|
||||
* </ul>
|
||||
* ```
|
||||
*
|
||||
* Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
|
||||
* view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
|
||||
*
|
||||
*
|
||||
* @exportedAs angular2/annotations
|
||||
*/
|
||||
export class Decorator extends Directive {
|
||||
|
||||
/**
|
||||
* If set to true the compiler does not compile the children of this directive.
|
||||
*/
|
||||
//TODO(vsavkin): This would better fall under the Macro directive concept.
|
||||
compileChildren: boolean;
|
||||
|
||||
@CONST()
|
||||
constructor({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
hostProperties,
|
||||
lifecycle,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners:any,
|
||||
hostProperties:any,
|
||||
lifecycle:List,
|
||||
changeDetection:string,
|
||||
compileChildren:boolean
|
||||
}={})
|
||||
{
|
||||
|
@ -870,9 +819,12 @@ export class Decorator extends Directive {
|
|||
events: events,
|
||||
hostListeners: hostListeners,
|
||||
hostProperties: hostProperties,
|
||||
lifecycle: lifecycle
|
||||
lifecycle: lifecycle,
|
||||
compileChildren: compileChildren
|
||||
});
|
||||
this.compileChildren = compileChildren;
|
||||
|
||||
this.changeDetection = changeDetection;
|
||||
this.injectables = injectables;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -885,7 +837,7 @@ export class Decorator extends Directive {
|
|||
* ## Example
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* ...,
|
||||
* lifecycle: [onDestroy]
|
||||
* })
|
||||
|
@ -911,7 +863,7 @@ export const onDestroy = "onDestroy";
|
|||
* ## Example:
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[class-set]',
|
||||
* properties: {
|
||||
* 'propA': 'propA'
|
||||
|
@ -943,7 +895,7 @@ export const onChange = "onChange";
|
|||
* ## Example:
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[class-set]',
|
||||
* lifecycle: [onAllChangesDone]
|
||||
* })
|
||||
|
|
|
@ -17,10 +17,10 @@ import {DependencyAnnotation} from 'angular2/di';
|
|||
* A decorator can inject string literal `text` like so:
|
||||
*
|
||||
* ```javascript
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: `input'
|
||||
* })
|
||||
* class InputDecorator {
|
||||
* class InputDirective {
|
||||
* constructor(@Attribute('type') type) {
|
||||
* // type would be `text` in this example
|
||||
* }
|
||||
|
|
|
@ -9,7 +9,7 @@ import {DependencyAnnotation} from 'angular2/di';
|
|||
* Here is a simple directive that retrieves a dependency from its parent element.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
|
@ -20,7 +20,7 @@ import {DependencyAnnotation} from 'angular2/di';
|
|||
* }
|
||||
*
|
||||
*
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[my-directive]'
|
||||
* })
|
||||
* class Dependency {
|
||||
|
@ -60,7 +60,7 @@ export class Parent extends DependencyAnnotation {
|
|||
* Here is a simple directive that retrieves a dependency from an ancestor element.
|
||||
*
|
||||
* ```
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
|
@ -71,7 +71,7 @@ export class Parent extends DependencyAnnotation {
|
|||
* }
|
||||
*
|
||||
*
|
||||
* @Decorator({
|
||||
* @Directive({
|
||||
* selector: '[my-directive]'
|
||||
* })
|
||||
* class Dependency {
|
||||
|
|
|
@ -4,7 +4,7 @@ import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
|
|||
import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
|
||||
|
||||
import {DirectiveMetadataReader} from './directive_metadata_reader';
|
||||
import {Component, Decorator} from '../annotations_impl/annotations';
|
||||
import {Component, Directive} from '../annotations_impl/annotations';
|
||||
import {AppProtoView} from './view';
|
||||
import {ProtoViewRef} from './view_ref';
|
||||
import {DirectiveBinding} from './element_injector';
|
||||
|
@ -230,12 +230,11 @@ export class Compiler {
|
|||
static buildRenderDirective(directiveBinding):renderApi.DirectiveMetadata {
|
||||
var ann = directiveBinding.annotation;
|
||||
var renderType;
|
||||
var compileChildren = true;
|
||||
var compileChildren = ann.compileChildren;
|
||||
if (ann instanceof Component) {
|
||||
renderType = renderApi.DirectiveMetadata.COMPONENT_TYPE;
|
||||
} else if (ann instanceof Decorator) {
|
||||
renderType = renderApi.DirectiveMetadata.DECORATOR_TYPE;
|
||||
compileChildren = ann.compileChildren;
|
||||
} else {
|
||||
renderType = renderApi.DirectiveMetadata.DIRECTIVE_TYPE;
|
||||
}
|
||||
var readAttributes = [];
|
||||
ListWrapper.forEach(directiveBinding.dependencies, (dep) => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {
|
||||
ComponentAnnotation,
|
||||
DecoratorAnnotation
|
||||
DirectiveAnnotation
|
||||
} from '../annotations/annotations';
|
||||
import {ViewAnnotation} from '../annotations/view';
|
||||
import {AncestorAnnotation, ParentAnnotation} from '../annotations/visibility';
|
||||
|
@ -23,7 +23,7 @@ function makeDecorator(annotationCls) {
|
|||
|
||||
/* from annotations */
|
||||
export var Component = makeDecorator(ComponentAnnotation);
|
||||
export var Decorator = makeDecorator(DecoratorAnnotation);
|
||||
export var Decorator = makeDecorator(DirectiveAnnotation);
|
||||
|
||||
/* from di */
|
||||
export var Attribute = makeDecorator(AttributeAnnotation);
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[class]',
|
||||
properties: {
|
||||
'iterableChanges': 'class | keyValDiff'
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
||||
import {ViewRef, ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
|
||||
import {isPresent, isBlank} from 'angular2/src/facade/lang';
|
||||
|
@ -36,7 +36,7 @@ import {ListWrapper} from 'angular2/src/facade/collection';
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[for][of]',
|
||||
properties: {
|
||||
'iterableChanges': 'of | iterableDiff'
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
||||
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
|
||||
import {isBlank} from 'angular2/src/facade/lang';
|
||||
|
@ -26,7 +26,7 @@ import {isBlank} from 'angular2/src/facade/lang';
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[if]',
|
||||
properties: {
|
||||
'condition': 'if'
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
/**
|
||||
* The `NonBindable` directive tells Angular not to compile or bind the contents of the current
|
||||
|
@ -15,7 +15,7 @@ import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[non-bindable]',
|
||||
compileChildren: false
|
||||
})
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
||||
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
|
||||
import {isPresent, isBlank, normalizeBlank} from 'angular2/src/facade/lang';
|
||||
|
@ -50,7 +50,7 @@ class SwitchView {
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[switch]',
|
||||
properties: {
|
||||
'value': 'switch'
|
||||
|
@ -164,7 +164,7 @@ export class Switch {
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[switch-when]',
|
||||
properties: {
|
||||
'when' : 'switch-when'
|
||||
|
@ -206,7 +206,7 @@ export class SwitchWhen {
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[switch-default]'
|
||||
})
|
||||
export class SwitchDefault {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Decorator, onChange} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive, onChange} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
import {Optional} from 'angular2/di';
|
||||
|
@ -25,7 +25,7 @@ import {Validators} from './validators';
|
|||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[control]',
|
||||
hostListeners: {
|
||||
'change' : 'onChange($event.target.value)',
|
||||
|
@ -59,7 +59,7 @@ export class DefaultValueAccessor {
|
|||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'input[type=checkbox][control]',
|
||||
hostListeners: {
|
||||
'change' : 'onChange($event.target.checked)'
|
||||
|
@ -118,7 +118,7 @@ export class CheckboxControlValueAccessor {
|
|||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
lifecycle: [onChange],
|
||||
selector: '[control]',
|
||||
properties: {
|
||||
|
@ -215,7 +215,7 @@ export class ControlDirective {
|
|||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[control-group]',
|
||||
properties: {
|
||||
'controlGroup' : 'control-group'
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
import {Validators} from './validators';
|
||||
import {ControlDirective} from './directives';
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[required]'
|
||||
})
|
||||
export class RequiredValidatorDirective {
|
||||
|
|
|
@ -109,7 +109,7 @@ export class ProtoViewDto {
|
|||
}
|
||||
|
||||
export class DirectiveMetadata {
|
||||
static get DECORATOR_TYPE() { return 0; }
|
||||
static get DIRECTIVE_TYPE() { return 0; }
|
||||
static get COMPONENT_TYPE() { return 1; }
|
||||
id:any;
|
||||
selector:string;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {ElementRef} from 'angular2/core';
|
||||
|
||||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
|
@ -27,7 +27,7 @@ import {Router} from './router';
|
|||
*
|
||||
* @exportedAs angular2/router
|
||||
*/
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[router-link]',
|
||||
properties: {
|
||||
'route': 'routerLink',
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
|
||||
|
||||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Compiler, ViewContainerRef} from 'angular2/core';
|
||||
import {Injector, bind} from 'angular2/di';
|
||||
|
||||
import * as routerMod from './router';
|
||||
import {Instruction, RouteParams} from './instruction'
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'router-outlet'
|
||||
})
|
||||
export class RouterOutlet {
|
||||
|
|
|
@ -16,7 +16,7 @@ import 'rewriter.dart';
|
|||
/// reflector.
|
||||
///
|
||||
/// This will also create .ng_deps.dart files for classes annotated
|
||||
/// with @Component, @View, @Decorator, etc.
|
||||
/// with @Component, @View, @Directive, etc.
|
||||
///
|
||||
/// This transformer is the first phase in a two-phase transform. It should
|
||||
/// be followed by {@link DirectiveLinker}.
|
||||
|
|
|
@ -15,8 +15,8 @@ DirectiveMetadata readDirectiveMetadata(RegisteredType t) {
|
|||
num _getDirectiveType(String annotationName) {
|
||||
// TODO(kegluneq): Detect subtypes & implementations of `Directive`s.
|
||||
switch (annotationName) {
|
||||
case 'Decorator':
|
||||
return DirectiveMetadata.DECORATOR_TYPE;
|
||||
case 'Directive':
|
||||
return DirectiveMetadata.DIRECTIVE_TYPE;
|
||||
case 'Component':
|
||||
return DirectiveMetadata.COMPONENT_TYPE;
|
||||
default:
|
||||
|
@ -101,7 +101,7 @@ class _DirectiveMetadataVisitor extends Object
|
|||
if (compileChildrenValue is! BooleanLiteral) {
|
||||
logger.error(
|
||||
'Angular 2 currently only supports boolean literal values for '
|
||||
'Decorator#compileChildren.'
|
||||
'Directive#compileChildren.'
|
||||
' Source: ${compileChildrenValue}');
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ import {
|
|||
} from 'angular2/test_lib';
|
||||
import {bootstrap} from 'angular2/src/core/application';
|
||||
import {appDocumentToken, appElementToken} from 'angular2/src/core/application_tokens';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {PromiseWrapper} from 'angular2/src/facade/async';
|
||||
|
@ -68,7 +68,7 @@ class HelloRootCmp4 {
|
|||
@Component({selector: 'hello-app'})
|
||||
class HelloRootMissingTemplate { }
|
||||
|
||||
@Decorator({selector: 'hello-app'})
|
||||
@Directive({selector: 'hello-app'})
|
||||
class HelloRootDirectiveIsNotCmp { }
|
||||
|
||||
export function main() {
|
||||
|
|
|
@ -21,7 +21,7 @@ import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
|
|||
import {AppProtoView} from 'angular2/src/core/compiler/view';
|
||||
import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
|
||||
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Attribute} from 'angular2/src/core/annotations_impl/di';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {internalProtoView} from 'angular2/src/core/compiler/view_ref';
|
||||
|
@ -151,8 +151,8 @@ export function main() {
|
|||
}));
|
||||
|
||||
it('should fill directive.type for decorator directives', inject([AsyncTestCompleter], (async) => {
|
||||
captureDirective(SomeDecoratorDirective).then( (renderDir) => {
|
||||
expect(renderDir.type).toEqual(renderApi.DirectiveMetadata.DECORATOR_TYPE);
|
||||
captureDirective(SomeDirective).then( (renderDir) => {
|
||||
expect(renderDir.type).toEqual(renderApi.DirectiveMetadata.DIRECTIVE_TYPE);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
@ -165,14 +165,14 @@ export function main() {
|
|||
}));
|
||||
|
||||
it('should set directive.compileChildren to true for decorator directives', inject([AsyncTestCompleter], (async) => {
|
||||
captureDirective(SomeDecoratorDirective).then( (renderDir) => {
|
||||
captureDirective(SomeDirective).then( (renderDir) => {
|
||||
expect(renderDir.compileChildren).toEqual(true);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should set directive.compileChildren to false for decorator directives', inject([AsyncTestCompleter], (async) => {
|
||||
captureDirective(IgnoreChildrenDecoratorDirective).then( (renderDir) => {
|
||||
captureDirective(IgnoreChildrenDirective).then( (renderDir) => {
|
||||
expect(renderDir.compileChildren).toEqual(false);
|
||||
async.done();
|
||||
});
|
||||
|
@ -241,14 +241,14 @@ export function main() {
|
|||
tplResolver.setView(MainComponent,
|
||||
new View({
|
||||
template: '<div></div>',
|
||||
directives: [SomeDecoratorDirective]
|
||||
directives: [SomeDirective]
|
||||
})
|
||||
);
|
||||
var compiler = createCompiler([createRenderProtoView()], [createProtoView()]);
|
||||
compiler.compile(MainComponent).then( (_) => {
|
||||
var request = protoViewFactory.requests[0];
|
||||
var binding = request[2][0];
|
||||
expect(binding.key.token).toBe(SomeDecoratorDirective);
|
||||
expect(binding.key.token).toBe(SomeDirective);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
@ -420,8 +420,8 @@ export function main() {
|
|||
it('should throw for non component types', () => {
|
||||
var compiler = createCompiler([], []);
|
||||
expect(
|
||||
() => compiler.compile(SomeDecoratorDirective)
|
||||
).toThrowError(`Could not load '${stringify(SomeDecoratorDirective)}' because it is not a component.`);
|
||||
() => compiler.compile(SomeDirective)
|
||||
).toThrowError(`Could not load '${stringify(SomeDirective)}' because it is not a component.`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -493,30 +493,30 @@ class RecursiveComponent {}
|
|||
@Component()
|
||||
class SomeDynamicComponentDirective {}
|
||||
|
||||
@Decorator()
|
||||
class SomeDecoratorDirective {}
|
||||
@Directive()
|
||||
class SomeDirective {}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
compileChildren: false
|
||||
})
|
||||
class IgnoreChildrenDecoratorDirective {}
|
||||
class IgnoreChildrenDirective {}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
hostListeners: {'someEvent': 'someAction'}
|
||||
})
|
||||
class DirectiveWithEvents {}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
hostProperties: {'someField': 'someProp'}
|
||||
})
|
||||
class DirectiveWithProperties {}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
properties: {'a': 'b'}
|
||||
})
|
||||
class DirectiveWithBind {}
|
||||
|
||||
@Decorator()
|
||||
@Directive()
|
||||
class DirectiveWithAttributes {
|
||||
constructor(@Attribute('someAttr') someAttr:string) {}
|
||||
}
|
||||
|
|
|
@ -2,15 +2,15 @@ import {isPresent} from 'angular2/src/facade/lang';
|
|||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {ddescribe, describe, it, iit, expect, beforeEach} from 'angular2/test_lib';
|
||||
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
|
||||
import {Decorator, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
|
||||
import {Injectable, Injector} from 'angular2/di';
|
||||
|
||||
@Injectable()
|
||||
class SomeInjectable {}
|
||||
|
||||
@Decorator({selector: 'someDecorator'})
|
||||
class SomeDecorator {}
|
||||
@Directive({selector: 'someDirective'})
|
||||
class SomeDirective {}
|
||||
|
||||
@Component({selector: 'someComponent', injectables: [SomeInjectable]})
|
||||
class SomeComponent {}
|
||||
|
@ -26,10 +26,10 @@ export function main() {
|
|||
reader = new DirectiveMetadataReader();
|
||||
});
|
||||
|
||||
it('should read out the Decorator annotation', () => {
|
||||
var directiveMetadata = reader.read(SomeDecorator);
|
||||
it('should read out the Directive annotation', () => {
|
||||
var directiveMetadata = reader.read(SomeDirective);
|
||||
expect(directiveMetadata).toEqual(
|
||||
new DirectiveMetadata(SomeDecorator, new Decorator({selector: 'someDecorator'}), null));
|
||||
new DirectiveMetadata(SomeDirective, new Directive({selector: 'someDirective'}), null));
|
||||
});
|
||||
|
||||
it('should read out the Component annotation', () => {
|
||||
|
|
|
@ -16,7 +16,7 @@ import {
|
|||
|
||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||
|
||||
import {Decorator, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
|
|
|
@ -24,7 +24,7 @@ import {Injector, bind} from 'angular2/di';
|
|||
import {PipeRegistry, defaultPipeRegistry,
|
||||
ChangeDetection, DynamicChangeDetection, Pipe, ChangeDetectorRef, ON_PUSH} from 'angular2/change_detection';
|
||||
|
||||
import {Decorator, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||
import {Attribute} from 'angular2/src/core/annotations_impl/di';
|
||||
|
@ -548,15 +548,15 @@ export function main() {
|
|||
it('should support events via EventEmitter', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div emitter listener></div>',
|
||||
directives: [DecoratorEmitingEvent, DecoratorListeningEvent]
|
||||
directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
|
||||
var injector = view.rawView.elementInjectors[0];
|
||||
|
||||
var emitter = injector.get(DecoratorEmitingEvent);
|
||||
var listener = injector.get(DecoratorListeningEvent);
|
||||
var emitter = injector.get(DirectiveEmitingEvent);
|
||||
var listener = injector.get(DirectiveListeningEvent);
|
||||
|
||||
expect(listener.msg).toEqual('');
|
||||
|
||||
|
@ -572,14 +572,14 @@ export function main() {
|
|||
it('should support render events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div listener></div>',
|
||||
directives: [DecoratorListeningDomEvent]
|
||||
directives: [DirectiveListeningDomEvent]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
|
||||
var injector = view.rawView.elementInjectors[0];
|
||||
|
||||
var listener = injector.get(DecoratorListeningDomEvent);
|
||||
var listener = injector.get(DirectiveListeningDomEvent);
|
||||
|
||||
dispatchEvent(view.rootNodes[0], 'domEvent');
|
||||
|
||||
|
@ -592,22 +592,22 @@ export function main() {
|
|||
it('should support render global events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div listener></div>',
|
||||
directives: [DecoratorListeningDomEvent]
|
||||
directives: [DirectiveListeningDomEvent]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
var injector = view.rawView.elementInjectors[0];
|
||||
|
||||
var listener = injector.get(DecoratorListeningDomEvent);
|
||||
var listener = injector.get(DirectiveListeningDomEvent);
|
||||
dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
|
||||
expect(listener.eventType).toEqual('window_domEvent');
|
||||
|
||||
listener = injector.get(DecoratorListeningDomEvent);
|
||||
listener = injector.get(DirectiveListeningDomEvent);
|
||||
dispatchEvent(DOM.getGlobalEventTarget("document"), 'domEvent');
|
||||
expect(listener.eventType).toEqual('document_domEvent');
|
||||
|
||||
view.destroy();
|
||||
listener = injector.get(DecoratorListeningDomEvent);
|
||||
listener = injector.get(DirectiveListeningDomEvent);
|
||||
dispatchEvent(DOM.getGlobalEventTarget("body"), 'domEvent');
|
||||
expect(listener.eventType).toEqual('');
|
||||
|
||||
|
@ -618,12 +618,12 @@ export function main() {
|
|||
it('should support updating host element via hostProperties', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div update-host-properties></div>',
|
||||
directives: [DecoratorUpdatingHostProperties]
|
||||
directives: [DirectiveUpdatingHostProperties]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
var injector = view.rawView.elementInjectors[0];
|
||||
var updateHost = injector.get(DecoratorUpdatingHostProperties);
|
||||
var updateHost = injector.get(DirectiveUpdatingHostProperties);
|
||||
|
||||
updateHost.id = "newId";
|
||||
|
||||
|
@ -639,7 +639,7 @@ export function main() {
|
|||
it('should support preventing default on render events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<input type="checkbox" listenerprevent></input><input type="checkbox" listenernoprevent></input>',
|
||||
directives: [DecoratorListeningDomEventPrevent, DecoratorListeningDomEventNoPrevent]
|
||||
directives: [DirectiveListeningDomEventPrevent, DirectiveListeningDomEventNoPrevent]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
|
@ -657,7 +657,7 @@ export function main() {
|
|||
it('should support render global events from multiple directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div *if="ctxBoolProp" listener listenerother></div>',
|
||||
directives: [If, DecoratorListeningDomEvent, DecoratorListeningDomEventOther]
|
||||
directives: [If, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
|
@ -667,8 +667,8 @@ export function main() {
|
|||
|
||||
var subview = view.rawView.viewContainers[0].views[0];
|
||||
var injector = subview.elementInjectors[0];
|
||||
var listener = injector.get(DecoratorListeningDomEvent);
|
||||
var listenerother = injector.get(DecoratorListeningDomEventOther);
|
||||
var listener = injector.get(DirectiveListeningDomEvent);
|
||||
var listenerother = injector.get(DirectiveListeningDomEventOther);
|
||||
dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
|
||||
expect(listener.eventType).toEqual('window_domEvent');
|
||||
expect(listenerother.eventType).toEqual('other_domEvent');
|
||||
|
@ -857,7 +857,7 @@ class SimpleImperativeViewComponent {
|
|||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'dynamic-vp'
|
||||
})
|
||||
class DynamicViewport {
|
||||
|
@ -871,7 +871,7 @@ class DynamicViewport {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[my-dir]',
|
||||
properties: {'dirProp':'elprop'}
|
||||
})
|
||||
|
@ -992,7 +992,7 @@ class ChildCompUsingService {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'some-directive'
|
||||
})
|
||||
class SomeDirective { }
|
||||
|
@ -1038,7 +1038,7 @@ class ChildComp2 {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[some-viewport]'
|
||||
})
|
||||
class SomeViewport {
|
||||
|
@ -1075,11 +1075,11 @@ class DoublePipeFactory {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[emitter]',
|
||||
events: ['event']
|
||||
})
|
||||
class DecoratorEmitingEvent {
|
||||
class DirectiveEmitingEvent {
|
||||
msg: string;
|
||||
event:EventEmitter;
|
||||
|
||||
|
@ -1093,13 +1093,13 @@ class DecoratorEmitingEvent {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[update-host-properties]',
|
||||
hostProperties: {
|
||||
'id' : 'id'
|
||||
}
|
||||
})
|
||||
class DecoratorUpdatingHostProperties {
|
||||
class DirectiveUpdatingHostProperties {
|
||||
id:string;
|
||||
|
||||
constructor() {
|
||||
|
@ -1107,11 +1107,11 @@ class DecoratorUpdatingHostProperties {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[listener]',
|
||||
hostListeners: {'event': 'onEvent($event)'}
|
||||
})
|
||||
class DecoratorListeningEvent {
|
||||
class DirectiveListeningEvent {
|
||||
msg: string;
|
||||
|
||||
constructor() {
|
||||
|
@ -1123,7 +1123,7 @@ class DecoratorListeningEvent {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[listener]',
|
||||
hostListeners: {
|
||||
'domEvent': 'onEvent($event.type)',
|
||||
|
@ -1132,7 +1132,7 @@ class DecoratorListeningEvent {
|
|||
'body:domEvent': 'onBodyEvent($event.type)'
|
||||
}
|
||||
})
|
||||
class DecoratorListeningDomEvent {
|
||||
class DirectiveListeningDomEvent {
|
||||
eventType: string;
|
||||
constructor() {
|
||||
this.eventType = '';
|
||||
|
@ -1152,13 +1152,13 @@ class DecoratorListeningDomEvent {
|
|||
}
|
||||
|
||||
var globalCounter = 0;
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[listenerother]',
|
||||
hostListeners: {
|
||||
'window:domEvent': 'onEvent($event.type)'
|
||||
}
|
||||
})
|
||||
class DecoratorListeningDomEventOther {
|
||||
class DirectiveListeningDomEventOther {
|
||||
eventType: string;
|
||||
counter: int;
|
||||
constructor() {
|
||||
|
@ -1170,31 +1170,31 @@ class DecoratorListeningDomEventOther {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[listenerprevent]',
|
||||
hostListeners: {
|
||||
'click': 'onEvent($event)'
|
||||
}
|
||||
})
|
||||
class DecoratorListeningDomEventPrevent {
|
||||
class DirectiveListeningDomEventPrevent {
|
||||
onEvent(event) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[listenernoprevent]',
|
||||
hostListeners: {
|
||||
'click': 'onEvent($event)'
|
||||
}
|
||||
})
|
||||
class DecoratorListeningDomEventNoPrevent {
|
||||
class DirectiveListeningDomEventNoPrevent {
|
||||
onEvent(event) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[id]',
|
||||
properties: {'id': 'id'}
|
||||
})
|
||||
|
@ -1202,7 +1202,7 @@ class IdDir {
|
|||
id: string;
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[static]'
|
||||
})
|
||||
class NeedsAttribute {
|
||||
|
@ -1216,19 +1216,19 @@ class NeedsAttribute {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[public-api]'
|
||||
})
|
||||
class PublicApi {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[private-impl]'
|
||||
})
|
||||
class PrivateImpl extends PublicApi {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[needs-public-api]'
|
||||
})
|
||||
class NeedsPublicApi {
|
||||
|
|
|
@ -19,7 +19,7 @@ import {Query} from 'angular2/src/core/annotations_impl/di';
|
|||
|
||||
import {If, For} from 'angular2/angular2';
|
||||
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
|
||||
|
@ -100,7 +100,7 @@ class NeedsQuery {
|
|||
|
||||
var _constructiontext = 0;
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[text]',
|
||||
properties: {
|
||||
'text': 'text'
|
||||
|
|
|
@ -12,7 +12,7 @@ import {
|
|||
} from 'angular2/test_lib';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
import {Decorator, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
|
@ -55,7 +55,7 @@ export function main() {
|
|||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@View({directives: [NonBindable, TestDecorator]})
|
||||
@View({directives: [NonBindable, TestDirective]})
|
||||
class TestComponent {
|
||||
text: string;
|
||||
constructor() {
|
||||
|
@ -63,10 +63,10 @@ class TestComponent {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[test-dec]'
|
||||
})
|
||||
class TestDecorator {
|
||||
class TestDirective {
|
||||
constructor(el: ElementRef) {
|
||||
DOM.addClass(el.domElement, 'compiled');
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
|
|||
|
||||
import {Inject} from 'angular2/di';
|
||||
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||
|
@ -387,7 +387,7 @@ class MyComp {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector:'[wrapped-value]',
|
||||
hostListeners: {
|
||||
'change' : 'handleOnChange($event.target.value)'
|
||||
|
|
|
@ -17,13 +17,13 @@ export function main() {
|
|||
annotatedDirectives = [
|
||||
someComponent,
|
||||
someComponent2,
|
||||
someDecorator,
|
||||
someDecoratorIgnoringChildren,
|
||||
someDirective,
|
||||
someDirectiveIgnoringChildren,
|
||||
decoratorWithMultipleAttrs,
|
||||
someDecoratorWithProps,
|
||||
someDecoratorWithHostProperties,
|
||||
someDecoratorWithEvents,
|
||||
someDecoratorWithGlobalEvents
|
||||
someDirectiveWithProps,
|
||||
someDirectiveWithHostProperties,
|
||||
someDirectiveWithEvents,
|
||||
someDirectiveWithGlobalEvents
|
||||
];
|
||||
parser = new Parser(new Lexer());
|
||||
});
|
||||
|
@ -56,7 +56,7 @@ export function main() {
|
|||
it('should detect directives in attributes', () => {
|
||||
var results = process(el('<div some-decor></div>'));
|
||||
expect(results[0].directives[0].directiveIndex).toBe(
|
||||
annotatedDirectives.indexOf(someDecorator)
|
||||
annotatedDirectives.indexOf(someDirective)
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -208,25 +208,25 @@ var someComponent2 = new DirectiveMetadata({
|
|||
type: DirectiveMetadata.COMPONENT_TYPE
|
||||
});
|
||||
|
||||
var someDecorator = new DirectiveMetadata({
|
||||
var someDirective = new DirectiveMetadata({
|
||||
selector: '[some-decor]',
|
||||
type: DirectiveMetadata.DECORATOR_TYPE
|
||||
type: DirectiveMetadata.DIRECTIVE_TYPE
|
||||
});
|
||||
|
||||
var someDecoratorIgnoringChildren = new DirectiveMetadata({
|
||||
var someDirectiveIgnoringChildren = new DirectiveMetadata({
|
||||
selector: '[some-decor-ignoring-children]',
|
||||
compileChildren: false,
|
||||
type: DirectiveMetadata.DECORATOR_TYPE
|
||||
type: DirectiveMetadata.DIRECTIVE_TYPE
|
||||
|
||||
});
|
||||
|
||||
var decoratorWithMultipleAttrs = new DirectiveMetadata({
|
||||
selector: 'input[type=text][control]',
|
||||
id: 'decoratorWithMultipleAttrs',
|
||||
type: DirectiveMetadata.DECORATOR_TYPE
|
||||
type: DirectiveMetadata.DIRECTIVE_TYPE
|
||||
});
|
||||
|
||||
var someDecoratorWithProps = new DirectiveMetadata({
|
||||
var someDirectiveWithProps = new DirectiveMetadata({
|
||||
selector: '[some-decor-props]',
|
||||
properties: MapWrapper.createFromStringMap({
|
||||
'dirProp': 'elProp',
|
||||
|
@ -235,21 +235,21 @@ var someDecoratorWithProps = new DirectiveMetadata({
|
|||
readAttributes: ['some-attr']
|
||||
});
|
||||
|
||||
var someDecoratorWithHostProperties = new DirectiveMetadata({
|
||||
var someDirectiveWithHostProperties = new DirectiveMetadata({
|
||||
selector: '[some-decor-with-host-props]',
|
||||
hostProperties: MapWrapper.createFromStringMap({
|
||||
'dirProp': 'hostProperty'
|
||||
})
|
||||
});
|
||||
|
||||
var someDecoratorWithEvents = new DirectiveMetadata({
|
||||
var someDirectiveWithEvents = new DirectiveMetadata({
|
||||
selector: '[some-decor-events]',
|
||||
hostListeners: MapWrapper.createFromStringMap({
|
||||
'click': 'doIt()'
|
||||
})
|
||||
});
|
||||
|
||||
var someDecoratorWithGlobalEvents = new DirectiveMetadata({
|
||||
var someDirectiveWithGlobalEvents = new DirectiveMetadata({
|
||||
selector: '[some-decor-globalevents]',
|
||||
hostListeners: MapWrapper.createFromStringMap({
|
||||
'window:resize': 'doItGlobal()'
|
||||
|
|
|
@ -43,7 +43,7 @@ export function main() {
|
|||
['properties', MapWrapper.createFromPairs([['propKey', 'propVal']])],
|
||||
['readAttributes', ['readTest1', 'readTest2']],
|
||||
['selector', 'testSelector'],
|
||||
['type', DirectiveMetadata.DECORATOR_TYPE]
|
||||
['type', DirectiveMetadata.DIRECTIVE_TYPE]
|
||||
]);
|
||||
var meta = directiveMetadataFromMap(map);
|
||||
expect(meta.compileChildren).toEqual(false);
|
||||
|
@ -56,7 +56,7 @@ export function main() {
|
|||
MapWrapper.createFromPairs([['propKey', 'propVal']]));
|
||||
expect(meta.readAttributes).toEqual(['readTest1', 'readTest2']);
|
||||
expect(meta.selector).toEqual('testSelector');
|
||||
expect(meta.type).toEqual(DirectiveMetadata.DECORATOR_TYPE);
|
||||
expect(meta.type).toEqual(DirectiveMetadata.DIRECTIVE_TYPE);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -405,7 +405,7 @@ var multipleContentTagsComponent = new DirectiveMetadata({
|
|||
var manualViewportDirective = new DirectiveMetadata({
|
||||
selector: '[manual]',
|
||||
id: 'manual',
|
||||
type: DirectiveMetadata.DECORATOR_TYPE
|
||||
type: DirectiveMetadata.DIRECTIVE_TYPE
|
||||
});
|
||||
|
||||
var outerWithIndirectNestedComponent = new DirectiveMetadata({
|
||||
|
@ -441,7 +441,7 @@ var conditionalContentComponent = new DirectiveMetadata({
|
|||
var autoViewportDirective = new DirectiveMetadata({
|
||||
selector: '[auto]',
|
||||
id: '[auto]',
|
||||
type: DirectiveMetadata.DECORATOR_TYPE
|
||||
type: DirectiveMetadata.DIRECTIVE_TYPE
|
||||
});
|
||||
|
||||
var tabGroupComponent = new DirectiveMetadata({
|
||||
|
|
|
@ -12,7 +12,7 @@ void initReflector(reflector) {
|
|||
'factory': () => new ToolTip(),
|
||||
'parameters': const [],
|
||||
'annotations': const [
|
||||
const Decorator(
|
||||
const Directive(
|
||||
selector: '[tool-tip]', properties: const {'text': 'tool-tip'})
|
||||
]
|
||||
});
|
||||
|
|
|
@ -12,7 +12,7 @@ void initReflector(reflector) {
|
|||
'factory': () => new ToolTip(),
|
||||
'parameters': const [],
|
||||
'annotations': const [
|
||||
const Decorator(
|
||||
const Directive(
|
||||
selector: '[tool-tip]', properties: const {'text': 'tool-tip'})
|
||||
]
|
||||
})
|
||||
|
|
|
@ -11,6 +11,6 @@ void initReflector(reflector) {
|
|||
..registerType(HelloCmp, {
|
||||
'factory': () => new HelloCmp(),
|
||||
'parameters': const [const []],
|
||||
'annotations': const [const Decorator(compileChildren: true)]
|
||||
'annotations': const [const Directive(compileChildren: true)]
|
||||
});
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.hello_world.index_common_dart.ng_deps.dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.src.hello_world.index_common_dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.src.hello_world.index_common_dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.src.hello_world.index_common_dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library examples.src.hello_world.index_common_dart;
|
|||
|
||||
import 'hello.dart';
|
||||
import 'package:angular2/angular2.dart'
|
||||
show bootstrap, Component, Decorator, View, NgElement;
|
||||
show bootstrap, Component, Directive, View, NgElement;
|
||||
|
||||
var _visited = false;
|
||||
void initReflector(reflector) {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'md-input-container input'
|
||||
})
|
||||
export class MdInput {
|
||||
|
@ -10,7 +10,7 @@ export class MdInput {
|
|||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: 'md-input-container'
|
||||
})
|
||||
export class MdInputContainer {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {Decorator} from 'angular2/angular2';
|
||||
import {Directive} from 'angular2/angular2';
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[md-theme]'
|
||||
})
|
||||
export class MdTheme {
|
||||
|
|
|
@ -23,7 +23,7 @@ describe('ng2 cost benchmark', function () {
|
|||
it('should log stats for components with decorators', function(done) {
|
||||
perfUtil.runClickBenchmark({
|
||||
url: URL,
|
||||
buttons: ['#reset', '#createComponentsWithDecorators'],
|
||||
buttons: ['#reset', '#createComponentsWithDirectives'],
|
||||
id: 'ng2.costs.decorators',
|
||||
params: [{
|
||||
name: 'size', value: benchmarkSize, scale: 'linear'
|
||||
|
|
|
@ -10,7 +10,7 @@ import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
|
|||
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
|
||||
|
||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
|
||||
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
|
||||
|
@ -110,7 +110,7 @@ function createTemplateHtml(templateId, repeatCount) {
|
|||
return result;
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dir0]',
|
||||
properties: {
|
||||
'prop': 'attr0'
|
||||
|
@ -118,7 +118,7 @@ function createTemplateHtml(templateId, repeatCount) {
|
|||
})
|
||||
class Dir0 {}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dir1]',
|
||||
properties: {
|
||||
'prop': 'attr1'
|
||||
|
@ -128,7 +128,7 @@ class Dir1 {
|
|||
constructor(dir0:Dir0) {}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dir2]',
|
||||
properties: {
|
||||
'prop': 'attr2'
|
||||
|
@ -138,7 +138,7 @@ class Dir2 {
|
|||
constructor(dir1:Dir1) {}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dir3]',
|
||||
properties: {
|
||||
'prop': 'attr3'
|
||||
|
@ -148,7 +148,7 @@ class Dir3 {
|
|||
constructor(dir2:Dir2) {}
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[dir4]',
|
||||
properties: {
|
||||
'prop': 'attr4'
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>Cost of decorators</td>
|
||||
<td><button id="createComponentsWithDecorators">Run</button></td>
|
||||
<td><button id="createComponentsWithDirectives">Run</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cost of dynamic components</td>
|
||||
|
|
|
@ -12,7 +12,7 @@ import {If, For} from 'angular2/directives';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
var testList = null;
|
||||
|
@ -39,8 +39,8 @@ export function main() {
|
|||
});
|
||||
|
||||
// Components with decorators
|
||||
bindAction('#createComponentsWithDecorators', function() {
|
||||
app.createComponentsWithDecorators();
|
||||
bindAction('#createComponentsWithDirectives', function() {
|
||||
app.createComponentsWithDirectives();
|
||||
lifeCycle.tick();
|
||||
});
|
||||
|
||||
|
@ -54,13 +54,13 @@ export function main() {
|
|||
|
||||
@Component({selector: 'app'})
|
||||
@View({
|
||||
directives: [If, For, DummyComponent, DummyDecorator, DynamicDummy],
|
||||
directives: [If, For, DummyComponent, DummyDirective, DynamicDummy],
|
||||
template: `
|
||||
<div *if="testingPlainComponents">
|
||||
<dummy *for="#i of list"></dummy>
|
||||
</div>
|
||||
|
||||
<div *if="testingWithDecorators">
|
||||
<div *if="testingWithDirectives">
|
||||
<dummy dummy-decorator *for="#i of list"></dummy>
|
||||
</div>
|
||||
|
||||
|
@ -72,7 +72,7 @@ export function main() {
|
|||
class AppComponent {
|
||||
list:List;
|
||||
testingPlainComponents:boolean;
|
||||
testingWithDecorators:boolean;
|
||||
testingWithDirectives:boolean;
|
||||
testingDynamicComponents:boolean;
|
||||
|
||||
constructor() {
|
||||
|
@ -82,7 +82,7 @@ class AppComponent {
|
|||
reset():void {
|
||||
this.list = [];
|
||||
this.testingPlainComponents = false;
|
||||
this.testingWithDecorators = false;
|
||||
this.testingWithDirectives = false;
|
||||
this.testingDynamicComponents = false;
|
||||
}
|
||||
|
||||
|
@ -91,9 +91,9 @@ class AppComponent {
|
|||
this.testingPlainComponents = true;
|
||||
}
|
||||
|
||||
createComponentsWithDecorators():void {
|
||||
createComponentsWithDirectives():void {
|
||||
this.list = testList;
|
||||
this.testingWithDecorators = true;
|
||||
this.testingWithDirectives = true;
|
||||
}
|
||||
|
||||
createDynamicComponents():void {
|
||||
|
@ -106,8 +106,8 @@ class AppComponent {
|
|||
@View({template: `<div></div>`})
|
||||
class DummyComponent {}
|
||||
|
||||
@Decorator({selector: '[dummy-decorator]'})
|
||||
class DummyDecorator {}
|
||||
@Directive({selector: '[dummy-decorator]'})
|
||||
class DummyDirective {}
|
||||
|
||||
@Component({selector: 'dynamic-dummy'})
|
||||
class DynamicDummy {
|
||||
|
|
|
@ -2,7 +2,7 @@ import {bootstrap} from 'angular2/angular2';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
|
||||
|
|
|
@ -9,7 +9,7 @@ import {document} from 'angular2/src/facade/browser';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({selector: 'scroll-app'})
|
||||
|
|
|
@ -5,7 +5,7 @@ import {For} from 'angular2/directives';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
export class HasStyle {
|
||||
|
|
|
@ -3,7 +3,7 @@ import {Math} from 'angular2/src/facade/math';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {Offering, ITEMS, ITEM_HEIGHT, VISIBLE_ITEMS, VIEW_PORT_HEIGHT,
|
||||
|
|
|
@ -5,7 +5,7 @@ import {CompanyNameComponent, OpportunityNameComponent,
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH,
|
||||
|
|
|
@ -2,7 +2,7 @@ import {bootstrap, ViewContainerRef, Compiler} from 'angular2/angular2';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
|
||||
|
|
|
@ -58,7 +58,7 @@ createTemplate(String html) {
|
|||
return div;
|
||||
}
|
||||
|
||||
@Decorator(
|
||||
@Directive(
|
||||
selector: '[dir0]',
|
||||
map: const {
|
||||
'attr0': '=>prop'
|
||||
|
@ -68,7 +68,7 @@ class Dir0 {
|
|||
Object prop;
|
||||
}
|
||||
|
||||
@Decorator(
|
||||
@Directive(
|
||||
selector: '[dir1]',
|
||||
map: const {
|
||||
'attr1': '=>prop'
|
||||
|
@ -81,7 +81,7 @@ class Dir1 {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator(
|
||||
@Directive(
|
||||
selector: '[dir2]',
|
||||
map: const {
|
||||
'attr2': '=>prop'
|
||||
|
@ -94,7 +94,7 @@ class Dir2 {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator(
|
||||
@Directive(
|
||||
selector: '[dir3]',
|
||||
map: const {
|
||||
'attr3': '=>prop'
|
||||
|
@ -107,7 +107,7 @@ class Dir3 {
|
|||
}
|
||||
}
|
||||
|
||||
@Decorator(
|
||||
@Directive(
|
||||
selector: '[dir4]',
|
||||
map: const {
|
||||
'attr4': '=>prop'
|
||||
|
|
|
@ -3,7 +3,7 @@ import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/fo
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
// HeaderFields renders the bound header control group. It can used as follows:
|
||||
|
|
|
@ -3,14 +3,14 @@ import {Injectable} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
|
||||
// Angular 2.0 supports 2 basic types of directives:
|
||||
// - Component - the basic building blocks of Angular 2.0 apps. Backed by
|
||||
// ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
|
||||
// - Decorator - add behavior to existing elements.
|
||||
// - Directive - add behavior to existing elements.
|
||||
|
||||
// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
|
||||
// 2.0 component.
|
||||
|
@ -45,9 +45,9 @@ export class HelloCmp {
|
|||
}
|
||||
}
|
||||
|
||||
// Decorators are light-weight. They don't allow new
|
||||
// Directives are light-weight. They don't allow new
|
||||
// expression contexts (use @Component for those needs).
|
||||
@Decorator({
|
||||
@Directive({
|
||||
selector: '[red]'
|
||||
})
|
||||
class RedDec {
|
||||
|
|
|
@ -6,7 +6,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -6,7 +6,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -6,7 +6,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -6,7 +6,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -6,7 +6,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -7,7 +7,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -6,7 +6,7 @@ import {bind} from 'angular2/di';
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -5,7 +5,7 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil
|
|||
|
||||
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
|
||||
// add those imports back into 'angular2/angular2';
|
||||
import {Component, Decorator} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
@Component({
|
||||
|
|
Loading…
Reference in New Issue