diff --git a/public/docs/js/latest/api/annotations/Attribute-var.jade b/public/docs/js/latest/api/annotations/Attribute-var.jade deleted file mode 100644 index 1b66965e81..0000000000 --- a/public/docs/js/latest/api/annotations/Attribute-var.jade +++ /dev/null @@ -1,12 +0,0 @@ - -.l-main-section - h2 Attribute variable - p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/decorators.ts (line 391) - - :markdown - Attribute factory function. - - - diff --git a/public/docs/js/latest/api/annotations/AttributeAnnotation-class.jade b/public/docs/js/latest/api/annotations/AttributeAnnotation-class.jade deleted file mode 100644 index 72661cdad0..0000000000 --- a/public/docs/js/latest/api/annotations/AttributeAnnotation-class.jade +++ /dev/null @@ -1,98 +0,0 @@ - -p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations_impl/di.ts (line 3) - -:markdown - Specifies that a constant attribute value should be injected. - - The directive can inject constant string literals of host element attributes. - - ## Example - - Suppose we have an `` element and want to know its `type`. - - ```html - - ``` - - A decorator can inject string literal `text` like so: - - ```javascript - @Directive({ - selector: `input' - }) - class InputDirective { - constructor(@Attribute('type') type) { - // type would be `text` in this example - } - } - ``` - - - -.l-main-section - h2 Annotations - .l-sub-section - h3.annotation CONST - pre.prettyprint - code. - @CONST() - - -.l-main-section - h2 Members - .l-sub-section - h3 constructor - - - pre.prettyprint - code. - constructor(attributeName: string) - - :markdown - - - - - - - .l-sub-section - h3 attributeName - - - :markdown - - - - - - - - .l-sub-section - h3 token - - - :markdown - - - - - - - - .l-sub-section - h3 toString - - - pre.prettyprint - code. - toString() - - :markdown - - - - - - diff --git a/public/docs/js/latest/api/annotations/AttributeFactory-interface.jade b/public/docs/js/latest/api/annotations/AttributeFactory-interface.jade deleted file mode 100644 index c90a44cd49..0000000000 --- a/public/docs/js/latest/api/annotations/AttributeFactory-interface.jade +++ /dev/null @@ -1,52 +0,0 @@ - -p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/decorators.ts (line 243) - -:markdown - Attribute factory for creating annotations, decorators or DSL. - - ## Example as TypeScript Decorator - - ``` - import {Attribute, Component, View} from "angular2/angular2"; - - @Component({...}) - @View({...}) - class MyComponent { - constructor(@Attribute('title') title: string) { - ... - } - } - ``` - - ## Example as ES5 DSL - - ``` - var MyComponent = ng - .Component({...}) - .View({...}) - .Class({ - constructor: [new ng.Attribute('title'), function(title) { - ... - }] - }) - ``` - - ## Example as ES5 annotation - - ``` - var MyComponent = function(title) { - ... - }; - - MyComponent.annotations = [ - new ng.Component({...}) - new ng.View({...}) - ] - MyComponent.parameters = [ - [new ng.Attribute('title')] - ] - ``` - - diff --git a/public/docs/js/latest/api/annotations/Component-var.jade b/public/docs/js/latest/api/annotations/Component-var.jade deleted file mode 100644 index de44bd2b83..0000000000 --- a/public/docs/js/latest/api/annotations/Component-var.jade +++ /dev/null @@ -1,12 +0,0 @@ - -.l-main-section - h2 Component variable - p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/decorators.ts (line 375) - - :markdown - Component factory function. - - - diff --git a/public/docs/js/latest/api/annotations/ComponentDecorator-interface.jade b/public/docs/js/latest/api/annotations/ComponentDecorator-interface.jade deleted file mode 100644 index 2a6cf0da19..0000000000 --- a/public/docs/js/latest/api/annotations/ComponentDecorator-interface.jade +++ /dev/null @@ -1,37 +0,0 @@ - -p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/decorators.ts (line 18) - -:markdown - Interface for the Component decorator function. - - See ComponentFactory. - - -.l-main-section - h2 Members - .l-sub-section - h3 View - - - pre.prettyprint - code. - View(obj: { - templateUrl?: string, - template?: string, - directives?: List<Type | any | List<any>>, - pipes?: List<Type | any | List<any>>, - renderer?: string, - styles?: List<string>, - styleUrls?: List<string>, - }) - - :markdown - Chain View annotation. - - - - - - diff --git a/public/docs/js/latest/api/annotations/ComponentFactory-interface.jade b/public/docs/js/latest/api/annotations/ComponentFactory-interface.jade deleted file mode 100644 index c65de71f00..0000000000 --- a/public/docs/js/latest/api/annotations/ComponentFactory-interface.jade +++ /dev/null @@ -1,49 +0,0 @@ - -p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/decorators.ts (line 111) - -:markdown - ComponentAnnotation factory for creating annotations, decorators or DSL. - - ## Example as TypeScript Decorator - - ``` - import {Component, View} from "angular2/angular2"; - - @Component({...}) - @View({...}) - class MyComponent { - constructor() { - ... - } - } - ``` - - ## Example as ES5 DSL - - ``` - var MyComponent = ng - .Component({...}) - .View({...}) - .Class({ - constructor: function() { - ... - } - }) - ``` - - ## Example as ES5 annotation - - ``` - var MyComponent = function() { - ... - }; - - MyComponent.annotations = [ - new ng.Component({...}) - new ng.View({...}) - ] - ``` - - diff --git a/public/docs/js/latest/api/annotations/Directive-var.jade b/public/docs/js/latest/api/annotations/Directive-var.jade deleted file mode 100644 index be0573e7cb..0000000000 --- a/public/docs/js/latest/api/annotations/Directive-var.jade +++ /dev/null @@ -1,12 +0,0 @@ - -.l-main-section - h2 Directive variable - p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/decorators.ts (line 380) - - :markdown - Directive factory function. - - - diff --git a/public/docs/js/latest/api/annotations/DirectiveAnnotation-class.jade b/public/docs/js/latest/api/annotations/DirectiveAnnotation-class.jade deleted file mode 100644 index 29f7b437ef..0000000000 --- a/public/docs/js/latest/api/annotations/DirectiveAnnotation-class.jade +++ /dev/null @@ -1,827 +0,0 @@ - -p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations_impl/annotations.ts (line 4) - -:markdown - Directives allow you to attach behavior to elements in the DOM. - - Directives with an embedded view are called Components. - - 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: - - 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor - arguments. - 2. Angular instantiates directives for each matched element using `ElementInjector` in a - depth-first order, - as declared in the HTML. - - ## Understanding How Injection Works - - There are three stages of injection resolution. - - *Pre-existing Injectors*: - - The terminal Injector cannot resolve dependencies. It either throws an error or, if - the dependency was - specified as `@Optional`, returns `null`. - - The platform injector resolves browser singleton resources, such as: cookies, title, - location, and others. - - *Component Injectors*: Each component instance has its own Injector, and they follow - the same parent-child hierarchy - as the component instances in the DOM. - - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each - element has an `ElementInjector` - which follow the same parent-child hierarchy as the DOM elements themselves. - - When a template is instantiated, it also must instantiate the corresponding directives in a - depth-first order. The - current `ElementInjector` resolves the constructor dependencies for each directive. - - Angular then resolves dependencies as follows, according to the order in which they appear in the - View: - - 1. Dependencies on the current element - 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary - 3. Dependencies on component injectors and their parents until it encounters the root component - 4. Dependencies on pre-existing injectors - - - The `ElementInjector` can inject other directives, element-specific special objects, or it can - delegate to the parent - injector. - - To inject other directives, declare the constructor parameter as: - - `directive:DirectiveType`: a directive on the current element only - - `@Host() directive:DirectiveType`: any directive that matches the type between the current - element and the - Shadow DOM root. - - `@Query(DirectiveType) query:QueryList`: A live collection of direct child - directives. - - `@QueryDescendants(DirectiveType) query:QueryList`: A live collection of any - child directives. - - 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 - Directive directives only - - `bindingPropagation: BindingPropagation` to control change detection in a more granular way. - - ## Example - - The following example demonstrates how dependency injection resolves constructor arguments in - practice. - - - Assume this HTML template: - - ``` -
-
-
-
-
-
-
-
-
-
- ``` - - With the following `dependency` decorator and `SomeService` injectable class. - - ``` - @Injectable() - class SomeService { - } - - @Directive({ - selector: '[dependency]', - properties: [ - 'id: dependency' - ] - }) - class Dependency { - id:string; - } - ``` - - Let's step through the different ways in which `MyDirective` could be declared... - - - ### No injection - - Here the constructor is declared with no arguments, therefore nothing is injected into - `MyDirective`. - - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor() { - } - } - ``` - - This directive would be instantiated with no dependencies. - - - ### Component-level injection - - Directives can inject any injectable instance from the closest component injector or any of its - parents. - - Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type - from the parent - component's injector. - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor(someService: SomeService) { - } - } - ``` - - This directive would be instantiated with a dependency on `SomeService`. - - - ### Injecting a directive from the current element - - Directives can inject other directives declared on the current element. - - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor(dependency: Dependency) { - expect(dependency.id).toEqual(3); - } - } - ``` - This directive would be instantiated with `Dependency` declared at the same element, in this case - `dependency="3"`. - - ### Injecting a directive from any ancestor elements - - Directives can inject other directives declared on any ancestor element (in the current Shadow - DOM), i.e. on the current element, the - parent element, or its parents. - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor(@Host() dependency: Dependency) { - expect(dependency.id).toEqual(2); - } - } - ``` - - `@Host` checks the current element, the parent, as well as its parents recursively. If - `dependency="2"` didn't - exist on the direct parent, this injection would - have returned - `dependency="1"`. - - - ### Injecting a live collection of direct child directives - - - A directive can also query for other child directives. Since parent directives are instantiated - before child directives, a directive can't simply inject the list of child directives. Instead, - the directive injects a QueryList, which updates its contents as children are added, - removed, or moved by a directive that uses a ViewContainerRef such as a `ng-for`, an - `ng-if`, or an `ng-switch`. - - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor(@Query(Dependency) dependencies:QueryList) { - } - } - ``` - - This directive would be instantiated with a QueryList which contains `Dependency` 4 and - 6. Here, `Dependency` 5 would not be included, because it is not a direct child. - - ### Injecting a live collection of descendant directives - - By passing the descendant flag to `@Query` above, we can include the children of the child - elements. - - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList) { - } - } - ``` - - This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6. - - ### Optional injection - - The normal behavior of directives is to return an error when a specified dependency cannot be - resolved. If you - would like to inject `null` on unresolved dependency instead, you can annotate that dependency - with `@Optional()`. - This explicitly permits the author of a template to treat some of the surrounding directives as - optional. - - ``` - @Directive({ selector: '[my-directive]' }) - class MyDirective { - constructor(@Optional() dependency:Dependency) { - } - } - ``` - - 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 `
` or any other element with the - `tooltip` selector, - like so: - - ``` -
- ``` - - Directives can also control the instantiation, destruction, and positioning of inline template - elements: - - A directive uses a ViewContainerRef to instantiate, insert, move, and destroy views at - runtime. - The ViewContainerRef is created as a result of `