...
- * ...
- * ```
- *
- * Whenever the `someExpression` expression changes, the `properties` declaration instructs
- * Angular to update the `Tooltip`'s `text` property.
- *
- *
- *
- * ## Bindings With Pipes
- *
- * You can also use pipes when writing binding definitions for a directive.
- *
- * For example, we could write a binding that updates the directive on structural changes, rather than on reference
- * changes, as normally occurs in change detection.
- *
- * See {@link Pipe} and {@link keyValDiff} documentation for more details.
- *
- * ```
- * @Directive({
- * selector: '[class-set]',
- * properties: {
- * 'classChanges': 'classSet | keyValDiff'
- * }
- * })
- * class ClassSet {
- * set classChanges(changes:KeyValueChanges) {
- * // This will get called every time the `class-set` expressions changes its structure.
- * }
- * }
- * ```
- *
- * The template that this directive is used in may also contain its own pipes. For example:
- *
- * ```html
- *
- * ```
- *
- * In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
- *
- */
- properties?: Object;
-
- /**
- * Specifies which DOM hostListeners a directive listens to.
- *
- * The `hostListeners` property defines a set of `event` to `method` key-value pairs:
- *
- * - `event1`: the DOM event that the directive listens to.
- * - `statement`: the statement to execute when the event occurs.
- * If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM event.
- *
- * To listen to global events, a target must be added to the event name.
- * The target can be `window`, `document` or `body`.
- *
- * When writing a directive event binding, you can also refer to the following local variables:
- * - `$event`: Current event object which triggered the event.
- * - `$target`: The source of the event. This will be either a DOM element or an Angular directive.
- * (will be implemented in later release)
- *
- *
- * ## Syntax
- *
- * ```
- * @Directive({
- * hostListeners: {
- * 'event1': 'onMethod1(arguments)',
- * 'target:event2': 'onMethod2(arguments)',
- * ...
- * }
- * }
- * ```
- *
- * ## Basic Event Binding:
- *
- * Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
- * You would define the event binding as follows:
- *
- * ```
- * @Directive({
- * selector: 'input',
- * hostListeners: {
- * 'change': 'onChange($event)',
- * 'window:resize': 'onResize($event)'
- * }
- * })
- * class InputDirective {
- * onChange(event:Event) {
- * }
- * onResize(event:Event) {
- * }
- * }
- * ```
- *
- * Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event.
- *
- */
- hostListeners?: Object;
-
- /**
- * Defines the set of injectable objects that are visible to a Component and its children.
- *
- * The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's
- * injector.
- *
- * When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
- * the Component `injectables` annotation. The injectable objects then become available for injection to the component
- * itself and any of the directives in the component's template, i.e. they are not available to the directives which
- * are children in the component's light DOM.
- *
- *
- * The syntax for configuring the `injectables` injectable is identical to {@link Injector} injectable configuration.
- * See {@link Injector} for additional detail.
- *
- *
- * ## Simple Example
- *
- * Here is an example of a class that can be injected:
- *
- * ```
- * class Greeter {
- * greet(name:string) {
- * return 'Hello ' + name + '!';
- * }
- * }
- *
* @Component({
- * selector: 'greet',
- * injectables: [
- * Greeter
- * ]
+ * selector: 'greet'
* })
* @View({
- * template: `{{greeter.greet('world')}}!`,
- * directives: Child
+ * template: 'Hello {{name}}!',
+ * directives: [GreetUser, Bold]
* })
- * class HelloWorld {
- * greeter:Greeter;
+ * class Greet {
+ * name: string;
*
- * constructor(greeter:Greeter) {
- * this.greeter = greeter;
+ * constructor() {
+ * this.name = 'World';
* }
* }
* ```
*/
- injectables?: List
;
+ function View(arg: _ViewArg): (target: any) => any;
+ interface _ViewArg {
+ /**
+ * Specifies a template URL for an angular component.
+ *
+ * NOTE: either `templateUrl` or `template` should be used, but not both.
+ */
+ templateUrl?: string;
- /**
- * Specifies a set of lifecycle hostListeners in which the directive participates.
- *
- * See {@link onChange}, {@link onDestroy}, {@link onAllChangesDone} for details.
- */
- lifecycle?: List;
+ /**
+ * Specifies an inline template for an angular component.
+ *
+ * NOTE: either `templateUrl` or `template` should be used, but not both.
+ */
+ template?: string;
+
+ /**
+ * Specifies a list of directives that can be used within a template.
+ *
+ * Directives must be listed explicitly to provide proper component encapsulation.
+ *
+ * ## Example
+ *
+ * ```javascript
+ * @Component({
+ * selector: 'my-component'
+ * })
+ * @View({
+ * directives: [For]
+ * template: '
+ * '
+ * })
+ * class MyComponent {
+ * }
+ * ```
+ */
+ // TODO(tbosch): use Type | Binding | List when Dart supports union types,
+ // as otherwise we would need to import Binding type and Dart would warn
+ // for an unused import.
+ directives?: List>;
+
+ /**
+ * Specify a custom renderer for this View.
+ * If this is set, neither `template`, `templateURL` nor `directives` are used.
+ */
+ renderer?: string;
+ }
+
+ class ViewAnnotation {
+ }
- /**
- * Defines the used change detection strategy.
- *
- * When a component is instantiated, Angular creates a change detector, which is responsible for propagating
- * the component's bindings.
- *
- * The `changeDetection` property defines, whether the change detection will be checked every time or only when the component
- * tells it to do so.
- */
- changeDetection?: string;
-}
-interface _ViewArg {
- /**
- * Specifies a template URL for an angular component.
- *
- * NOTE: either `templateUrl` or `template` should be used, but not both.
- */
- templateUrl?: string;
-
- /**
- * Specifies an inline template for an angular component.
- *
- * NOTE: either `templateUrl` or `template` should be used, but not both.
- */
- template?: string;
-
- /**
- * Specifies a list of directives that can be used within a template.
- *
- * Directives must be listed explicitly to provide proper component encapsulation.
- */
- directives?: List;
-}
-
-declare module "angular2/angular2" {
/**
* Bootstrapping for Angular applications.
- *
- * You instantiate an Angular application by explicitly specifying a component to use as the root component for your
+ *
+ * You instantiate an Angular application by explicitly specifying a component to use as the root
+ * component for your
* application via the `bootstrap()` method.
- *
+ *
* ## Simple Example
- *
+ *
* Assuming this `index.html`:
- *
+ *
* ```html
*
*
@@ -302,15 +1107,19 @@ declare module "angular2/angular2" {
*
*