diff --git a/public/docs/js/latest/api/core/AbstractBindingError-class.jade b/public/docs/js/latest/api/core/AbstractBindingError-class.jade index 0972ccde49..6f15b0fe41 100644 --- a/public/docs/js/latest/api/core/AbstractBindingError-class.jade +++ b/public/docs/js/latest/api/core/AbstractBindingError-class.jade @@ -1,14 +1,16 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/di/exceptions.ts (line 28) + defined in angular2/src/core/di/exceptions.ts (line 28) :markdown - Starting point to import all public core APIs. + Base class for all errors arising from misconfigured bindings. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,74 +18,52 @@ p.location-badge. constructor(injector: Injector, key: Key, constructResolvingMessage: Function) :markdown - - .l-sub-section - h3 name + h3#message message :markdown - - .l-sub-section - h3 message + h3#keys keys :markdown - - .l-sub-section - h3 keys + h3#injectors injectors :markdown - - .l-sub-section - h3 injectors + h3#constructResolvingMessage constructResolvingMessage :markdown - - .l-sub-section - h3 constructResolvingMessage - - - :markdown - - - - - - - - .l-sub-section - h3 addKey + h3#addKey addKey pre.prettyprint @@ -91,20 +71,16 @@ p.location-badge. addKey(injector: Injector, key: Key) :markdown - - .l-sub-section - h3 context + h3#context context :markdown - - diff --git a/public/docs/js/latest/api/core/AbstractControl-class.jade b/public/docs/js/latest/api/core/AbstractControl-class.jade index ed2fcd1051..c26829a75b 100644 --- a/public/docs/js/latest/api/core/AbstractControl-class.jade +++ b/public/docs/js/latest/api/core/AbstractControl-class.jade @@ -1,14 +1,16 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/forms/model.ts (line 37) + defined in angular2/src/core/forms/model.ts (line 38) :markdown - Starting point to import all public core APIs. + Omitting from external API doc as this is really an abstract internal concept. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,134 +18,112 @@ p.location-badge. constructor(validator: Function) :markdown - - .l-sub-section - h3 validator + h3#validator validator :markdown - - .l-sub-section - h3 value + h3#value value :markdown - - .l-sub-section - h3 status + h3#status status :markdown - - .l-sub-section - h3 valid + h3#valid valid :markdown - - .l-sub-section - h3 errors + h3#errors errors :markdown - - .l-sub-section - h3 pristine + h3#pristine pristine :markdown - - .l-sub-section - h3 dirty + h3#dirty dirty :markdown - - .l-sub-section - h3 touched + h3#touched touched :markdown - - .l-sub-section - h3 untouched + h3#untouched untouched :markdown - - .l-sub-section - h3 valueChanges + h3#valueChanges valueChanges :markdown - - .l-sub-section - h3 markAsTouched + h3#markAsTouched markAsTouched pre.prettyprint @@ -151,15 +131,13 @@ p.location-badge. markAsTouched() :markdown - - .l-sub-section - h3 markAsDirty + h3#markAsDirty markAsDirty pre.prettyprint @@ -167,15 +145,13 @@ p.location-badge. markAsDirty({onlySelf}?: {onlySelf?: boolean}) :markdown - - .l-sub-section - h3 setParent + h3#setParent setParent pre.prettyprint @@ -183,15 +159,13 @@ p.location-badge. setParent(parent: ControlGroup | ControlArray) :markdown - - .l-sub-section - h3 updateValidity + h3#updateValidity updateValidity pre.prettyprint @@ -199,15 +173,13 @@ p.location-badge. updateValidity({onlySelf}?: {onlySelf?: boolean}) :markdown - - .l-sub-section - h3 updateValueAndValidity + h3#updateValueAndValidity updateValueAndValidity pre.prettyprint @@ -215,15 +187,13 @@ p.location-badge. updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) :markdown - - .l-sub-section - h3 find + h3#find find pre.prettyprint @@ -231,15 +201,13 @@ p.location-badge. find(path: Array<string | number>| string) :markdown - - .l-sub-section - h3 getError + h3#getError getError pre.prettyprint @@ -247,15 +215,13 @@ p.location-badge. getError(errorCode: string, path?: string[]) :markdown - - .l-sub-section - h3 hasError + h3#hasError hasError pre.prettyprint @@ -263,8 +229,6 @@ p.location-badge. hasError(errorCode: string, path?: string[]) :markdown - - diff --git a/public/docs/js/latest/api/core/AbstractControlDirective-class.jade b/public/docs/js/latest/api/core/AbstractControlDirective-class.jade index af028edeba..2dae00df4a 100644 --- a/public/docs/js/latest/api/core/AbstractControlDirective-class.jade +++ b/public/docs/js/latest/api/core/AbstractControlDirective-class.jade @@ -4,100 +4,83 @@ p.location-badge. defined in angular2/src/core/forms/directives/abstract_control_directive.ts (line 1) :markdown - Starting point to import all public core APIs. .l-main-section h2 Members .l-sub-section - h3 control + h3#control control :markdown - - .l-sub-section - h3 value + h3#value value :markdown - - .l-sub-section - h3 valid + h3#valid valid :markdown - - .l-sub-section - h3 errors + h3#errors errors :markdown - - .l-sub-section - h3 pristine + h3#pristine pristine :markdown - - .l-sub-section - h3 dirty + h3#dirty dirty :markdown - - .l-sub-section - h3 touched + h3#touched touched :markdown - - .l-sub-section - h3 untouched + h3#untouched untouched :markdown - - diff --git a/public/docs/js/latest/api/core/AfterContentChecked-class.jade b/public/docs/js/latest/api/core/AfterContentChecked-class.jade deleted file mode 100644 index f252e10d34..0000000000 --- a/public/docs/js/latest/api/core/AfterContentChecked-class.jade +++ /dev/null @@ -1,24 +0,0 @@ - -p.location-badge. - exported from angular2/core - defined in angular2/src/core/compiler/interfaces.ts (line 124) - -:markdown - Starting point to import all public core APIs. -.l-main-section - h2 Members - .l-sub-section - h3 afterContentChecked - - - pre.prettyprint - code. - afterContentChecked() - - :markdown - - - - - - diff --git a/public/docs/js/latest/api/core/AfterContentChecked-interface.jade b/public/docs/js/latest/api/core/AfterContentChecked-interface.jade new file mode 100644 index 0000000000..033185b180 --- /dev/null +++ b/public/docs/js/latest/api/core/AfterContentChecked-interface.jade @@ -0,0 +1,35 @@ + +p.location-badge. + exported from angular2/core + defined in angular2/src/core/compiler/interfaces.ts (line 125) + +:markdown + Notify a directive when the bindings of all its content children have been checked (whether + they have changed or not). + + ## Example + + ``` + @Component(...) + class MyComponent implements AfterContentChecked { + afterContentChecked(): void { + } + } + ``` + + +.l-main-section + h2 Members + .l-sub-section + h3#afterContentChecked afterContentChecked + + + pre.prettyprint + code. + afterContentChecked() + + :markdown + + + + diff --git a/public/docs/js/latest/api/core/AfterContentInit-class.jade b/public/docs/js/latest/api/core/AfterContentInit-class.jade deleted file mode 100644 index a0f1177bb4..0000000000 --- a/public/docs/js/latest/api/core/AfterContentInit-class.jade +++ /dev/null @@ -1,24 +0,0 @@ - -p.location-badge. - exported from angular2/core - defined in angular2/src/core/compiler/interfaces.ts (line 106) - -:markdown - Starting point to import all public core APIs. -.l-main-section - h2 Members - .l-sub-section - h3 afterContentInit - - - pre.prettyprint - code. - afterContentInit() - - :markdown - - - - - - diff --git a/public/docs/js/latest/api/core/AfterContentInit-interface.jade b/public/docs/js/latest/api/core/AfterContentInit-interface.jade new file mode 100644 index 0000000000..e2ce10fba9 --- /dev/null +++ b/public/docs/js/latest/api/core/AfterContentInit-interface.jade @@ -0,0 +1,35 @@ + +p.location-badge. + exported from angular2/core + defined in angular2/src/core/compiler/interfaces.ts (line 109) + +:markdown + Notify a directive when the bindings of all its content children have been checked the first + time (whether they have changed or not). + + ## Example + + ``` + @Component(...) + class MyComponent implements AfterContentInit { + afterContentInit(): void { + } + } + ``` + + +.l-main-section + h2 Members + .l-sub-section + h3#afterContentInit afterContentInit + + + pre.prettyprint + code. + afterContentInit() + + :markdown + + + + diff --git a/public/docs/js/latest/api/core/AfterViewChecked-class.jade b/public/docs/js/latest/api/core/AfterViewChecked-class.jade deleted file mode 100644 index dad9c50f62..0000000000 --- a/public/docs/js/latest/api/core/AfterViewChecked-class.jade +++ /dev/null @@ -1,24 +0,0 @@ - -p.location-badge. - exported from angular2/core - defined in angular2/src/core/compiler/interfaces.ts (line 160) - -:markdown - Starting point to import all public core APIs. -.l-main-section - h2 Members - .l-sub-section - h3 afterViewChecked - - - pre.prettyprint - code. - afterViewChecked() - - :markdown - - - - - - diff --git a/public/docs/js/latest/api/core/AfterViewChecked-interface.jade b/public/docs/js/latest/api/core/AfterViewChecked-interface.jade new file mode 100644 index 0000000000..97337f2ad1 --- /dev/null +++ b/public/docs/js/latest/api/core/AfterViewChecked-interface.jade @@ -0,0 +1,35 @@ + +p.location-badge. + exported from angular2/core + defined in angular2/src/core/compiler/interfaces.ts (line 157) + +:markdown + Notify a directive when the bindings of all its view children have been checked (whether they + have changed or not). + + ## Example + + ``` + @Component(...) + class MyComponent implements AfterViewChecked { + afterViewChecked(): void { + } + } + ``` + + +.l-main-section + h2 Members + .l-sub-section + h3#afterViewChecked afterViewChecked + + + pre.prettyprint + code. + afterViewChecked() + + :markdown + + + + diff --git a/public/docs/js/latest/api/core/AfterViewInit-class.jade b/public/docs/js/latest/api/core/AfterViewInit-class.jade deleted file mode 100644 index 3358362fed..0000000000 --- a/public/docs/js/latest/api/core/AfterViewInit-class.jade +++ /dev/null @@ -1,24 +0,0 @@ - -p.location-badge. - exported from angular2/core - defined in angular2/src/core/compiler/interfaces.ts (line 142) - -:markdown - Starting point to import all public core APIs. -.l-main-section - h2 Members - .l-sub-section - h3 afterViewInit - - - pre.prettyprint - code. - afterViewInit() - - :markdown - - - - - - diff --git a/public/docs/js/latest/api/core/AfterViewInit-interface.jade b/public/docs/js/latest/api/core/AfterViewInit-interface.jade new file mode 100644 index 0000000000..3d44d70069 --- /dev/null +++ b/public/docs/js/latest/api/core/AfterViewInit-interface.jade @@ -0,0 +1,35 @@ + +p.location-badge. + exported from angular2/core + defined in angular2/src/core/compiler/interfaces.ts (line 141) + +:markdown + Notify a directive when the bindings of all its view children have been checked the first time + (whether they have changed or not). + + ## Example + + ``` + @Component(...) + class MyComponent implements AfterViewInit { + afterViewInit(): void { + } + } + ``` + + +.l-main-section + h2 Members + .l-sub-section + h3#afterViewInit afterViewInit + + + pre.prettyprint + code. + afterViewInit() + + :markdown + + + + diff --git a/public/docs/js/latest/api/core/AppRootUrl-class.jade b/public/docs/js/latest/api/core/AppRootUrl-class.jade index d5619f8a82..2b928fa1bd 100644 --- a/public/docs/js/latest/api/core/AppRootUrl-class.jade +++ b/public/docs/js/latest/api/core/AppRootUrl-class.jade @@ -4,7 +4,15 @@ p.location-badge. defined in angular2/src/core/services/app_root_url.ts (line 2) :markdown - Starting point to import all public core APIs. + Specifies app root url for the application. + + Used by the Compiler when resolving HTML and CSS template URLs. + + This interface can be overridden by the application developer to create custom behavior. + + See Compiler + + .l-main-section h2 Annotations @@ -18,7 +26,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -26,14 +34,12 @@ p.location-badge. constructor(value: string) :markdown - - .l-sub-section - h3 value + h3#value value :markdown diff --git a/public/docs/js/latest/api/core/AppViewManager-interface.jade b/public/docs/js/latest/api/core/AppViewManager-interface.jade index d5a0785d74..9a1d199fb7 100644 --- a/public/docs/js/latest/api/core/AppViewManager-interface.jade +++ b/public/docs/js/latest/api/core/AppViewManager-interface.jade @@ -4,7 +4,11 @@ p.location-badge. defined in angular2/src/core/compiler/view_manager.ts (line 19) :markdown - Starting point to import all public core APIs. + Entry point for creating, moving views in the view hierarchy and destroying views. + This manager contains all recursion and delegates to helper methods + in AppViewManagerUtils and the Renderer, so unit tests get simpler. + + .l-main-section h2 Annotations @@ -18,7 +22,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 getViewContainer + h3#getViewContainer getViewContainer pre.prettyprint @@ -35,7 +39,7 @@ p.location-badge. .l-sub-section - h3 getHostElement + h3#getHostElement getHostElement pre.prettyprint @@ -52,7 +56,7 @@ p.location-badge. .l-sub-section - h3 getNamedElementInComponentView + h3#getNamedElementInComponentView getNamedElementInComponentView pre.prettyprint @@ -75,7 +79,7 @@ p.location-badge. .l-sub-section - h3 getComponent + h3#getComponent getComponent pre.prettyprint @@ -95,7 +99,7 @@ p.location-badge. .l-sub-section - h3 createRootHostView + h3#createRootHostView createRootHostView pre.prettyprint @@ -163,7 +167,7 @@ p.location-badge. .l-sub-section - h3 destroyRootHostView + h3#destroyRootHostView destroyRootHostView pre.prettyprint @@ -180,7 +184,7 @@ p.location-badge. .l-sub-section - h3 createEmbeddedViewInContainer + h3#createEmbeddedViewInContainer createEmbeddedViewInContainer pre.prettyprint @@ -197,7 +201,7 @@ p.location-badge. .l-sub-section - h3 createHostViewInContainer + h3#createHostViewInContainer createHostViewInContainer pre.prettyprint @@ -214,7 +218,7 @@ p.location-badge. .l-sub-section - h3 destroyViewInContainer + h3#destroyViewInContainer destroyViewInContainer pre.prettyprint @@ -231,7 +235,7 @@ p.location-badge. .l-sub-section - h3 attachViewInContainer + h3#attachViewInContainer attachViewInContainer pre.prettyprint @@ -248,7 +252,7 @@ p.location-badge. .l-sub-section - h3 detachViewInContainer + h3#detachViewInContainer detachViewInContainer pre.prettyprint diff --git a/public/docs/js/latest/api/core/ApplicationRef-interface.jade b/public/docs/js/latest/api/core/ApplicationRef-interface.jade index 341dbb2084..52368f0f52 100644 --- a/public/docs/js/latest/api/core/ApplicationRef-interface.jade +++ b/public/docs/js/latest/api/core/ApplicationRef-interface.jade @@ -1,18 +1,28 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/application_ref.ts (line 3) + defined in angular2/src/core/application_ref.ts (line 242) :markdown - Starting point to import all public core APIs. + Represents an Angular application. + + Use to retrieve the application Injector or to bootstrap new + components at the root of the application. Can also be used to dispose + of the entire application and all its loaded components. + + .l-main-section h2 Members .l-sub-section - h3 hostComponentType + h3#registerBootstrapListener registerBootstrapListener + pre.prettyprint + code. + registerBootstrapListener(listener: (ref: ComponentRef) => void) + :markdown - Returns the current ComponentMetadata type. + Register a listener to be called each time a new root component type is bootstrapped. @@ -21,11 +31,16 @@ p.location-badge. .l-sub-section - h3 hostComponent + h3#bootstrap bootstrap + pre.prettyprint + code. + bootstrap(componentType: Type, bindings?: Array<Type | Binding | any[]>) + :markdown - Returns the current ComponentMetadata instance. + Bootstrap a new component at the root level of the application, optionally with + component specific bindings. @@ -34,7 +49,33 @@ p.location-badge. .l-sub-section - h3 dispose + h3#injector injector + + + :markdown + Retrieve the application Injector. + + + + + + + + .l-sub-section + h3#zone zone + + + :markdown + Retrieve the application NgZone. + + + + + + + + .l-sub-section + h3#dispose dispose pre.prettyprint @@ -42,22 +83,6 @@ p.location-badge. dispose() :markdown - Dispose (un-load) the application. - - - - - - - - .l-sub-section - h3 injector - - - :markdown - Returns the root application Injector. - - diff --git a/public/docs/js/latest/api/core/AsyncPipe-class.jade b/public/docs/js/latest/api/core/AsyncPipe-class.jade index 0aa8b4e0fe..5c28c80a84 100644 --- a/public/docs/js/latest/api/core/AsyncPipe-class.jade +++ b/public/docs/js/latest/api/core/AsyncPipe-class.jade @@ -4,7 +4,31 @@ p.location-badge. defined in angular2/src/core/pipes/async_pipe.ts (line 35) :markdown - Starting point to import all public core APIs. + The `async` pipe subscribes to an Observable or Promise and returns the latest value it has + emitted. + When a new value is emitted, the `async` pipe marks the component to be checked for changes. + + # Example + The example below binds the `time` Observable to the view. Every 500ms, the `time` Observable + updates the view with the current time. + + ``` + import {Observable} from 'angular2/core'; + @Component({ + selector: "task-cmp" + }) + @View({ + template: "Time: {{ time | async }}" + }) + class Task { + time = new Observable(observer => { + setInterval(_ => + observer.next(new Date().getTime()), 500); + }); + } + ``` + + .l-main-section h2 Annotations @@ -25,7 +49,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -33,14 +57,12 @@ p.location-badge. constructor(_ref: ChangeDetectorRef) :markdown - - .l-sub-section - h3 onDestroy + h3#onDestroy onDestroy pre.prettyprint @@ -48,15 +70,13 @@ p.location-badge. onDestroy() :markdown - - .l-sub-section - h3 transform + h3#transform transform pre.prettyprint @@ -64,8 +84,6 @@ p.location-badge. transform(obj: Observable | Promise<any>, args?: any[]) :markdown - - diff --git a/public/docs/js/latest/api/core/Attribute-var.jade b/public/docs/js/latest/api/core/Attribute-var.jade index a273151216..39850af2aa 100644 --- a/public/docs/js/latest/api/core/Attribute-var.jade +++ b/public/docs/js/latest/api/core/Attribute-var.jade @@ -2,7 +2,7 @@ .l-main-section p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata.ts (line 503) + defined in angular2/src/core/metadata.ts (line 507) :markdown AttributeMetadata factory function. diff --git a/public/docs/js/latest/api/core/AttributeFactory-interface.jade b/public/docs/js/latest/api/core/AttributeFactory-interface.jade index cccae3edc6..ba1048c5af 100644 --- a/public/docs/js/latest/api/core/AttributeFactory-interface.jade +++ b/public/docs/js/latest/api/core/AttributeFactory-interface.jade @@ -1,7 +1,52 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata.ts (line 278) + defined in angular2/src/core/metadata.ts (line 282) :markdown - Starting point to import all public core APIs. + AttributeMetadata 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/core/AttributeMetadata-class.jade b/public/docs/js/latest/api/core/AttributeMetadata-class.jade index 09805fead7..f331e27b3a 100644 --- a/public/docs/js/latest/api/core/AttributeMetadata-class.jade +++ b/public/docs/js/latest/api/core/AttributeMetadata-class.jade @@ -4,14 +4,39 @@ p.location-badge. defined in angular2/src/core/metadata/di.ts (line 9) :markdown - Starting point to import all public core APIs. + 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-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -19,38 +44,32 @@ p.location-badge. constructor(attributeName: string) :markdown - - .l-sub-section - h3 attributeName + h3#attributeName attributeName :markdown - - .l-sub-section - h3 token + h3#token token :markdown - - .l-sub-section - h3 toString + h3#toString toString pre.prettyprint @@ -58,8 +77,6 @@ p.location-badge. toString() :markdown - - diff --git a/public/docs/js/latest/api/core/Binding-class.jade b/public/docs/js/latest/api/core/Binding-class.jade index 340feaeffa..ebfc549c78 100644 --- a/public/docs/js/latest/api/core/Binding-class.jade +++ b/public/docs/js/latest/api/core/Binding-class.jade @@ -4,14 +4,28 @@ p.location-badge. defined in angular2/src/core/di/binding.ts (line 41) :markdown - Starting point to import all public core APIs. + Describes how_ the Injector should instantiate a given token. + + See bind. + + ## Example + + ```javascript + var injector = Injector.resolveAndCreate([ + new Binding(String, { toValue: 'Hello' }) + ]); + + expect(injector.get(String)).toEqual('Hello'); + ``` + + .l-main-section h2 Annotations .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -26,14 +40,12 @@ p.location-badge. }) :markdown - - .l-sub-section - h3 token + h3#token token :markdown @@ -46,7 +58,7 @@ p.location-badge. .l-sub-section - h3 toClass + h3#toClass toClass :markdown @@ -87,7 +99,7 @@ p.location-badge. .l-sub-section - h3 toValue + h3#toValue toValue :markdown @@ -110,7 +122,7 @@ p.location-badge. .l-sub-section - h3 toAlias + h3#toAlias toAlias :markdown @@ -153,7 +165,7 @@ p.location-badge. .l-sub-section - h3 toFactory + h3#toFactory toFactory :markdown @@ -179,7 +191,7 @@ p.location-badge. .l-sub-section - h3 dependencies + h3#dependencies dependencies :markdown @@ -206,7 +218,7 @@ p.location-badge. .l-sub-section - h3 multi + h3#multi multi :markdown diff --git a/public/docs/js/latest/api/core/BindingBuilder-class.jade b/public/docs/js/latest/api/core/BindingBuilder-class.jade index 9e045d8fde..5d8f26c290 100644 --- a/public/docs/js/latest/api/core/BindingBuilder-class.jade +++ b/public/docs/js/latest/api/core/BindingBuilder-class.jade @@ -4,11 +4,13 @@ p.location-badge. defined in angular2/src/core/di/binding.ts (line 305) :markdown - Starting point to import all public core APIs. + Helper class for the bind function. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,26 +18,22 @@ p.location-badge. constructor(token: any) :markdown - - .l-sub-section - h3 token + h3#token token :markdown - - .l-sub-section - h3 toClass + h3#toClass toClass pre.prettyprint @@ -79,7 +77,7 @@ p.location-badge. .l-sub-section - h3 toValue + h3#toValue toValue pre.prettyprint @@ -106,7 +104,7 @@ p.location-badge. .l-sub-section - h3 toAlias + h3#toAlias toAlias pre.prettyprint @@ -154,7 +152,7 @@ p.location-badge. .l-sub-section - h3 toFactory + h3#toFactory toFactory pre.prettyprint diff --git a/public/docs/js/latest/api/core/BindingWithVisibility-class.jade b/public/docs/js/latest/api/core/BindingWithVisibility-class.jade index c58b5a3923..17169d02cc 100644 --- a/public/docs/js/latest/api/core/BindingWithVisibility-class.jade +++ b/public/docs/js/latest/api/core/BindingWithVisibility-class.jade @@ -4,11 +4,10 @@ p.location-badge. defined in angular2/src/core/di/injector.ts (line 381) :markdown - Starting point to import all public core APIs. .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,38 +15,32 @@ p.location-badge. constructor(binding: ResolvedBinding, visibility: Visibility) :markdown - - .l-sub-section - h3 binding + h3#binding binding :markdown - - .l-sub-section - h3 visibility + h3#visibility visibility :markdown - - .l-sub-section - h3 getKeyId + h3#getKeyId getKeyId pre.prettyprint @@ -55,8 +48,6 @@ p.location-badge. getKeyId() :markdown - - diff --git a/public/docs/js/latest/api/core/By-class.jade b/public/docs/js/latest/api/core/By-class.jade index b348afe474..fd00713f7c 100644 --- a/public/docs/js/latest/api/core/By-class.jade +++ b/public/docs/js/latest/api/core/By-class.jade @@ -4,4 +4,3 @@ p.location-badge. defined in angular2/src/core/debug/debug_element.ts (line 184) :markdown - Starting point to import all public core APIs. diff --git a/public/docs/js/latest/api/core/CORE_DIRECTIVES-const.jade b/public/docs/js/latest/api/core/CORE_DIRECTIVES-const.jade index b5d2139a65..b97ef84586 100644 --- a/public/docs/js/latest/api/core/CORE_DIRECTIVES-const.jade +++ b/public/docs/js/latest/api/core/CORE_DIRECTIVES-const.jade @@ -2,7 +2,7 @@ .l-main-section p.location-badge. exported from angular2/core - defined in angular2/src/core/directives.ts (line 63) + defined in angular2/src/core/directives.ts (line 64) :markdown A collection of the Angular core directives that are likely to be used in each and every Angular diff --git a/public/docs/js/latest/api/core/ChangeDetectionError-class.jade b/public/docs/js/latest/api/core/ChangeDetectionError-class.jade index f43c8e2639..2b8f969670 100644 --- a/public/docs/js/latest/api/core/ChangeDetectionError-class.jade +++ b/public/docs/js/latest/api/core/ChangeDetectionError-class.jade @@ -4,11 +4,15 @@ p.location-badge. defined in angular2/src/core/change_detection/exceptions.ts (line 17) :markdown - Starting point to import all public core APIs. + Thrown when an expression evaluation raises an exception. + + This error wraps the original exception, this is done to attach expression location information. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,14 +20,12 @@ p.location-badge. constructor(exp: string, originalException: any, originalStack: any, context: any) :markdown - - .l-sub-section - h3 location + h3#location location :markdown diff --git a/public/docs/js/latest/api/core/ChangeDetectionStrategy-enum.jade b/public/docs/js/latest/api/core/ChangeDetectionStrategy-enum.jade index b5ed873763..4a08f94508 100644 --- a/public/docs/js/latest/api/core/ChangeDetectionStrategy-enum.jade +++ b/public/docs/js/latest/api/core/ChangeDetectionStrategy-enum.jade @@ -4,11 +4,10 @@ p.location-badge. defined in angular2/src/core/change_detection/constants.ts (line 8) :markdown - Starting point to import all public core APIs. .l-main-section h2 Members .l-sub-section - h3 CheckOnce + h3#CheckOnce CheckOnce :markdown @@ -22,7 +21,7 @@ p.location-badge. .l-sub-section - h3 Checked + h3#Checked Checked :markdown @@ -36,7 +35,7 @@ p.location-badge. .l-sub-section - h3 CheckAlways + h3#CheckAlways CheckAlways :markdown @@ -50,7 +49,7 @@ p.location-badge. .l-sub-section - h3 Detached + h3#Detached Detached :markdown @@ -64,7 +63,7 @@ p.location-badge. .l-sub-section - h3 OnPush + h3#OnPush OnPush :markdown @@ -77,7 +76,7 @@ p.location-badge. .l-sub-section - h3 Default + h3#Default Default :markdown @@ -90,7 +89,7 @@ p.location-badge. .l-sub-section - h3 OnPushObserve + h3#OnPushObserve OnPushObserve :markdown diff --git a/public/docs/js/latest/api/core/ChangeDetector-interface.jade b/public/docs/js/latest/api/core/ChangeDetector-interface.jade index e0110a03d1..c5b97a09cc 100644 --- a/public/docs/js/latest/api/core/ChangeDetector-interface.jade +++ b/public/docs/js/latest/api/core/ChangeDetector-interface.jade @@ -4,47 +4,40 @@ p.location-badge. defined in angular2/src/core/change_detection/interfaces.ts (line 55) :markdown - Starting point to import all public core APIs. .l-main-section h2 Members .l-sub-section - h3 parent + h3#parent parent :markdown - - .l-sub-section - h3 mode + h3#mode mode :markdown - - .l-sub-section - h3 ref + h3#ref ref :markdown - - .l-sub-section - h3 addChild + h3#addChild addChild pre.prettyprint @@ -52,15 +45,13 @@ p.location-badge. addChild(cd: ChangeDetector) :markdown - - .l-sub-section - h3 addShadowDomChild + h3#addShadowDomChild addShadowDomChild pre.prettyprint @@ -68,15 +59,13 @@ p.location-badge. addShadowDomChild(cd: ChangeDetector) :markdown - - .l-sub-section - h3 removeChild + h3#removeChild removeChild pre.prettyprint @@ -84,15 +73,13 @@ p.location-badge. removeChild(cd: ChangeDetector) :markdown - - .l-sub-section - h3 removeShadowDomChild + h3#removeShadowDomChild removeShadowDomChild pre.prettyprint @@ -100,15 +87,13 @@ p.location-badge. removeShadowDomChild(cd: ChangeDetector) :markdown - - .l-sub-section - h3 remove + h3#remove remove pre.prettyprint @@ -116,15 +101,13 @@ p.location-badge. remove() :markdown - - .l-sub-section - h3 hydrate + h3#hydrate hydrate pre.prettyprint @@ -132,15 +115,13 @@ p.location-badge. hydrate(context: any, locals: Locals, directives: any, pipes: any) :markdown - - .l-sub-section - h3 dehydrate + h3#dehydrate dehydrate pre.prettyprint @@ -148,15 +129,13 @@ p.location-badge. dehydrate() :markdown - - .l-sub-section - h3 markPathToRootAsCheckOnce + h3#markPathToRootAsCheckOnce markPathToRootAsCheckOnce pre.prettyprint @@ -164,15 +143,13 @@ p.location-badge. markPathToRootAsCheckOnce() :markdown - - .l-sub-section - h3 handleEvent + h3#handleEvent handleEvent pre.prettyprint @@ -180,15 +157,13 @@ p.location-badge. handleEvent(eventName: string, elIndex: number, locals: Locals) :markdown - - .l-sub-section - h3 detectChanges + h3#detectChanges detectChanges pre.prettyprint @@ -196,15 +171,13 @@ p.location-badge. detectChanges() :markdown - - .l-sub-section - h3 checkNoChanges + h3#checkNoChanges checkNoChanges pre.prettyprint @@ -212,8 +185,6 @@ p.location-badge. checkNoChanges() :markdown - - diff --git a/public/docs/js/latest/api/core/ChangeDetectorRef-interface.jade b/public/docs/js/latest/api/core/ChangeDetectorRef-interface.jade index 06e47c38e7..77bccd512c 100644 --- a/public/docs/js/latest/api/core/ChangeDetectorRef-interface.jade +++ b/public/docs/js/latest/api/core/ChangeDetectorRef-interface.jade @@ -1,14 +1,19 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/change_detection/change_detector_ref.ts (line 2) + defined in angular2/src/core/change_detection/change_detector_ref.ts (line 2) :markdown - Starting point to import all public core APIs. + Controls change detection. + + ChangeDetectorRef allows requesting checks for detectors that rely on observables. It + also allows detaching and attaching change detector subtrees. + + .l-main-section h2 Members .l-sub-section - h3 markForCheck + h3#markForCheck markForCheck pre.prettyprint @@ -25,7 +30,7 @@ p.location-badge. .l-sub-section - h3 detach + h3#detach detach pre.prettyprint @@ -44,7 +49,21 @@ p.location-badge. .l-sub-section - h3 reattach + h3#detectChanges detectChanges + + + pre.prettyprint + code. + detectChanges() + + :markdown + + + + + + .l-sub-section + h3#reattach reattach pre.prettyprint diff --git a/public/docs/js/latest/api/core/CheckboxControlValueAccessor-class.jade b/public/docs/js/latest/api/core/CheckboxControlValueAccessor-class.jade index 77733d6211..722ad4ac9d 100644 --- a/public/docs/js/latest/api/core/CheckboxControlValueAccessor-class.jade +++ b/public/docs/js/latest/api/core/CheckboxControlValueAccessor-class.jade @@ -4,7 +4,14 @@ p.location-badge. defined in angular2/src/core/forms/directives/checkbox_value_accessor.ts (line 9) :markdown - Starting point to import all public core APIs. + The accessor for writing a value and listening to changes on a checkbox input element. + + # Example + ``` + + ``` + + .l-main-section h2 Annotations @@ -31,7 +38,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -39,38 +46,32 @@ p.location-badge. constructor(cd: NgControl, _renderer: Renderer, _elementRef: ElementRef) :markdown - - .l-sub-section - h3 onChange + h3#onChange onChange :markdown - - .l-sub-section - h3 onTouched + h3#onTouched onTouched :markdown - - .l-sub-section - h3 writeValue + h3#writeValue writeValue pre.prettyprint @@ -78,87 +79,73 @@ p.location-badge. writeValue(value: any) :markdown - - .l-sub-section - h3 ngClassUntouched + h3#ngClassUntouched ngClassUntouched :markdown - - .l-sub-section - h3 ngClassTouched + h3#ngClassTouched ngClassTouched :markdown - - .l-sub-section - h3 ngClassPristine + h3#ngClassPristine ngClassPristine :markdown - - .l-sub-section - h3 ngClassDirty + h3#ngClassDirty ngClassDirty :markdown - - .l-sub-section - h3 ngClassValid + h3#ngClassValid ngClassValid :markdown - - .l-sub-section - h3 ngClassInvalid + h3#ngClassInvalid ngClassInvalid :markdown - - .l-sub-section - h3 registerOnChange + h3#registerOnChange registerOnChange pre.prettyprint @@ -166,15 +153,13 @@ p.location-badge. registerOnChange(fn: (_: any) => {}) :markdown - - .l-sub-section - h3 registerOnTouched + h3#registerOnTouched registerOnTouched pre.prettyprint @@ -182,8 +167,6 @@ p.location-badge. registerOnTouched(fn: () => {}) :markdown - - diff --git a/public/docs/js/latest/api/core/ClassDefinition-interface.jade b/public/docs/js/latest/api/core/ClassDefinition-interface.jade index 917f1fef31..fae48d445c 100644 --- a/public/docs/js/latest/api/core/ClassDefinition-interface.jade +++ b/public/docs/js/latest/api/core/ClassDefinition-interface.jade @@ -4,11 +4,13 @@ p.location-badge. defined in angular2/src/core/util/decorators.ts (line 1) :markdown - Starting point to import all public core APIs. + Declares the interface to be used with Class. + + .l-main-section h2 Members .l-sub-section - h3 extends? + h3#extends extends? :markdown @@ -21,7 +23,7 @@ p.location-badge. .l-sub-section - h3 constructor + h3#constructor constructor :markdown diff --git a/public/docs/js/latest/api/core/Compiler-interface.jade b/public/docs/js/latest/api/core/Compiler-interface.jade index f11d656d5a..445dc532a4 100644 --- a/public/docs/js/latest/api/core/Compiler-interface.jade +++ b/public/docs/js/latest/api/core/Compiler-interface.jade @@ -4,7 +4,26 @@ p.location-badge. defined in angular2/src/core/compiler/compiler.ts (line 71) :markdown - Starting point to import all public core APIs. + ## URL Resolution + + ``` + var appRootUrl: AppRootUrl = ...; + var componentUrlMapper: ComponentUrlMapper = ...; + var urlResolver: UrlResolver = ...; + + var componentType: Type = ...; + var componentAnnotation: ComponentAnnotation = ...; + var viewAnnotation: ViewAnnotation = ...; + + // Resolving a URL + + var url = viewAnnotation.templateUrl; + var componentUrl = componentUrlMapper.getUrl(componentType); + var componentResolvedUrl = urlResolver.resolve(appRootUrl.value, componentUrl); + var templateResolvedUrl = urlResolver.resolve(componetResolvedUrl, url); + ``` + + .l-main-section h2 Annotations @@ -18,7 +37,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 compileInHost + h3#compileInHost compileInHost pre.prettyprint @@ -26,8 +45,6 @@ p.location-badge. compileInHost(componentTypeOrBinding: Type | Binding) :markdown - - diff --git a/public/docs/js/latest/api/core/Component-var.jade b/public/docs/js/latest/api/core/Component-var.jade index 58107d3a77..f5c44fa716 100644 --- a/public/docs/js/latest/api/core/Component-var.jade +++ b/public/docs/js/latest/api/core/Component-var.jade @@ -2,7 +2,7 @@ .l-main-section p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata.ts (line 487) + defined in angular2/src/core/metadata.ts (line 491) :markdown ComponentMetadata factory function. diff --git a/public/docs/js/latest/api/core/ComponentDecorator-interface.jade b/public/docs/js/latest/api/core/ComponentDecorator-interface.jade index 1726af47b2..87b73e5ac1 100644 --- a/public/docs/js/latest/api/core/ComponentDecorator-interface.jade +++ b/public/docs/js/latest/api/core/ComponentDecorator-interface.jade @@ -4,11 +4,15 @@ p.location-badge. defined in angular2/src/core/metadata.ts (line 57) :markdown - Starting point to import all public core APIs. + Interface for the ComponentMetadata decorator function. + + See ComponentFactory. + + .l-main-section h2 Members .l-sub-section - h3 View + h3#View View pre.prettyprint diff --git a/public/docs/js/latest/api/core/ComponentFactory-interface.jade b/public/docs/js/latest/api/core/ComponentFactory-interface.jade index dba0dfc6df..33510de65e 100644 --- a/public/docs/js/latest/api/core/ComponentFactory-interface.jade +++ b/public/docs/js/latest/api/core/ComponentFactory-interface.jade @@ -1,7 +1,49 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata.ts (line 148) + defined in angular2/src/core/metadata.ts (line 148) :markdown - Starting point to import all public core APIs. + ComponentMetadata 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/core/ComponentMetadata-class.jade b/public/docs/js/latest/api/core/ComponentMetadata-class.jade index b2c54a42cb..894149edbb 100644 --- a/public/docs/js/latest/api/core/ComponentMetadata-class.jade +++ b/public/docs/js/latest/api/core/ComponentMetadata-class.jade @@ -1,43 +1,127 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata/directives.ts (line 722) + defined in angular2/src/core/metadata/directives.ts (line 745) :markdown - Starting point to import all public core APIs. + Declare reusable UI building blocks for an application. + + Each Angular component requires a single `@Component` and at least one `@View` annotation. The + `@Component` + annotation specifies when a component is instantiated, and which properties and hostListeners it + binds to. + + When a component is instantiated, Angular + - creates a shadow DOM for the component. + - loads the selected template into the shadow DOM. + - creates all the injectable objects configured with `bindings` and `viewBindings`. + + All template expressions and statements are then evaluated against the component instance. + + For details on the `@View` annotation, see ViewMetadata. + + ## Lifecycle hooks + + When the component class implements some undefined the callbacks are + called by the change detection at defined points in time during the life of the component. + + ## Example + + ``` + @Component({ + selector: 'greet' + }) + @View({ + template: 'Hello {{name}}!' + }) + class Greet { + name: string; + + constructor() { + this.name = 'World'; + } + } + ``` + + .l-main-section h2 Annotations .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint code. - constructor({selector, properties, events, host, exportAs, bindings, viewBindings, - changeDetection = ChangeDetectionStrategy.Default, compileChildren = true}?: { + constructor({selector, properties, events, host, dynamicLoadable, compiledHostTemplate, exportAs, + moduleId, bindings, viewBindings, changeDetection = ChangeDetectionStrategy.Default, + compileChildren = true}?: { selector?: string, properties?: string[], events?: string[], host?: StringMap<string, string>, + dynamicLoadable?: boolean, + compiledHostTemplate?: any, bindings?: any[], exportAs?: string, + moduleId?: string, compileChildren?: boolean, viewBindings?: any[], changeDetection?: ChangeDetectionStrategy, }) :markdown - - .l-sub-section - h3 changeDetection + h3#dynamicLoadable dynamicLoadable + + + :markdown + Declare that this component can be programatically loaded. + Every component that is used in bootstrap, routing, ... has to be + annotated with this. + + + + ``` + @Component({ + selector: 'root', + dynamicLoadable: true + }) + @View({ + template: 'hello world!' + }) + class RootComponent { + } + ``` + + + + + + + + .l-sub-section + h3#compiledHostTemplate compiledHostTemplate + + + :markdown + Used by build tools to store the compiled template. + Not intended to be used by a user. + + + + + + + + .l-sub-section + h3#changeDetection changeDetection :markdown @@ -56,11 +140,11 @@ p.location-badge. .l-sub-section - h3 viewBindings + h3#viewBindings viewBindings :markdown - Defines the set of injectable objects that are visible to its view dom children. + Defines the set of injectable objects that are visible to its view DOM children. ## Simple Example diff --git a/public/docs/js/latest/api/core/ComponentRef-interface.jade b/public/docs/js/latest/api/core/ComponentRef-interface.jade index dd847bccec..6abe4ad4d1 100644 --- a/public/docs/js/latest/api/core/ComponentRef-interface.jade +++ b/public/docs/js/latest/api/core/ComponentRef-interface.jade @@ -1,14 +1,18 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/compiler/dynamic_component_loader.ts (line 7) + defined in angular2/src/core/compiler/dynamic_component_loader.ts (line 11) :markdown - Starting point to import all public core APIs. + Angular's reference to a component instance. + + `ComponentRef` represents a component instance lifecycle and meta information. + + .l-main-section h2 Members .l-sub-section - h3 location + h3#location location :markdown @@ -21,7 +25,7 @@ p.location-badge. .l-sub-section - h3 instance + h3#instance instance :markdown @@ -34,7 +38,27 @@ p.location-badge. .l-sub-section - h3 hostView + h3#componentType componentType + + + :markdown + + + + + + .l-sub-section + h3#injector injector + + + :markdown + + + + + + .l-sub-section + h3#hostView hostView :markdown @@ -47,7 +71,27 @@ p.location-badge. .l-sub-section - h3 dispose + h3#hostComponentType hostComponentType + + + :markdown + + + + + + .l-sub-section + h3#hostComponent hostComponent + + + :markdown + + + + + + .l-sub-section + h3#dispose dispose pre.prettyprint diff --git a/public/docs/js/latest/api/core/ComponentUrlMapper-class.jade b/public/docs/js/latest/api/core/ComponentUrlMapper-class.jade index 141536f592..071e5db11c 100644 --- a/public/docs/js/latest/api/core/ComponentUrlMapper-class.jade +++ b/public/docs/js/latest/api/core/ComponentUrlMapper-class.jade @@ -4,7 +4,13 @@ p.location-badge. defined in angular2/src/core/compiler/component_url_mapper.ts (line 4) :markdown - Starting point to import all public core APIs. + Resolve a `Type` from a ComponentMetadata into a URL. + + This interface can be overridden by the application developer to create custom behavior. + + See Compiler + + .l-main-section h2 Annotations @@ -18,7 +24,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 getUrl + h3#getUrl getUrl pre.prettyprint diff --git a/public/docs/js/latest/api/core/Control-class.jade b/public/docs/js/latest/api/core/Control-class.jade index a42dd28dc2..1b56f72c8c 100644 --- a/public/docs/js/latest/api/core/Control-class.jade +++ b/public/docs/js/latest/api/core/Control-class.jade @@ -1,14 +1,19 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/forms/model.ts (line 135) + defined in angular2/src/core/forms/model.ts (line 132) :markdown - Starting point to import all public core APIs. + Defines a part of a form that cannot be divided into other controls. + + `Control` is one of the three fundamental building blocks used to define forms in Angular, along + with ControlGroup and ControlArray. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,14 +21,12 @@ p.location-badge. constructor(value?: any, validator?: Function) :markdown - - .l-sub-section - h3 updateValue + h3#updateValue updateValue pre.prettyprint @@ -32,15 +35,13 @@ p.location-badge. {onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean}) :markdown - - .l-sub-section - h3 registerOnChange + h3#registerOnChange registerOnChange pre.prettyprint @@ -48,8 +49,6 @@ p.location-badge. registerOnChange(fn: Function) :markdown - - diff --git a/public/docs/js/latest/api/core/ControlArray-class.jade b/public/docs/js/latest/api/core/ControlArray-class.jade index 8525967c30..4954526ca9 100644 --- a/public/docs/js/latest/api/core/ControlArray-class.jade +++ b/public/docs/js/latest/api/core/ControlArray-class.jade @@ -1,14 +1,24 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/forms/model.ts (line 249) + defined in angular2/src/core/forms/model.ts (line 238) :markdown - Starting point to import all public core APIs. + Defines a part of a form, of variable length, that can contain other controls. + + A `ControlArray` aggregates the values and errors of each Control in the group. Thus, if + one of the controls in a group is invalid, the entire group is invalid. Similarly, if a control + changes its value, the entire group changes as well. + + `ControlArray` is one of the three fundamental building blocks used to define forms in Angular, + along with Control and ControlGroup. ControlGroup can also contain + other controls, but is of fixed length. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,26 +26,22 @@ p.location-badge. constructor(controls: AbstractControl[], validator?: Function) :markdown - - .l-sub-section - h3 controls + h3#controls controls :markdown - - .l-sub-section - h3 at + h3#at at pre.prettyprint @@ -43,15 +49,13 @@ p.location-badge. at(index: number) :markdown - - .l-sub-section - h3 push + h3#push push pre.prettyprint @@ -59,15 +63,13 @@ p.location-badge. push(control: AbstractControl) :markdown - - .l-sub-section - h3 insert + h3#insert insert pre.prettyprint @@ -75,15 +77,13 @@ p.location-badge. insert(index: number, control: AbstractControl) :markdown - - .l-sub-section - h3 removeAt + h3#removeAt removeAt pre.prettyprint @@ -91,20 +91,16 @@ p.location-badge. removeAt(index: number) :markdown - - .l-sub-section - h3 length + h3#length length :markdown - - diff --git a/public/docs/js/latest/api/core/ControlContainer-class.jade b/public/docs/js/latest/api/core/ControlContainer-class.jade index fcc3bb1d19..b48e222529 100644 --- a/public/docs/js/latest/api/core/ControlContainer-class.jade +++ b/public/docs/js/latest/api/core/ControlContainer-class.jade @@ -4,40 +4,38 @@ p.location-badge. defined in angular2/src/core/forms/directives/control_container.ts (line 2) :markdown - Starting point to import all public core APIs. + A directive that contains multiple NgControl. + + Only used by the forms module. + + .l-main-section h2 Members .l-sub-section - h3 name + h3#name name :markdown - - .l-sub-section - h3 formDirective + h3#formDirective formDirective :markdown - - .l-sub-section - h3 path + h3#path path :markdown - - diff --git a/public/docs/js/latest/api/core/ControlGroup-class.jade b/public/docs/js/latest/api/core/ControlGroup-class.jade index dbc140e329..2e6843baca 100644 --- a/public/docs/js/latest/api/core/ControlGroup-class.jade +++ b/public/docs/js/latest/api/core/ControlGroup-class.jade @@ -1,14 +1,24 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/forms/model.ts (line 165) + defined in angular2/src/core/forms/model.ts (line 161) :markdown - Starting point to import all public core APIs. + Defines a part of a form, of fixed length, that can contain other controls. + + A `ControlGroup` aggregates the values and errors of each Control in the group. Thus, if + one of the controls in a group is invalid, the entire group is invalid. Similarly, if a control + changes its value, the entire group changes as well. + + `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular, + along with Control and ControlArray. ControlArray can also contain other + controls, but is of variable length. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,42 +26,36 @@ p.location-badge. constructor(controls: StringMap<string, AbstractControl>, optionals?: StringMap<string, boolean>, validator?: Function) :markdown - - .l-sub-section - h3 controls + h3#controls controls :markdown - - .l-sub-section - h3 addControl + h3#addControl addControl pre.prettyprint code. - addControl(name: string, c: AbstractControl) + addControl(name: string, control: AbstractControl) :markdown - - .l-sub-section - h3 removeControl + h3#removeControl removeControl pre.prettyprint @@ -59,15 +63,13 @@ p.location-badge. removeControl(name: string) :markdown - - .l-sub-section - h3 include + h3#include include pre.prettyprint @@ -75,15 +77,13 @@ p.location-badge. include(controlName: string) :markdown - - .l-sub-section - h3 exclude + h3#exclude exclude pre.prettyprint @@ -91,15 +91,13 @@ p.location-badge. exclude(controlName: string) :markdown - - .l-sub-section - h3 contains + h3#contains contains pre.prettyprint @@ -107,8 +105,6 @@ p.location-badge. contains(controlName: string) :markdown - - diff --git a/public/docs/js/latest/api/core/ControlValueAccessor-interface.jade b/public/docs/js/latest/api/core/ControlValueAccessor-interface.jade index 4b3cbb4599..541c7ca0c3 100644 --- a/public/docs/js/latest/api/core/ControlValueAccessor-interface.jade +++ b/public/docs/js/latest/api/core/ControlValueAccessor-interface.jade @@ -4,11 +4,15 @@ p.location-badge. defined in angular2/src/core/forms/directives/control_value_accessor.ts (line 1) :markdown - Starting point to import all public core APIs. + A bridge between a control and a native element. + + Please see DefaultValueAccessor for more information. + + .l-main-section h2 Members .l-sub-section - h3 writeValue + h3#writeValue writeValue pre.prettyprint @@ -16,15 +20,13 @@ p.location-badge. writeValue(obj: any) :markdown - - .l-sub-section - h3 registerOnChange + h3#registerOnChange registerOnChange pre.prettyprint @@ -32,15 +34,13 @@ p.location-badge. registerOnChange(fn: any) :markdown - - .l-sub-section - h3 registerOnTouched + h3#registerOnTouched registerOnTouched pre.prettyprint @@ -48,8 +48,6 @@ p.location-badge. registerOnTouched(fn: any) :markdown - - diff --git a/public/docs/js/latest/api/core/CurrencyPipe-class.jade b/public/docs/js/latest/api/core/CurrencyPipe-class.jade index 62ce6ad7a5..8bf724521f 100644 --- a/public/docs/js/latest/api/core/CurrencyPipe-class.jade +++ b/public/docs/js/latest/api/core/CurrencyPipe-class.jade @@ -4,7 +4,22 @@ p.location-badge. defined in angular2/src/core/pipes/number_pipe.ts (line 116) :markdown - Starting point to import all public core APIs. + WARNING: this pipe uses the Internationalization API. + Therefore it is only reliable in Chrome and Opera browsers. + + Formats a number as local currency. + + # Usage + + expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]] + + where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and + "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency + symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value + is `false`. + For more information about `digitInfo` see DecimalPipe + + .l-main-section h2 Annotations @@ -25,7 +40,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 transform + h3#transform transform pre.prettyprint @@ -33,8 +48,6 @@ p.location-badge. transform(value: any, args: any[]) :markdown - - diff --git a/public/docs/js/latest/api/core/CyclicDependencyError-class.jade b/public/docs/js/latest/api/core/CyclicDependencyError-class.jade index 0bc4568d23..7125f1cfed 100644 --- a/public/docs/js/latest/api/core/CyclicDependencyError-class.jade +++ b/public/docs/js/latest/api/core/CyclicDependencyError-class.jade @@ -1,14 +1,29 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/di/exceptions.ts (line 69) + defined in angular2/src/core/di/exceptions.ts (line 68) :markdown - Starting point to import all public core APIs. + Thrown when dependencies form a cycle. + + ## Example: + + ```javascript + class A { + constructor(b:B) {} + } + class B { + constructor(a:A) {} + } + ``` + + Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed. + + .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,8 +31,6 @@ p.location-badge. constructor(injector: Injector, key: Key) :markdown - - diff --git a/public/docs/js/latest/api/core/DEFAULT_PIPES-const.jade b/public/docs/js/latest/api/core/DEFAULT_PIPES-const.jade index 8e4b467349..d42b660e4e 100644 --- a/public/docs/js/latest/api/core/DEFAULT_PIPES-const.jade +++ b/public/docs/js/latest/api/core/DEFAULT_PIPES-const.jade @@ -5,6 +5,4 @@ defined in angular2/src/core/pipes/default_pipes.ts (line 26) :markdown - - diff --git a/public/docs/js/latest/api/core/DEFAULT_PIPES_TOKEN-const.jade b/public/docs/js/latest/api/core/DEFAULT_PIPES_TOKEN-const.jade index ee5c681c16..d1c1f61dfa 100644 --- a/public/docs/js/latest/api/core/DEFAULT_PIPES_TOKEN-const.jade +++ b/public/docs/js/latest/api/core/DEFAULT_PIPES_TOKEN-const.jade @@ -5,6 +5,4 @@ defined in angular2/src/core/pipes/default_pipes.ts (line 24) :markdown - - diff --git a/public/docs/js/latest/api/core/DOCUMENT-const.jade b/public/docs/js/latest/api/core/DOCUMENT-const.jade index 2cc99aaca8..8a5e75806b 100644 --- a/public/docs/js/latest/api/core/DOCUMENT-const.jade +++ b/public/docs/js/latest/api/core/DOCUMENT-const.jade @@ -5,6 +5,4 @@ defined in angular2/src/core/render/dom/dom_tokens.ts (line 4) :markdown - - diff --git a/public/docs/js/latest/api/core/DatePipe-class.jade b/public/docs/js/latest/api/core/DatePipe-class.jade index 036552379a..9fa9df2a51 100644 --- a/public/docs/js/latest/api/core/DatePipe-class.jade +++ b/public/docs/js/latest/api/core/DatePipe-class.jade @@ -4,7 +4,63 @@ p.location-badge. defined in angular2/src/core/pipes/date_pipe.ts (line 21) :markdown - Starting point to import all public core APIs. + WARNING: this pipe uses the Internationalization API. + Therefore it is only reliable in Chrome and Opera browsers. + + Formats a date value to a string based on the requested format. + + # Usage + + expression | date[:format] + + where `expression` is a date object or a number (milliseconds since UTC epoch) and + `format` indicates which date/time components to include: + + | Component | Symbol | Short Form | Long Form | Numeric | 2-digit | + |-----------|:------:|--------------|-------------------|-----------|-----------| + | era | G | G (AD) | GGGG (Anno Domini)| - | - | + | year | y | - | - | y (2015) | yy (15) | + | month | M | MMM (Sep) | MMMM (September) | M (9) | MM (09) | + | day | d | - | - | d (3) | dd (03) | + | weekday | E | EEE (Sun) | EEEE (Sunday) | - | - | + | hour | j | - | - | j (13) | jj (13) | + | hour12 | h | - | - | h (1 PM) | hh (01 PM)| + | hour24 | H | - | - | H (13) | HH (13) | + | minute | m | - | - | m (5) | mm (05) | + | second | s | - | - | s (9) | ss (09) | + | timezone | z | - | z (Pacific Standard Time)| - | - | + | timezone | Z | Z (GMT-8:00) | - | - | - | + + In javascript, only the components specified will be respected (not the ordering, + punctuations, ...) and details of the the formatting will be dependent on the locale. + On the other hand in Dart version, you can also include quoted text as well as some extra + date/time components such as quarter. For more information see: + https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/intl/intl.DateFormat. + + `format` can also be one of the following predefined formats: + + - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US) + - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US) + - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US) + - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010) + - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US) + - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US) + - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US) + - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US) + + Timezone of the formatted text will be the local system timezone of the end-users machine. + + # Examples + + Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11) + in the _local_ time and locale is 'en-US': + + {{ dateObj | date }} // output is 'Jun 15, 2015' + {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM' + {{ dateObj | date:'shortTime' }} // output is '9:43 PM' + {{ dateObj | date:'mmss' }} // output is '43:11' + + .l-main-section h2 Annotations @@ -25,7 +81,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 transform + h3#transform transform pre.prettyprint @@ -33,15 +89,13 @@ p.location-badge. transform(value: any, args: any[]) :markdown - - .l-sub-section - h3 supports + h3#supports supports pre.prettyprint @@ -49,8 +103,6 @@ p.location-badge. supports(obj: any) :markdown - - diff --git a/public/docs/js/latest/api/core/DebugElement-interface.jade b/public/docs/js/latest/api/core/DebugElement-interface.jade index 83cc0d7a4a..40fedc0b42 100644 --- a/public/docs/js/latest/api/core/DebugElement-interface.jade +++ b/public/docs/js/latest/api/core/DebugElement-interface.jade @@ -4,47 +4,45 @@ p.location-badge. defined in angular2/src/core/debug/debug_element.ts (line 9) :markdown - Starting point to import all public core APIs. + A DebugElement contains information from the Angular compiler about an + element and provides access to the corresponding ElementInjector and + underlying dom Element, as well as a way to query for children. + + .l-main-section h2 Members .l-sub-section - h3 componentInstance + h3#componentInstance componentInstance :markdown - - .l-sub-section - h3 nativeElement + h3#nativeElement nativeElement :markdown - - .l-sub-section - h3 elementRef + h3#elementRef elementRef :markdown - - .l-sub-section - h3 getDirectiveInstance + h3#getDirectiveInstance getDirectiveInstance pre.prettyprint @@ -52,15 +50,13 @@ p.location-badge. getDirectiveInstance(directiveIndex: number) :markdown - - .l-sub-section - h3 children + h3#children children :markdown @@ -72,7 +68,7 @@ p.location-badge. .l-sub-section - h3 componentViewChildren + h3#componentViewChildren componentViewChildren :markdown @@ -85,7 +81,7 @@ p.location-badge. .l-sub-section - h3 triggerEventHandler + h3#triggerEventHandler triggerEventHandler pre.prettyprint @@ -93,15 +89,13 @@ p.location-badge. triggerEventHandler(eventName: string, eventObj: Event) :markdown - - .l-sub-section - h3 hasDirective + h3#hasDirective hasDirective pre.prettyprint @@ -109,15 +103,13 @@ p.location-badge. hasDirective(type: Type) :markdown - - .l-sub-section - h3 inject + h3#inject inject pre.prettyprint @@ -125,15 +117,13 @@ p.location-badge. inject(type: Type) :markdown - - .l-sub-section - h3 getLocal + h3#getLocal getLocal pre.prettyprint @@ -141,15 +131,13 @@ p.location-badge. getLocal(name: string) :markdown - - .l-sub-section - h3 query + h3#query query pre.prettyprint @@ -166,7 +154,7 @@ p.location-badge. .l-sub-section - h3 queryAll + h3#queryAll queryAll pre.prettyprint diff --git a/public/docs/js/latest/api/core/DecimalPipe-class.jade b/public/docs/js/latest/api/core/DecimalPipe-class.jade index ab8513c4b3..497a179013 100644 --- a/public/docs/js/latest/api/core/DecimalPipe-class.jade +++ b/public/docs/js/latest/api/core/DecimalPipe-class.jade @@ -4,7 +4,34 @@ p.location-badge. defined in angular2/src/core/pipes/number_pipe.ts (line 56) :markdown - Starting point to import all public core APIs. + WARNING: this pipe uses the Internationalization API. + Therefore it is only reliable in Chrome and Opera browsers. + + Formats a number as local text. i.e. group sizing and seperator and other locale-specific + configurations are based on the active locale. + + # Usage + + expression | number[:digitInfo] + + where `expression` is a number and `digitInfo` has the following format: + + {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} + + - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1. + - minFractionDigits is the minimum number of digits after fraction. Defaults to 0. + - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3. + + For more information on the acceptable range for each of these numbers and other + details see your native internationalization library. + + # Examples + + {{ 123 | number }} // output is 123 + {{ 123.1 | number: '.2-3' }} // output is 123.10 + {{ 1 | number: '2.2' }} // output is 01.00 + + .l-main-section h2 Annotations @@ -25,7 +52,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 transform + h3#transform transform pre.prettyprint @@ -33,8 +60,6 @@ p.location-badge. transform(value: any, args: any[]) :markdown - - diff --git a/public/docs/js/latest/api/core/DefaultValidators-class.jade b/public/docs/js/latest/api/core/DefaultValidators-class.jade index 2598804721..5353dd1194 100644 --- a/public/docs/js/latest/api/core/DefaultValidators-class.jade +++ b/public/docs/js/latest/api/core/DefaultValidators-class.jade @@ -4,7 +4,6 @@ p.location-badge. defined in angular2/src/core/forms/directives/validators.ts (line 7) :markdown - Starting point to import all public core APIs. .l-main-section h2 Annotations diff --git a/public/docs/js/latest/api/core/DefaultValueAccessor-class.jade b/public/docs/js/latest/api/core/DefaultValueAccessor-class.jade index 547c80830a..d56e6f52cc 100644 --- a/public/docs/js/latest/api/core/DefaultValueAccessor-class.jade +++ b/public/docs/js/latest/api/core/DefaultValueAccessor-class.jade @@ -1,10 +1,18 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/forms/directives/default_value_accessor.ts (line 8) + defined in angular2/src/core/forms/directives/default_value_accessor.ts (line 8) :markdown - Starting point to import all public core APIs. + The default accessor for writing a value and listening to changes that is used by the + NgModel, NgFormControl, and NgControlName directives. + + # Example + ``` + + ``` + + .l-main-section h2 Annotations @@ -32,7 +40,7 @@ p.location-badge. .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -40,38 +48,32 @@ p.location-badge. constructor(cd: NgControl, _renderer: Renderer, _elementRef: ElementRef) :markdown - - .l-sub-section - h3 onChange + h3#onChange onChange :markdown - - .l-sub-section - h3 onTouched + h3#onTouched onTouched :markdown - - .l-sub-section - h3 writeValue + h3#writeValue writeValue pre.prettyprint @@ -79,87 +81,73 @@ p.location-badge. writeValue(value: any) :markdown - - .l-sub-section - h3 ngClassUntouched + h3#ngClassUntouched ngClassUntouched :markdown - - .l-sub-section - h3 ngClassTouched + h3#ngClassTouched ngClassTouched :markdown - - .l-sub-section - h3 ngClassPristine + h3#ngClassPristine ngClassPristine :markdown - - .l-sub-section - h3 ngClassDirty + h3#ngClassDirty ngClassDirty :markdown - - .l-sub-section - h3 ngClassValid + h3#ngClassValid ngClassValid :markdown - - .l-sub-section - h3 ngClassInvalid + h3#ngClassInvalid ngClassInvalid :markdown - - .l-sub-section - h3 registerOnChange + h3#registerOnChange registerOnChange pre.prettyprint @@ -167,15 +155,13 @@ p.location-badge. registerOnChange(fn: (_: any) => void) :markdown - - .l-sub-section - h3 registerOnTouched + h3#registerOnTouched registerOnTouched pre.prettyprint @@ -183,8 +169,6 @@ p.location-badge. registerOnTouched(fn: () => void) :markdown - - diff --git a/public/docs/js/latest/api/core/Dependency-class.jade b/public/docs/js/latest/api/core/Dependency-class.jade index f9b76f4a33..29d87f0d40 100644 --- a/public/docs/js/latest/api/core/Dependency-class.jade +++ b/public/docs/js/latest/api/core/Dependency-class.jade @@ -4,11 +4,10 @@ p.location-badge. defined in angular2/src/core/di/binding.ts (line 29) :markdown - Starting point to import all public core APIs. .l-main-section h2 Members .l-sub-section - h3 constructor + h3#constructor constructor pre.prettyprint @@ -16,67 +15,55 @@ p.location-badge. constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: any[]) :markdown - - .l-sub-section - h3 key + h3#key key :markdown - - .l-sub-section - h3 optional + h3#optional optional :markdown - - .l-sub-section - h3 lowerBoundVisibility + h3#lowerBoundVisibility lowerBoundVisibility :markdown - - .l-sub-section - h3 upperBoundVisibility + h3#upperBoundVisibility upperBoundVisibility :markdown - - .l-sub-section - h3 properties + h3#properties properties :markdown - - diff --git a/public/docs/js/latest/api/core/DependencyMetadata-class.jade b/public/docs/js/latest/api/core/DependencyMetadata-class.jade index 66c7f914a2..bee6f25fc3 100644 --- a/public/docs/js/latest/api/core/DependencyMetadata-class.jade +++ b/public/docs/js/latest/api/core/DependencyMetadata-class.jade @@ -1,22 +1,45 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/di/metadata.ts (line 34) + defined in angular2/src/core/di/metadata.ts (line 33) :markdown - Starting point to import all public core APIs. + `DependencyMetadata` is used by the framework to extend DI. + + Only metadata implementing `DependencyMetadata` are added to the list of dependency + properties. + + For example: + + ``` + class Exclude extends DependencyMetadata {} + class NotDependencyProperty {} + + class AComponent { + constructor(@Exclude @NotDependencyProperty aService:AService) {} + } + ``` + + will create the following dependency: + + ``` + new Dependency(Key.get(AService), [new Exclude()]) + ``` + + The framework can use `new Exclude()` to handle the `aService` dependency + in a specific way. + + .l-main-section h2 Annotations .l-main-section h2 Members .l-sub-section - h3 token + h3#token token :markdown - - diff --git a/public/docs/js/latest/api/core/DependencyProvider-interface.jade b/public/docs/js/latest/api/core/DependencyProvider-interface.jade index dc4a383dac..f5b9af2a34 100644 --- a/public/docs/js/latest/api/core/DependencyProvider-interface.jade +++ b/public/docs/js/latest/api/core/DependencyProvider-interface.jade @@ -4,11 +4,13 @@ p.location-badge. defined in angular2/src/core/di/injector.ts (line 387) :markdown - Starting point to import all public core APIs. + Used to provide dependencies that cannot be easily expressed as bindings. + + .l-main-section h2 Members .l-sub-section - h3 getDependency + h3#getDependency getDependency pre.prettyprint @@ -16,8 +18,6 @@ p.location-badge. getDependency(injector: Injector, binding: ResolvedBinding, dependency: Dependency) :markdown - - diff --git a/public/docs/js/latest/api/core/Directive-var.jade b/public/docs/js/latest/api/core/Directive-var.jade index a37919fcda..ef505d7779 100644 --- a/public/docs/js/latest/api/core/Directive-var.jade +++ b/public/docs/js/latest/api/core/Directive-var.jade @@ -2,7 +2,7 @@ .l-main-section p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata.ts (line 492) + defined in angular2/src/core/metadata.ts (line 496) :markdown DirectiveMetadata factory function. diff --git a/public/docs/js/latest/api/core/DirectiveDecorator-interface.jade b/public/docs/js/latest/api/core/DirectiveDecorator-interface.jade index 9baadb2779..4d9a3a5a43 100644 --- a/public/docs/js/latest/api/core/DirectiveDecorator-interface.jade +++ b/public/docs/js/latest/api/core/DirectiveDecorator-interface.jade @@ -4,4 +4,8 @@ p.location-badge. defined in angular2/src/core/metadata.ts (line 50) :markdown - Starting point to import all public core APIs. + Interface for the DirectiveMetadata decorator function. + + See DirectiveFactory. + + diff --git a/public/docs/js/latest/api/core/DirectiveFactory-interface.jade b/public/docs/js/latest/api/core/DirectiveFactory-interface.jade index d9bc872e07..0625624b77 100644 --- a/public/docs/js/latest/api/core/DirectiveFactory-interface.jade +++ b/public/docs/js/latest/api/core/DirectiveFactory-interface.jade @@ -4,4 +4,43 @@ p.location-badge. defined in angular2/src/core/metadata.ts (line 97) :markdown - Starting point to import all public core APIs. + DirectiveMetadata factory for creating annotations, decorators or DSL. + + ## Example as TypeScript Decorator + + ``` + import {Directive} from "angular2/angular2"; + + @Directive({...}) + class MyDirective { + constructor() { + ... + } + } + ``` + + ## Example as ES5 DSL + + ``` + var MyDirective = ng + .Directive({...}) + .Class({ + constructor: function() { + ... + } + }) + ``` + + ## Example as ES5 annotation + + ``` + var MyDirective = function() { + ... + }; + + MyDirective.annotations = [ + new ng.Directive({...}) + ] + ``` + + diff --git a/public/docs/js/latest/api/core/DirectiveMetadata-class.jade b/public/docs/js/latest/api/core/DirectiveMetadata-class.jade index 557b5f85b6..09e6144d9f 100644 --- a/public/docs/js/latest/api/core/DirectiveMetadata-class.jade +++ b/public/docs/js/latest/api/core/DirectiveMetadata-class.jade @@ -1,23 +1,401 @@ p.location-badge. exported from angular2/core - defined in angular2/src/core/metadata/directives.ts (line 3) + defined in angular2/src/core/metadata/directives.ts (line 3) :markdown - Starting point to import all public core APIs. + Directives allow you to attach behavior to elements in the DOM. + + DirectiveMetadatas with an embedded view are called ComponentMetadatas. + + 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 + ViewMetadata: + + 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 + DirectiveMetadata 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' + ], + host: { + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': '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 `