diff --git a/public/docs/js/latest/api/annotations/Ancestor-class.jade b/public/docs/js/latest/api/annotations/Ancestor-class.jade index 07658eba0f..1397f550a4 100644 --- a/public/docs/js/latest/api/annotations/Ancestor-class.jade +++ b/public/docs/js/latest/api/annotations/Ancestor-class.jade @@ -1,7 +1,7 @@ p.location-badge. exported from angular2/annotations - defined in angular2/src/core/annotations/visibility.js (line 105) + defined in angular2/src/core/annotations_impl/visibility.js (line 105) :markdown Specifies that an injector should retrieve a dependency from any ancestor element. @@ -14,7 +14,7 @@ p.location-badge. Here is a simple directive that retrieves a dependency from an ancestor element. ``` - @Decorator({ + @Directive({ selector: '[dependency]', properties: { 'id':'dependency' @@ -25,7 +25,7 @@ p.location-badge. } - @Decorator({ + @Directive({ selector: '[my-directive]' }) class Dependency { diff --git a/public/docs/js/latest/api/annotations/Attribute-class.jade b/public/docs/js/latest/api/annotations/Attribute-class.jade index 7c58ac6f61..68a8010a4b 100644 --- a/public/docs/js/latest/api/annotations/Attribute-class.jade +++ b/public/docs/js/latest/api/annotations/Attribute-class.jade @@ -1,7 +1,7 @@ p.location-badge. exported from angular2/annotations - defined in angular2/src/core/annotations/di.js (line 31) + defined in angular2/src/core/annotations_impl/di.js (line 31) :markdown Specifies that a constant attribute value should be injected. @@ -19,10 +19,10 @@ p.location-badge. 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 } @@ -50,6 +50,7 @@ p.location-badge. :markdown + @@ -61,6 +62,7 @@ p.location-badge. :markdown + diff --git a/public/docs/js/latest/api/annotations/Component-class.jade b/public/docs/js/latest/api/annotations/Component-class.jade index a07946ea59..cf6bcf58ff 100644 --- a/public/docs/js/latest/api/annotations/Component-class.jade +++ b/public/docs/js/latest/api/annotations/Component-class.jade @@ -1,7 +1,7 @@ p.location-badge. exported from angular2/annotations - defined in angular2/src/core/annotations/annotations.js (line 547) + defined in angular2/src/core/annotations_impl/annotations.js (line 732) :markdown Declare reusable UI building blocks for an application. @@ -36,6 +36,51 @@ p.location-badge. } ``` + + Dynamically loading a component at runtime: + + Regular Angular components are statically resolved. Dynamic components allows to resolve a component at runtime + instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded, + the dynamically-loaded component becomes permanent and cannot be changed. + Dynamic components are declared just like components, but without a `@View` annotation. + + + ## Example + + Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component + `DynamicComp` requests loading of the `HelloCmp` component. + + There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static + locations. + + ``` + @Component({ + selector: 'dynamic-comp' + }) + class DynamicComp { + helloCmp:HelloCmp; + constructor(loader:DynamicComponentLoader, location:ElementRef) { + loader.load(HelloCmp, location).then((helloCmp) => { + this.helloCmp = helloCmp; + }); + } + } + + @Component({ + selector: 'hello-cmp' + }) + @View({ + template: "{{greeting}}" + }) + class HelloCmp { + greeting:string; + constructor() { + this.greeting = "hello"; + } + } + ``` + + .l-main-section h2 Members .l-sub-section @@ -52,7 +97,8 @@ p.location-badge. hostProperties, injectables, lifecycle, - changeDetection = DEFAULT + changeDetection = DEFAULT, + compileChildren = true, }:{ selector:string, properties:Object, @@ -61,7 +107,8 @@ p.location-badge. hostProperties:any, injectables:List, lifecycle:List, - changeDetection:string + changeDetection:string, + compileChildren:boolean }={}) :markdown @@ -75,6 +122,7 @@ p.location-badge. :markdown + Defines the used change detection strategy. When a component is instantiated, Angular creates a change detector, which is responsible for propagating @@ -92,6 +140,7 @@ p.location-badge. :markdown + 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 diff --git a/public/docs/js/latest/api/annotations/Decorator-class.jade b/public/docs/js/latest/api/annotations/Decorator-class.jade deleted file mode 100644 index 39a879cb36..0000000000 --- a/public/docs/js/latest/api/annotations/Decorator-class.jade +++ /dev/null @@ -1,105 +0,0 @@ - -p.location-badge. - exported from angular2/annotations - defined in angular2/src/core/annotations/annotations.js (line 787) - -:markdown - 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 Directives. - - are best used as a composition pattern () - - Decorators differ from Components 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 `
` or any other element with the `tooltip` selector, - like so: - - ``` -
- ``` - -.l-main-section - h2 Members - .l-sub-section - h3 constructor - - - pre.prettyprint - code. - constructor({ - selector, - properties, - events, - hostListeners, - hostProperties, - lifecycle, - compileChildren = true, - }:{ - selector:string, - properties:any, - events:List, - hostListeners:any, - hostProperties:any, - lifecycle:List, - compileChildren:boolean - }={}) - - :markdown - - - - - - .l-sub-section - h3 compileChildren - - - :markdown - If set to true the compiler does not compile the children of this directive. - - - - diff --git a/public/docs/js/latest/api/annotations/Directive-class.jade b/public/docs/js/latest/api/annotations/Directive-class.jade index 872cdf526d..a714392c37 100644 --- a/public/docs/js/latest/api/annotations/Directive-class.jade +++ b/public/docs/js/latest/api/annotations/Directive-class.jade @@ -1,13 +1,12 @@ p.location-badge. exported from angular2/annotations - defined in angular2/src/core/annotations/annotations.js (line 240) + defined in angular2/src/core/annotations_impl/annotations.js (line 371) :markdown Directives allow you to attach behavior to elements in the DOM. - Directive is an abstract concept, instead use concrete directives: Component, DynamicComponent, Decorator - or Viewport. + 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: @@ -52,8 +51,8 @@ p.location-badge. - `@Descendants query:Query`: A live collection of any child directives (will be implemented in later relaese). To inject element-specific special objects, declare the constructor parameter as: - - `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming) - - `viewContainer: ViewContainerRef` to control child template instantiation, for Viewport directives only + - `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 @@ -83,7 +82,7 @@ p.location-badge. class SomeService { } - @Decorator({ + @Directive({ selector: '[dependency]', properties: { 'id':'dependency' @@ -102,7 +101,7 @@ p.location-badge. 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() { } @@ -119,7 +118,7 @@ p.location-badge. 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) { } @@ -134,7 +133,7 @@ p.location-badge. 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); @@ -151,7 +150,7 @@ p.location-badge. the dependency. ``` - @Decorator({ selector: '[my-directive]' }) + @Directive({ selector: '[my-directive]' }) class MyDirective { constructor(@Parent() dependency: Dependency) { expect(dependency.id).toEqual(2); @@ -168,7 +167,7 @@ p.location-badge. 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); @@ -186,11 +185,11 @@ p.location-badge. 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 any - Viewport directive such as a `for`, an `if`, or a `switch`. + injects a QueryList, which updates its contents as children are added, removed, or moved by a directive + that uses a 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) { } @@ -207,7 +206,7 @@ p.location-badge. 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) { } @@ -223,7 +222,7 @@ p.location-badge. 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) { } @@ -233,6 +232,139 @@ p.location-badge. 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 `