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:
Tobias Bosch 2015-04-30 13:38:40 -07:00
parent c671706518
commit f75a50c1dd
71 changed files with 384 additions and 438 deletions

View File

@ -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.
*
*/

View File

@ -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 ) { ... } |
} |

View File

@ -5,7 +5,6 @@
export {
Component as ComponentAnnotation,
Decorator as DecoratorAnnotation,
Directive as DirectiveAnnotation,
onDestroy, onChange, onAllChangesDone
} from '../annotations_impl/annotations';

View File

@ -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]
* })

View File

@ -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
* }

View File

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

View File

@ -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) => {

View File

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

View File

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

View File

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

View File

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

View File

@ -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
})

View File

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

View File

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

View File

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

View File

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

View File

@ -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',

View File

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

View File

@ -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}.

View File

@ -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;
}

View File

@ -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() {

View File

@ -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) {}
}

View File

@ -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', () => {

View File

@ -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';

View File

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

View File

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

View File

@ -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');
}

View File

@ -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)'

View File

@ -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()'

View File

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

View File

@ -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({

View File

@ -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'})
]
});

View File

@ -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'})
]
})

View File

@ -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)]
});
}

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

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

View File

@ -1,6 +1,6 @@
import {Decorator} from 'angular2/angular2';
import {Directive} from 'angular2/angular2';
@Decorator({
@Directive({
selector: '[md-theme]'
})
export class MdTheme {

View File

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

View File

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

View File

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

View File

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

View File

@ -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';

View File

@ -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'})

View File

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

View File

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

View File

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

View File

@ -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';

View File

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

View File

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

View File

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

View File

@ -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({

View File

@ -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({

View File

@ -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({

View File

@ -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({

View File

@ -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({

View File

@ -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({

View File

@ -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({

View File

@ -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({