From 51ada60d91c913861eebc7ff8bbc7c70f5fd8e7c Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 13 Apr 2015 06:53:38 -0700 Subject: [PATCH 01/80] api example formatted --- .../docs/js/latest/api/annotations/_data.json | 5 + .../api/annotations/directive-class.jade | 315 ++++++++++++++++++ 2 files changed, 320 insertions(+) create mode 100644 public/docs/js/latest/api/annotations/_data.json create mode 100644 public/docs/js/latest/api/annotations/directive-class.jade diff --git a/public/docs/js/latest/api/annotations/_data.json b/public/docs/js/latest/api/annotations/_data.json new file mode 100644 index 0000000000..eff4776dad --- /dev/null +++ b/public/docs/js/latest/api/annotations/_data.json @@ -0,0 +1,5 @@ +{ + "directive-class": { + "title": "Directive Class" + } +} diff --git a/public/docs/js/latest/api/annotations/directive-class.jade b/public/docs/js/latest/api/annotations/directive-class.jade new file mode 100644 index 0000000000..6410da23c8 --- /dev/null +++ b/public/docs/js/latest/api/annotations/directive-class.jade @@ -0,0 +1,315 @@ +p. + 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]. + 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: + +p. + For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments. + Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML. + +.l-main-section + + h2 Understanding How Injection Works + + p There are three stages of injection resolution. + + dl + dt Pre-existing Injectors: + dd + ul + li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null. + li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others. + + dt Component Injectors: + dd Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM. + + dt Element Injectors: + dd Each component 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. + + + p 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. + + p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]: + + ol + li Dependencies on the current element + li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary + li Dependencies on component injectors and their parents until it encounters the root component + li Dependencies on pre-existing injectors + + p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector. + + p To inject other directives, declare the constructor parameter as: + + ul + li directive:DirectiveType: a directive on the current element only + li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored. + li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only. + li @Children query:Query: A live collection of direct child directives [TO BE IMPLEMENTED]. + li @Descendants query:Query: A live collection of any child directives [TO BE IMPLEMENTED]. + + p To inject element-specific special objects, declare the constructor parameter as: + + ul + li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming) + li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only + li bindingPropagation: BindingPropagation to control change detection in a more granular way. + +.l-main-section + h2 Example of Injection + + p The following example demonstrates how dependency injection resolves constructor arguments in practice. + + p Assume this HTML template: + + pre.prettyprint.linenums.lang-html + code. + <div dependency="1"> + <div dependency="2"> + <div dependency="3" my-directive> + <div dependency="4"> + <div dependency="5"></div> + </div> + <div dependency="6"></div> + </div> + </div> + </div> + + p With the following dependency decorator and SomeService injectable class. + + pre.prettyprint.linenums + code. + @Injectable() + class SomeService { + } + + @Decorator({ + selector: '[dependency]', + bind: { + 'id':'dependency' + } + }) + class Dependency { + id:string; + } + + p Let's step through the different ways in which MyDirective could be declared... + + .l-sub-section + h3 No injection + + p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor() { + } + } + + p This directive would be instantiated with no dependencies. + + .l-sub-section + h3 Component-level injection + + p Directives can inject any injectable instance from the closest component injector or any of its parents. + + p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(someService: SomeService) { + } + } + + p This directive would be instantiated with a dependency on SomeService. + + + .l-sub-section + h3 Injecting a directive from the current element + + p Directives can inject other directives declared on the current element. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(dependency: Dependency) { + expect(dependency.id).toEqual(3); + } + } + + p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3". + + + .l-sub-section + h3 Injecting a directive from a direct parent element + + p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Parent() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2". + + .l-sub-section + h3 Injecting a directive from any ancestor elements + + p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Ancestor() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p Unlike the @Parent which only checks the parent, @Ancestor checks 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". + + .l-sub-section + h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION] + p 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 asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child. + + .l-sub-section + h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION] + + p Similar to @Children above, but also includes the children of the child elements. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6. + + .l-sub-section + h3 Optional injection + + p 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. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Optional() dependency:Dependency) { + } + } + + p 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. + +.l-main-section + + h2 Members + + p + strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={}) + + .l-sub-section + h3 bind + + p Enumerates the set of properties that accept data binding for a directive. + + p The bind property defines a set of directiveProperty to bindingProperty key-value pairs: + + ul + li directiveProperty specifies the component property where the value is written. + li bindingProperty specifies the DOM property where the value is read from. + + p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component. + + +.l-main-section + h2 Syntax + + pre.prettyprint.linenums + code. + @Directive({ + bind: { + 'directiveProperty1': 'bindingProperty1', + 'directiveProperty2': 'bindingProperty2 | pipe1 | ...', + ... + } + } + +.l-main-section + h2 Basic Property Binding + + p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example: + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[tooltip]', + bind: { + 'text': 'tooltip' + } + }) + class Tooltip { + set text(text) { + // This will get called every time the 'tooltip' binding changes with the new value. + } + } + + p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below: + + pre.prettyprint.linenums + code. + <div [tooltip]="someExpression">...</div> + <div tooltip="Some Text">...</div> + + p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property. + +.l-main-section + h2 Bindings With Pipes + + p You can also use pipes when writing binding definitions for a directive. + + p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.) + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[class-set]', + bind: { + 'classChanges': 'classSet | keyValDiff' + } + }) + class ClassSet { + set classChanges(changes:KeyValueChanges) { + // This will get called every time the `class-set` expressions changes its structure. + } + } + + p The template that this directive is used in may also contain its own pipes. For example: + + pre.prettyprint.linenums + code. + <div [class-set]="someExpression | somePipe"> + + p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff. + +.location-badge exported from angular2/annotations \ No newline at end of file From f1000c591b53c98a358d611a5d99ce0a40bdd77c Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 13 Apr 2015 06:55:07 -0700 Subject: [PATCH 02/80] update list format --- .../js/latest/api/annotations/directive-class.jade | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/public/docs/js/latest/api/annotations/directive-class.jade b/public/docs/js/latest/api/annotations/directive-class.jade index 6410da23c8..127d1d5fd6 100644 --- a/public/docs/js/latest/api/annotations/directive-class.jade +++ b/public/docs/js/latest/api/annotations/directive-class.jade @@ -13,18 +13,15 @@ p. p There are three stages of injection resolution. - dl - dt Pre-existing Injectors: - dd + ol + li Pre-existing Injectors: ul li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null. li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others. - dt Component Injectors: - dd Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM. + li Component Injectors: Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM. - dt Element Injectors: - dd Each component 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. + li Element Injectors: Each component 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. p 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. From 7dca24cd6ec6a7533ae0372ca3169a6ff7a35888 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 13 Apr 2015 07:29:40 -0700 Subject: [PATCH 03/80] sub nav --- public/_includes/_docs-nav.jade | 7 +++++++ public/docs/js/latest/api/_data.json | 6 ++++++ public/docs/js/latest/api/annotations.jade | 1 + 3 files changed, 14 insertions(+) create mode 100644 public/docs/js/latest/api/_data.json create mode 100644 public/docs/js/latest/api/annotations.jade diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index afc4cacb13..2deb1268a0 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -12,3 +12,10 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav selected = current.path[3] == slug ? 'is-selected':'' li #{name} + + if selected + ul + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li #{slug} diff --git a/public/docs/js/latest/api/_data.json b/public/docs/js/latest/api/_data.json new file mode 100644 index 0000000000..c7bab4d51a --- /dev/null +++ b/public/docs/js/latest/api/_data.json @@ -0,0 +1,6 @@ +{ + "annotations": { + "icon": "query-builder", + "title": "Annotations" + } +} diff --git a/public/docs/js/latest/api/annotations.jade b/public/docs/js/latest/api/annotations.jade new file mode 100644 index 0000000000..6abfd1cc3d --- /dev/null +++ b/public/docs/js/latest/api/annotations.jade @@ -0,0 +1 @@ +h1 annotations home \ No newline at end of file From 43651ba8c1517ac1e15cbed0e00105133e7f8dd0 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 13 Apr 2015 23:03:13 -0700 Subject: [PATCH 04/80] secondary navigation --- public/_includes/_docs-nav.jade | 9 +- public/docs/js/latest/api/annotations.jade | 6 +- .../docs/js/latest/api/annotations/_data.json | 4 + .../api/annotations/component-class.jade | 312 ++++++++++++++++++ 4 files changed, 329 insertions(+), 2 deletions(-) create mode 100644 public/docs/js/latest/api/annotations/component-class.jade diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index 2deb1268a0..87e8909d85 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -18,4 +18,11 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data name = page.menuTitle || page.title selected = current.path[4] == slug ? 'is-selected':'' - li #{slug} + li #{slug} + + if selected + ul + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li #{slug} diff --git a/public/docs/js/latest/api/annotations.jade b/public/docs/js/latest/api/annotations.jade index 6abfd1cc3d..277bfb43a0 100644 --- a/public/docs/js/latest/api/annotations.jade +++ b/public/docs/js/latest/api/annotations.jade @@ -1 +1,5 @@ -h1 annotations home \ No newline at end of file +ul + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li #{slug} diff --git a/public/docs/js/latest/api/annotations/_data.json b/public/docs/js/latest/api/annotations/_data.json index eff4776dad..d7a58b7c6c 100644 --- a/public/docs/js/latest/api/annotations/_data.json +++ b/public/docs/js/latest/api/annotations/_data.json @@ -1,5 +1,9 @@ { "directive-class": { "title": "Directive Class" + }, + + "component-class": { + "title": "Component Class" } } diff --git a/public/docs/js/latest/api/annotations/component-class.jade b/public/docs/js/latest/api/annotations/component-class.jade new file mode 100644 index 0000000000..127d1d5fd6 --- /dev/null +++ b/public/docs/js/latest/api/annotations/component-class.jade @@ -0,0 +1,312 @@ +p. + 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]. + 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: + +p. + For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments. + Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML. + +.l-main-section + + h2 Understanding How Injection Works + + p There are three stages of injection resolution. + + ol + li Pre-existing Injectors: + ul + li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null. + li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others. + + li Component Injectors: Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM. + + li Element Injectors: Each component 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. + + + p 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. + + p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]: + + ol + li Dependencies on the current element + li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary + li Dependencies on component injectors and their parents until it encounters the root component + li Dependencies on pre-existing injectors + + p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector. + + p To inject other directives, declare the constructor parameter as: + + ul + li directive:DirectiveType: a directive on the current element only + li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored. + li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only. + li @Children query:Query: A live collection of direct child directives [TO BE IMPLEMENTED]. + li @Descendants query:Query: A live collection of any child directives [TO BE IMPLEMENTED]. + + p To inject element-specific special objects, declare the constructor parameter as: + + ul + li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming) + li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only + li bindingPropagation: BindingPropagation to control change detection in a more granular way. + +.l-main-section + h2 Example of Injection + + p The following example demonstrates how dependency injection resolves constructor arguments in practice. + + p Assume this HTML template: + + pre.prettyprint.linenums.lang-html + code. + <div dependency="1"> + <div dependency="2"> + <div dependency="3" my-directive> + <div dependency="4"> + <div dependency="5"></div> + </div> + <div dependency="6"></div> + </div> + </div> + </div> + + p With the following dependency decorator and SomeService injectable class. + + pre.prettyprint.linenums + code. + @Injectable() + class SomeService { + } + + @Decorator({ + selector: '[dependency]', + bind: { + 'id':'dependency' + } + }) + class Dependency { + id:string; + } + + p Let's step through the different ways in which MyDirective could be declared... + + .l-sub-section + h3 No injection + + p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor() { + } + } + + p This directive would be instantiated with no dependencies. + + .l-sub-section + h3 Component-level injection + + p Directives can inject any injectable instance from the closest component injector or any of its parents. + + p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(someService: SomeService) { + } + } + + p This directive would be instantiated with a dependency on SomeService. + + + .l-sub-section + h3 Injecting a directive from the current element + + p Directives can inject other directives declared on the current element. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(dependency: Dependency) { + expect(dependency.id).toEqual(3); + } + } + + p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3". + + + .l-sub-section + h3 Injecting a directive from a direct parent element + + p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Parent() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2". + + .l-sub-section + h3 Injecting a directive from any ancestor elements + + p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Ancestor() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p Unlike the @Parent which only checks the parent, @Ancestor checks 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". + + .l-sub-section + h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION] + p 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 asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child. + + .l-sub-section + h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION] + + p Similar to @Children above, but also includes the children of the child elements. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6. + + .l-sub-section + h3 Optional injection + + p 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. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Optional() dependency:Dependency) { + } + } + + p 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. + +.l-main-section + + h2 Members + + p + strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={}) + + .l-sub-section + h3 bind + + p Enumerates the set of properties that accept data binding for a directive. + + p The bind property defines a set of directiveProperty to bindingProperty key-value pairs: + + ul + li directiveProperty specifies the component property where the value is written. + li bindingProperty specifies the DOM property where the value is read from. + + p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component. + + +.l-main-section + h2 Syntax + + pre.prettyprint.linenums + code. + @Directive({ + bind: { + 'directiveProperty1': 'bindingProperty1', + 'directiveProperty2': 'bindingProperty2 | pipe1 | ...', + ... + } + } + +.l-main-section + h2 Basic Property Binding + + p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example: + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[tooltip]', + bind: { + 'text': 'tooltip' + } + }) + class Tooltip { + set text(text) { + // This will get called every time the 'tooltip' binding changes with the new value. + } + } + + p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below: + + pre.prettyprint.linenums + code. + <div [tooltip]="someExpression">...</div> + <div tooltip="Some Text">...</div> + + p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property. + +.l-main-section + h2 Bindings With Pipes + + p You can also use pipes when writing binding definitions for a directive. + + p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.) + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[class-set]', + bind: { + 'classChanges': 'classSet | keyValDiff' + } + }) + class ClassSet { + set classChanges(changes:KeyValueChanges) { + // This will get called every time the `class-set` expressions changes its structure. + } + } + + p The template that this directive is used in may also contain its own pipes. For example: + + pre.prettyprint.linenums + code. + <div [class-set]="someExpression | somePipe"> + + p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff. + +.location-badge exported from angular2/annotations \ No newline at end of file From 334d5e2edb74c2f2b034777182e363a4e406c22c Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 14 Apr 2015 05:22:14 -0700 Subject: [PATCH 05/80] secondary list --- public/_includes/_docs-nav.jade | 10 +-- public/resources/css/module/_side-nav.scss | 84 +++++++++++++++++++--- 2 files changed, 80 insertions(+), 14 deletions(-) diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index 87e8909d85..1ef80d2475 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -11,18 +11,18 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav name = page.menuTitle || page.title selected = current.path[3] == slug ? 'is-selected':'' - li #{name} + li(class="#{selected}") #{name} if selected - ul + ul.side-nav-secondary for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data name = page.menuTitle || page.title selected = current.path[4] == slug ? 'is-selected':'' - li #{slug} + li(class="#{selected}") #{slug} if selected - ul + ul.side-nav-tertiary for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data name = page.menuTitle || page.title selected = current.path[4] == slug ? 'is-selected':'' - li #{slug} + li(class="#{selected}") #{name} diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 9b0892e9fe..190271b129 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -91,6 +91,17 @@ padding: 0px; border-bottom: 1px solid $fog; + &.is-selected { + > a { + background: $fog; + color: $regal; + + .side-nav-icon { + color: $regal; + } + } + } + > a { line-height: ($unit * 6) - 1; padding: 0px ($unit * 2) 0px ($unit * 6); @@ -102,15 +113,6 @@ position: relative; text-decoration: none; display: block; - - &.is-selected { - background: $fog; - color: $regal; - - .side-nav-icon { - color: $regal; - } - } } .side-nav-icon { @@ -124,4 +126,68 @@ } } } + + + // SECONDARY SIDENAV BUTTON + .side-nav-secondary { + @extend .side-nav-primary; + background: $fog; + box-shadow: inset 0px 2px 2px rgba($coal, .24); + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + display: none; + } + + > li { + + &.is-selected { + > a { + background: transparent; + color: $regal; + } + } + + > a { + line-height: ($unit * 5) - 1; + padding: 0px ($unit * 2) 0px ($unit * 5); + font-size: 13px; + } + + .side-nav-icon { + position: absolute; + top: 0px; + left: 16px; + z-index: $layer-1; + font-size: 19px; + color: $cloud; + line-height: 47px; + } + } + } + + // SECONDARY SIDENAV BUTTON + .side-nav-tertiary { + padding-bottom: ($unit * 1); + margin: 0px 0px 0px ($unit * 2); + list-style-type: disc; + + > li { + &.is-selected { + > a { + background: transparent; + color: $coal; + } + } + + > a { + line-height: ($unit * 3) - 1; + font-size: 13px; + text-transform: none; + text-align: left; + margin: 0px; + } + } + } } \ No newline at end of file From 71a6c3b99b346ae8ff00a835081dcb0bea2a5a55 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 14 Apr 2015 08:11:02 -0700 Subject: [PATCH 06/80] more nav items --- public/docs/js/latest/api/_data.json | 4 + .../docs/js/latest/api/change-detection.jade | 5 + .../js/latest/api/change-detection/_data.json | 9 + .../api/change-detection/component-class.jade | 312 ++++++++++++++++++ .../api/change-detection/directive-class.jade | 312 ++++++++++++++++++ 5 files changed, 642 insertions(+) create mode 100644 public/docs/js/latest/api/change-detection.jade create mode 100644 public/docs/js/latest/api/change-detection/_data.json create mode 100644 public/docs/js/latest/api/change-detection/component-class.jade create mode 100644 public/docs/js/latest/api/change-detection/directive-class.jade diff --git a/public/docs/js/latest/api/_data.json b/public/docs/js/latest/api/_data.json index c7bab4d51a..9166701c01 100644 --- a/public/docs/js/latest/api/_data.json +++ b/public/docs/js/latest/api/_data.json @@ -2,5 +2,9 @@ "annotations": { "icon": "query-builder", "title": "Annotations" + }, + "change-detection": { + "icon": "query-builder", + "title": "Change Detection" } } diff --git a/public/docs/js/latest/api/change-detection.jade b/public/docs/js/latest/api/change-detection.jade new file mode 100644 index 0000000000..277bfb43a0 --- /dev/null +++ b/public/docs/js/latest/api/change-detection.jade @@ -0,0 +1,5 @@ +ul + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li #{slug} diff --git a/public/docs/js/latest/api/change-detection/_data.json b/public/docs/js/latest/api/change-detection/_data.json new file mode 100644 index 0000000000..d7a58b7c6c --- /dev/null +++ b/public/docs/js/latest/api/change-detection/_data.json @@ -0,0 +1,9 @@ +{ + "directive-class": { + "title": "Directive Class" + }, + + "component-class": { + "title": "Component Class" + } +} diff --git a/public/docs/js/latest/api/change-detection/component-class.jade b/public/docs/js/latest/api/change-detection/component-class.jade new file mode 100644 index 0000000000..127d1d5fd6 --- /dev/null +++ b/public/docs/js/latest/api/change-detection/component-class.jade @@ -0,0 +1,312 @@ +p. + 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]. + 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: + +p. + For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments. + Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML. + +.l-main-section + + h2 Understanding How Injection Works + + p There are three stages of injection resolution. + + ol + li Pre-existing Injectors: + ul + li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null. + li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others. + + li Component Injectors: Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM. + + li Element Injectors: Each component 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. + + + p 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. + + p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]: + + ol + li Dependencies on the current element + li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary + li Dependencies on component injectors and their parents until it encounters the root component + li Dependencies on pre-existing injectors + + p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector. + + p To inject other directives, declare the constructor parameter as: + + ul + li directive:DirectiveType: a directive on the current element only + li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored. + li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only. + li @Children query:Query: A live collection of direct child directives [TO BE IMPLEMENTED]. + li @Descendants query:Query: A live collection of any child directives [TO BE IMPLEMENTED]. + + p To inject element-specific special objects, declare the constructor parameter as: + + ul + li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming) + li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only + li bindingPropagation: BindingPropagation to control change detection in a more granular way. + +.l-main-section + h2 Example of Injection + + p The following example demonstrates how dependency injection resolves constructor arguments in practice. + + p Assume this HTML template: + + pre.prettyprint.linenums.lang-html + code. + <div dependency="1"> + <div dependency="2"> + <div dependency="3" my-directive> + <div dependency="4"> + <div dependency="5"></div> + </div> + <div dependency="6"></div> + </div> + </div> + </div> + + p With the following dependency decorator and SomeService injectable class. + + pre.prettyprint.linenums + code. + @Injectable() + class SomeService { + } + + @Decorator({ + selector: '[dependency]', + bind: { + 'id':'dependency' + } + }) + class Dependency { + id:string; + } + + p Let's step through the different ways in which MyDirective could be declared... + + .l-sub-section + h3 No injection + + p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor() { + } + } + + p This directive would be instantiated with no dependencies. + + .l-sub-section + h3 Component-level injection + + p Directives can inject any injectable instance from the closest component injector or any of its parents. + + p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(someService: SomeService) { + } + } + + p This directive would be instantiated with a dependency on SomeService. + + + .l-sub-section + h3 Injecting a directive from the current element + + p Directives can inject other directives declared on the current element. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(dependency: Dependency) { + expect(dependency.id).toEqual(3); + } + } + + p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3". + + + .l-sub-section + h3 Injecting a directive from a direct parent element + + p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Parent() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2". + + .l-sub-section + h3 Injecting a directive from any ancestor elements + + p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Ancestor() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p Unlike the @Parent which only checks the parent, @Ancestor checks 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". + + .l-sub-section + h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION] + p 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 asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child. + + .l-sub-section + h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION] + + p Similar to @Children above, but also includes the children of the child elements. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6. + + .l-sub-section + h3 Optional injection + + p 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. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Optional() dependency:Dependency) { + } + } + + p 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. + +.l-main-section + + h2 Members + + p + strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={}) + + .l-sub-section + h3 bind + + p Enumerates the set of properties that accept data binding for a directive. + + p The bind property defines a set of directiveProperty to bindingProperty key-value pairs: + + ul + li directiveProperty specifies the component property where the value is written. + li bindingProperty specifies the DOM property where the value is read from. + + p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component. + + +.l-main-section + h2 Syntax + + pre.prettyprint.linenums + code. + @Directive({ + bind: { + 'directiveProperty1': 'bindingProperty1', + 'directiveProperty2': 'bindingProperty2 | pipe1 | ...', + ... + } + } + +.l-main-section + h2 Basic Property Binding + + p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example: + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[tooltip]', + bind: { + 'text': 'tooltip' + } + }) + class Tooltip { + set text(text) { + // This will get called every time the 'tooltip' binding changes with the new value. + } + } + + p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below: + + pre.prettyprint.linenums + code. + <div [tooltip]="someExpression">...</div> + <div tooltip="Some Text">...</div> + + p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property. + +.l-main-section + h2 Bindings With Pipes + + p You can also use pipes when writing binding definitions for a directive. + + p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.) + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[class-set]', + bind: { + 'classChanges': 'classSet | keyValDiff' + } + }) + class ClassSet { + set classChanges(changes:KeyValueChanges) { + // This will get called every time the `class-set` expressions changes its structure. + } + } + + p The template that this directive is used in may also contain its own pipes. For example: + + pre.prettyprint.linenums + code. + <div [class-set]="someExpression | somePipe"> + + p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff. + +.location-badge exported from angular2/annotations \ No newline at end of file diff --git a/public/docs/js/latest/api/change-detection/directive-class.jade b/public/docs/js/latest/api/change-detection/directive-class.jade new file mode 100644 index 0000000000..127d1d5fd6 --- /dev/null +++ b/public/docs/js/latest/api/change-detection/directive-class.jade @@ -0,0 +1,312 @@ +p. + 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]. + 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: + +p. + For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments. + Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML. + +.l-main-section + + h2 Understanding How Injection Works + + p There are three stages of injection resolution. + + ol + li Pre-existing Injectors: + ul + li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null. + li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others. + + li Component Injectors: Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM. + + li Element Injectors: Each component 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. + + + p 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. + + p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]: + + ol + li Dependencies on the current element + li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary + li Dependencies on component injectors and their parents until it encounters the root component + li Dependencies on pre-existing injectors + + p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector. + + p To inject other directives, declare the constructor parameter as: + + ul + li directive:DirectiveType: a directive on the current element only + li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored. + li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only. + li @Children query:Query: A live collection of direct child directives [TO BE IMPLEMENTED]. + li @Descendants query:Query: A live collection of any child directives [TO BE IMPLEMENTED]. + + p To inject element-specific special objects, declare the constructor parameter as: + + ul + li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming) + li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only + li bindingPropagation: BindingPropagation to control change detection in a more granular way. + +.l-main-section + h2 Example of Injection + + p The following example demonstrates how dependency injection resolves constructor arguments in practice. + + p Assume this HTML template: + + pre.prettyprint.linenums.lang-html + code. + <div dependency="1"> + <div dependency="2"> + <div dependency="3" my-directive> + <div dependency="4"> + <div dependency="5"></div> + </div> + <div dependency="6"></div> + </div> + </div> + </div> + + p With the following dependency decorator and SomeService injectable class. + + pre.prettyprint.linenums + code. + @Injectable() + class SomeService { + } + + @Decorator({ + selector: '[dependency]', + bind: { + 'id':'dependency' + } + }) + class Dependency { + id:string; + } + + p Let's step through the different ways in which MyDirective could be declared... + + .l-sub-section + h3 No injection + + p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor() { + } + } + + p This directive would be instantiated with no dependencies. + + .l-sub-section + h3 Component-level injection + + p Directives can inject any injectable instance from the closest component injector or any of its parents. + + p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(someService: SomeService) { + } + } + + p This directive would be instantiated with a dependency on SomeService. + + + .l-sub-section + h3 Injecting a directive from the current element + + p Directives can inject other directives declared on the current element. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(dependency: Dependency) { + expect(dependency.id).toEqual(3); + } + } + + p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3". + + + .l-sub-section + h3 Injecting a directive from a direct parent element + + p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Parent() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2". + + .l-sub-section + h3 Injecting a directive from any ancestor elements + + p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Ancestor() dependency: Dependency) { + expect(dependency.id).toEqual(2); + } + } + + p Unlike the @Parent which only checks the parent, @Ancestor checks 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". + + .l-sub-section + h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION] + p 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 asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child. + + .l-sub-section + h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION] + + p Similar to @Children above, but also includes the children of the child elements. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Children() dependencies:Query) { + } + } + + p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6. + + .l-sub-section + h3 Optional injection + + p 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. + + pre.prettyprint.linenums + code. + @Decorator({ selector: '[my-directive]' }) + class MyDirective { + constructor(@Optional() dependency:Dependency) { + } + } + + p 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. + +.l-main-section + + h2 Members + + p + strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={}) + + .l-sub-section + h3 bind + + p Enumerates the set of properties that accept data binding for a directive. + + p The bind property defines a set of directiveProperty to bindingProperty key-value pairs: + + ul + li directiveProperty specifies the component property where the value is written. + li bindingProperty specifies the DOM property where the value is read from. + + p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component. + + +.l-main-section + h2 Syntax + + pre.prettyprint.linenums + code. + @Directive({ + bind: { + 'directiveProperty1': 'bindingProperty1', + 'directiveProperty2': 'bindingProperty2 | pipe1 | ...', + ... + } + } + +.l-main-section + h2 Basic Property Binding + + p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example: + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[tooltip]', + bind: { + 'text': 'tooltip' + } + }) + class Tooltip { + set text(text) { + // This will get called every time the 'tooltip' binding changes with the new value. + } + } + + p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below: + + pre.prettyprint.linenums + code. + <div [tooltip]="someExpression">...</div> + <div tooltip="Some Text">...</div> + + p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property. + +.l-main-section + h2 Bindings With Pipes + + p You can also use pipes when writing binding definitions for a directive. + + p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.) + + pre.prettyprint.linenums + code. + @Decorator({ + selector: '[class-set]', + bind: { + 'classChanges': 'classSet | keyValDiff' + } + }) + class ClassSet { + set classChanges(changes:KeyValueChanges) { + // This will get called every time the `class-set` expressions changes its structure. + } + } + + p The template that this directive is used in may also contain its own pipes. For example: + + pre.prettyprint.linenums + code. + <div [class-set]="someExpression | somePipe"> + + p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff. + +.location-badge exported from angular2/annotations \ No newline at end of file From 90d4c0f015da4256441e2ad4f7882d3cbfe4cc63 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Wed, 15 Apr 2015 08:15:51 -0700 Subject: [PATCH 07/80] bug fix --- public/_includes/_docs-nav.jade | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index 1ef80d2475..3d392dbe79 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -14,15 +14,18 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav li(class="#{selected}") #{name} if selected - ul.side-nav-secondary - for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data - name = page.menuTitle || page.title - selected = current.path[4] == slug ? 'is-selected':'' - li(class="#{selected}") #{slug} + sectionThree = public.docs[current.path[1]][current.path[2]][current.path[3]] - if selected - ul.side-nav-tertiary - for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data - name = page.menuTitle || page.title - selected = current.path[4] == slug ? 'is-selected':'' - li(class="#{selected}") #{name} + if sectionThree + ul.side-nav-secondary + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li(class="#{selected}") #{slug} + + if selected + ul.side-nav-tertiary + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li(class="#{selected}") #{name} From 5be4e6fbeaaeb8d06ae4d6cef7c02e9787b18a28 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Thu, 16 Apr 2015 07:24:28 -0700 Subject: [PATCH 08/80] ordered guide --- public/_includes/_docs-nav.jade | 39 +++++++++++++++++----- public/docs/index.jade | 13 +++++++- public/docs/js/latest/_data.json | 6 ++-- public/docs/js/latest/guide.jade | 0 public/docs/js/latest/guide/_data.json | 11 ++++++ public/docs/js/latest/guide/view.jade | 0 public/docs/js/latest/guide/zones.jade | 0 public/docs/js/latest/index.jade | 8 ++--- public/resources/css/module/_side-nav.scss | 18 ++++++++++ 9 files changed, 78 insertions(+), 17 deletions(-) create mode 100644 public/docs/js/latest/guide.jade create mode 100644 public/docs/js/latest/guide/_data.json create mode 100644 public/docs/js/latest/guide/view.jade create mode 100644 public/docs/js/latest/guide/zones.jade diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index 3d392dbe79..8f48f9dbce 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -11,21 +11,42 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav name = page.menuTitle || page.title selected = current.path[3] == slug ? 'is-selected':'' + + // PRIMARY NAVIGATION li(class="#{selected}") #{name} - if selected - sectionThree = public.docs[current.path[1]][current.path[2]][current.path[3]] - if sectionThree + // SECONDARY NAVIGATION + if selected + secondarySection = public.docs[current.path[1]][current.path[2]][current.path[3]] + + if secondarySection + listType = public.docs[current.path[1]][current.path[2]][current.path[3]]._data._listtype || 'unordered' + ordered = listType == "ordered" ? "is-ordered" : "" + number = 0 + ul.side-nav-secondary + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data name = page.menuTitle || page.title selected = current.path[4] == slug ? 'is-selected':'' - li(class="#{selected}") #{slug} + num = (listType == "ordered") ? number++ : '' + if slug != "_listtype" + if num + li(class="#{selected} #{ordered}") #{num}. #{slug} + + else + li(class="#{selected} #{ordered}") #{slug} + + + // TERTIARY NAVIGATION if selected - ul.side-nav-tertiary - for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data - name = page.menuTitle || page.title - selected = current.path[4] == slug ? 'is-selected':'' - li(class="#{selected}") #{name} + tertiarySection = public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]] + + if tertiarySection + ul.side-nav-tertiary + for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + li(class="#{selected}") #{name} diff --git a/public/docs/index.jade b/public/docs/index.jade index 9617f26c7c..9d71df89fc 100644 --- a/public/docs/index.jade +++ b/public/docs/index.jade @@ -1 +1,12 @@ -h1 path #{current.path[0]} +.l-main-section + .l-sub-section + h3 JavaScript + + ul + li Angular 2 JS - Latest Version + + + h3 Dart + + ul + li Angular 2 Dart - Latest Version \ No newline at end of file diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index ef0ce55dad..6eee226e0e 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -11,15 +11,15 @@ "title": "5 Min Quickstart" }, - "resources": { + "guide": { "icon": "play-circle-fill", - "title": "Angular Resources", + "title": "Guide", "banner": "Angular 2 is currently in Alpha Preview. For Angular 1.X Resources please visit Angularjs.org." }, "api": { "icon": "book", - "title": "API Proposal" + "title": "API" }, "help": { diff --git a/public/docs/js/latest/guide.jade b/public/docs/js/latest/guide.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json new file mode 100644 index 0000000000..14d52efcb0 --- /dev/null +++ b/public/docs/js/latest/guide/_data.json @@ -0,0 +1,11 @@ +{ + "_listtype": "ordered", + + "view": { + "title": "View Guide" + }, + + "zones": { + "title": "Zone Guide" + } +} diff --git a/public/docs/js/latest/guide/view.jade b/public/docs/js/latest/guide/view.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/guide/zones.jade b/public/docs/js/latest/guide/zones.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/index.jade b/public/docs/js/latest/index.jade index c8d9559532..3c539a014a 100644 --- a/public/docs/js/latest/index.jade +++ b/public/docs/js/latest/index.jade @@ -12,17 +12,17 @@ div.c4 div.c4 md-card.card md-card-content - h3.text-headline.text-uppercase Resources - p.text-body Preview of v2.0 + h3.text-headline.text-uppercase Guide + p.text-body Step by Step Guide footer - a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button button-primary" md-button) View Resources + a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Resources div.c4 md-card.card md-card-content - h3.text-headline.text-uppercase API Preview + h3.text-headline.text-uppercase API p.text-body Proposal for v2.0 API footer diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 190271b129..c33d71d6c0 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -140,6 +140,24 @@ display: none; } + &.is-ordered { + list-style-type: decimal; + list-style: none; + + > li { + line-height: 40px; + vertical-align: top; + + > a { + padding: 0px 0px 0px ($unit * 8); + display: block; + box-sizing: normal; + width: 100%; + line-height: 40px; + } + } + } + > li { &.is-selected { From 1f950dc2257ee13442bde4090dc197334e741729 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Fri, 17 Apr 2015 16:29:10 -0700 Subject: [PATCH 09/80] data change --- public/docs/js/latest/api/_data.json | 3 +-- public/docs/js/latest/api/change-detection/_data.json | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/public/docs/js/latest/api/_data.json b/public/docs/js/latest/api/_data.json index 9166701c01..0390cac11f 100644 --- a/public/docs/js/latest/api/_data.json +++ b/public/docs/js/latest/api/_data.json @@ -1,10 +1,9 @@ { "annotations": { - "icon": "query-builder", "title": "Annotations" }, + "change-detection": { - "icon": "query-builder", "title": "Change Detection" } } diff --git a/public/docs/js/latest/api/change-detection/_data.json b/public/docs/js/latest/api/change-detection/_data.json index d7a58b7c6c..f82f770926 100644 --- a/public/docs/js/latest/api/change-detection/_data.json +++ b/public/docs/js/latest/api/change-detection/_data.json @@ -1,9 +1,11 @@ { "directive-class": { - "title": "Directive Class" + "title": "Directive Class", + "type": "class" }, "component-class": { - "title": "Component Class" + "title": "Component Class", + "type": "class" } } From 9eef5a660a1207a1e05dcd66d0fd4dd36c7c6010 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sat, 18 Apr 2015 09:12:05 -0700 Subject: [PATCH 10/80] scaffolding for guide --- public/_includes/_docs-nav.jade | 6 ++-- public/_includes/_next-item.jade | 3 ++ public/docs/js/latest/guide/_data.json | 32 ++++++++++++++++--- public/docs/js/latest/guide/_layout.jade | 19 +++++++++++ .../{view.jade => creating-components.jade} | 0 .../{zones.jade => displaying-data.jade} | 0 .../js/latest/guide/reusing-components.jade | 0 public/docs/js/latest/guide/setup.jade | 26 +++++++++++++++ .../latest/guide/talking-to-components.jade | 0 .../js/latest/guide/transforming-data.jade | 0 public/docs/js/latest/guide/user-input.jade | 0 public/docs/js/latest/guide/using-forms.jade | 0 public/resources/css/module/_side-nav.scss | 11 ++----- 13 files changed, 82 insertions(+), 15 deletions(-) create mode 100644 public/_includes/_next-item.jade create mode 100644 public/docs/js/latest/guide/_layout.jade rename public/docs/js/latest/guide/{view.jade => creating-components.jade} (100%) rename public/docs/js/latest/guide/{zones.jade => displaying-data.jade} (100%) create mode 100644 public/docs/js/latest/guide/reusing-components.jade create mode 100644 public/docs/js/latest/guide/setup.jade create mode 100644 public/docs/js/latest/guide/talking-to-components.jade create mode 100644 public/docs/js/latest/guide/transforming-data.jade create mode 100644 public/docs/js/latest/guide/user-input.jade create mode 100644 public/docs/js/latest/guide/using-forms.jade diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index 8f48f9dbce..1a15864da9 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -25,7 +25,7 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav ordered = listType == "ordered" ? "is-ordered" : "" number = 0 - ul.side-nav-secondary + ul(class="side-nav-secondary #{ordered}") for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data name = page.menuTitle || page.title @@ -34,10 +34,10 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav if slug != "_listtype" if num - li(class="#{selected} #{ordered}") #{num}. #{slug} + li(class="#{selected}") #{num}. #{page.title} else - li(class="#{selected} #{ordered}") #{slug} + li(class="#{selected}") #{slug} // TERTIARY NAVIGATION diff --git a/public/_includes/_next-item.jade b/public/_includes/_next-item.jade new file mode 100644 index 0000000000..afe998f903 --- /dev/null +++ b/public/_includes/_next-item.jade @@ -0,0 +1,3 @@ +currentItem = false +nextItem = false + diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 14d52efcb0..4aab0348ed 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -1,11 +1,35 @@ { "_listtype": "ordered", - "view": { - "title": "View Guide" + "setup": { + "title": "Setup" }, - "zones": { - "title": "Zone Guide" + "displaying-data": { + "title": "Displaying Data" + }, + + "user-input": { + "title": "User Input" + }, + + "creating-components": { + "title": "Creating Components" + }, + + "talking-to-components": { + "title": "Talking to Components" + }, + + "using-forms": { + "title": "Using Forms" + }, + + "transforming-data": { + "title": "Tranforming data (pipes)" + }, + + "reusing-components": { + "title": "Reusing Components" } } diff --git a/public/docs/js/latest/guide/_layout.jade b/public/docs/js/latest/guide/_layout.jade new file mode 100644 index 0000000000..576e452481 --- /dev/null +++ b/public/docs/js/latest/guide/_layout.jade @@ -0,0 +1,19 @@ +doctype +html(lang="en" ng-app="angularIOApp") + head + != partial("../../../../_includes/_head-include") + + body(class="l-offset-nav l-offset-side-nav" ng-controller="AppCtrl") + != partial("../../../../_includes/_main-nav") + != partial("../../../../_includes/_docs-nav") + != partial("../../../../_includes/_hero") + + if banner + != partial("../../../../_includes/_banner") + + article.l-content-small.grid-fluid.docs-content + != yield + != partial("../../../../_includes/_next-item") + + != partial("../../../../_includes/_footer") + != partial("../../../../_includes/_scripts-include") \ No newline at end of file diff --git a/public/docs/js/latest/guide/view.jade b/public/docs/js/latest/guide/creating-components.jade similarity index 100% rename from public/docs/js/latest/guide/view.jade rename to public/docs/js/latest/guide/creating-components.jade diff --git a/public/docs/js/latest/guide/zones.jade b/public/docs/js/latest/guide/displaying-data.jade similarity index 100% rename from public/docs/js/latest/guide/zones.jade rename to public/docs/js/latest/guide/displaying-data.jade diff --git a/public/docs/js/latest/guide/reusing-components.jade b/public/docs/js/latest/guide/reusing-components.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade new file mode 100644 index 0000000000..1f3ff1cc71 --- /dev/null +++ b/public/docs/js/latest/guide/setup.jade @@ -0,0 +1,26 @@ +p. + Angular is still unpackaged and in alpha. This quickstart does not + reflect the final build process for Angular. The following setup is for those who + want to try out Angular while it is in alpha. + +.l-main-section + h2#section-create-project 1. Create a project + + p. + The goal of this quickstart is to create a component that renders "Hello Alice" to the page. + To get started, create a new directory. + + +.l-main-section + h2#section-add-es6-shim 2. Clone the quickstart repository + + p Within your project, clone the quickstart repository: + + pre.prettyprint + code git clone https://github.com/angular/quickstart.git + + + +// WHAT'S NEXT... ########################## +.l-main-section + h2#section-transpile Great job! We'll have the next steps out soon. diff --git a/public/docs/js/latest/guide/talking-to-components.jade b/public/docs/js/latest/guide/talking-to-components.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/guide/transforming-data.jade b/public/docs/js/latest/guide/transforming-data.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/js/latest/guide/using-forms.jade b/public/docs/js/latest/guide/using-forms.jade new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index c33d71d6c0..e2dc0cda9b 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -107,7 +107,6 @@ padding: 0px ($unit * 2) 0px ($unit * 6); color: $metal; font-size: 14px; - text-transform: uppercase; text-align: left; font-weight: 400; position: relative; @@ -141,19 +140,15 @@ } &.is-ordered { - list-style-type: decimal; - list-style: none; > li { line-height: 40px; vertical-align: top; > a { - padding: 0px 0px 0px ($unit * 8); - display: block; - box-sizing: normal; - width: 100%; - line-height: 40px; + padding: 0px ($unit * 2) 0px ($unit * 3); + text-transform: none; + font-size: 14px; } } } From 2f95c0d68d710ef4466176deb0fe952b781ac226 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sat, 18 Apr 2015 09:30:29 -0700 Subject: [PATCH 11/80] next step now auto generated --- public/_includes/_next-item.jade | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/public/_includes/_next-item.jade b/public/_includes/_next-item.jade index afe998f903..9b8119e5ba 100644 --- a/public/_includes/_next-item.jade +++ b/public/_includes/_next-item.jade @@ -1,3 +1,21 @@ -currentItem = false -nextItem = false +currentPage = false +nextPage = false +data = public.docs[current.path[1]][current.path[2]][current.path[3]]._data + +for page, slug in data + + // CHECK IF CURRENT PAGE IS SET, THEN SET NEXT PAGE + if currentPage + if !nextPage + .l-sub-section + h3 Next Step + a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title} + + //NEXT PAGE HAS NOW BEEN SET + nextPage = true + + // SET CURRENT PAGE FLAG WHEN YOU PASS IT + if current.path[4] == slug + currentPage = true + From 8cf88739f35931630c81b87611e511fee41bb56f Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Sat, 18 Apr 2015 13:56:30 -0700 Subject: [PATCH 12/80] first draft, code examples not working, for alex to review --- .../latest/guide/displaying-data-example1.png | Bin 0 -> 12259 bytes .../docs/js/latest/guide/displaying-data.jade | 47 ++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 public/docs/js/latest/guide/displaying-data-example1.png diff --git a/public/docs/js/latest/guide/displaying-data-example1.png b/public/docs/js/latest/guide/displaying-data-example1.png new file mode 100644 index 0000000000000000000000000000000000000000..d0f02a6464e49f711ae5d36c7993ba1bf7e945a5 GIT binary patch literal 12259 zcmbWdbyQqIkS{#A4FqR!cN-wV-66Pp7~CZg+}$k@T!Xv2y95ak+zIXk3;IoV_wDX? z-hXe-xpVJyS9Ra2?y_G`q>7RZIw}z=002Ojla*A1-bbOAH!>phn*(uL3IG5~SxZQ$ z$Vo_0sC;&`u(mS?0A$gtv@LbirE`j1$mXx2*gaAYbtAwxi7E2_nsE#nfFRh7N z%;e$7H>TXd2TVXaK>*Q53KcULCvmK4c5I7$UJ|T+CC)^RuuGaoF+5Tf@YJW`S238`pdTP1LA| z>!Q?`)da2&8T~9F??yR?ho~xpFI5>+oJAZG8K}Qv7C*0sAW)Wm>y>zjmBl2At;GUN zY3$P=pc~r;!cwM)kg>4F$dmMrMU`E_U0vDfp7YxH%9$V@2U#RK2T z&vP0xnFTi%RaB$B9Jho718@@%Oq@uJ5oHQXSvcqEMLC{PIDe~y-?QnM<4Iuch`g(N zF(su`H)mCg9Sx*EMDZ-7JW_s4;wXJ5IT?CG)rB;2^#SS2?7(6EjjR{%x5X%_^ResW`v+SFZ5R^WDE$R=?w2jt#JF!Wr*0x|8AdGtZ20!njR3G{0o2NX zR>z*t_%$>1O(a`Oc=>9o^A|E|JVfB1L1k!&#zC(fcB)EjTQJ?2$Ph512_=>qgtNRI z{yO2<8jQ9tfs)+!SqJ?D!etk1SWAE*PD&E`)d`WUAFmb0{pXrh_`wXiV?MzE7;$*G zH4VlhN*98WhPEI2*A$`y#E&mBInu$W8%SPaIn}QOGLI~n>etzv(w`!`VGG1JnYh=6 z>(Jk!K1Ja0qAd=^I@|i-o`)iB|MZ{|Mw#yab7kT~*^T=tT6^33Qtz3@5347zWqbOH z3>FzZNG1&{E`$I}d=T4Ok}jWOAG1gjK~?IMnrNn@Te=a;a1bd;>9d^hQN+F_O}ZrN zn9pa7wh#m5b1K_0i)*6438!>DGfVHOGvFq}@uf0FCkhn5r_3-}30Q?&m;7v*Q}X^; zGUw?^+)n?c6MOS=Bkjff!qFApXAA<9fc#=~!U9xB86cIWr;sdT1M^0% zjSB11^zydS(2An6v3dMb&C)Y1foeC+vogJ!_HXSe?eSif?XtdMkDRw>$LPnYzgB;F zr>`gw7n5@(rcY)~8%(T?2u^m6_*CWRL#nr{IE*C9Ih0MShGAk|h~9k=u65P9tHfN8 z{Fc;|-1PO=X#0TIq(wv3a^UHEH%f2Djtt+Zmw=a?fxVdDlFpJ@ZCUb4tOra7p~daR zDHaL)W|Jn9sFM;IsUJET=bI{<#2exDTpF30;;hzZkALpl2-uF;99Xme+^F(3>W~P} zH?6`crk>R;ZBRT&o-$?YYuXBP3SDz-TWu?8J8O3}BwlA&w_E32?`mglU-#noa_}1S zn!9DXjXP?(LeBZX9+f(wKP)iXG4{m!!$W5Vd{sL%aEIQ(f13U3^djn8=U4XX_d@(g zj{blMLF7YZ1|9>?iIc+a!gkS12pu>D?Uz0nxVK(7ZC}oABZa?Ngb*(i4-rqkU$Jl< zD;-%Hag~HuZ)4 zqRB)s1=SEi(-$g=$aaa!M~-N@PKW9O9TTxW3CffxDh>(=hJ`k~9r0sAMJ zO_I&^Zqo1e($O-GtZjUWs9E{!W%Qd@124D-f$1OPBy5N-L6o$ZzNK)to}lkLw?C zEIpMey4gtpxzNIoL{x_CzUidtU3^c5N_JCIS>0>NYcHNQo=2WCX8iRex_>mjmd%wk zkCXnUy>9l&eg5@#J<4h*4z|)*P0Tl+ZAI{t+6q&Tx-iQ%dpV1j2&?Bx{?W>u`5gOX zZEl^%@Z8Sj4!LC#S14DeMfzlh$jSC;-m?CIu?y$^`^l!X4kw4F&Ir$reXfIpA8%g* z=Yp;g9J>|&Hbe5S`aRLe{RyrN6;VngRX^J%UKC7je%<`oBZF6uy`_|D+|MwRi7-|9R9W|pU|E-Y9MN#ZyGm3uEN}jrHE@BP}dqA8?N^2 zC&^o6Th=y+>YAFz+sjReef57f)31JQ$$j~GGIC5BCNS>iv%$E!+|2B!?b2lVGb=86Y7k>1s(=rl8i^;r=10!~$oclH zUZtC~y?b_Hb(L^a_w8sJwIX^qdbmH~--)U37BbB7N2L00S)M-ISKT;6^j<`Jv4->w zO2Q5qv#$5^A?k~nBRnlxal*dm3J>Y(mcdgwya(>*hn~5AWY|0mOFIso>+X`CiUxYx z-@ICfz8BrqAM8CcZ)g+g$+VF55INocZkn;Rtd=qC@i1MBUC5NAm_?ebd$VWJumAob{4+ePw;os2rngE3)eA@PPfYXY|SFQ?5ZC zX6YR){PEQfg#c{mz;Ehk&jvAbG%;uMuy=w|0|0^^{Ln{xb5{t3hrOMH3%`dD)qha% zL!bXOvr|$02Z^h#5S5Oi3WbE@XLE`VZ135?RKlnf6cmD=%`EuUB&Gk09r{a%%F5N% ziJzU_-QAtdor}%!vn4wRA0Hn(n3J88lNCzA>f-6(3h`idaH0OsLH^G;lIAX^pRJu- ztsNaG{*4PUas1*cL`C&)qW}K<=X;uaSpUyV4le&C7F0m?e?9CRY+&~P9vjLk_^*{; z#oEK%PDj$(-rT_jI*0Iw_uPX2LH~dC{LhU4i&OW1IJvm~f1LlT=f5}w+5ZXfzXbYE zZT&|pR9(WTg6#jTdSTSVPm}2Y0A;3}q?m>W%vm;48m`n_05Jvv9u7l99+?S13X20t zQc9Eq36ta5f*dCe=dtV|5QI6fYuaBKU@V=OXMzFhWr;uqsU+mdhW&l2>d?zDzjI&* zZf@A)ttlugmy}f0*d^Jw<&go8GhgLd}~&kANCscq&M=ALC zA3WAZ9A@&ws5l;wMM~XmE9=5m-8X#=yS#3HcW`g|xVWEGwY0Z?IT`2jBw*3m!e`fI z!A6kYcHHg{by%)9$Nm=L#sU1zi)cb9Su`?Vrfzul!M4Nuylq72@$maKBLV`#XPH~r z1mGv%+Z6A^{BV*a_=n4Zck5{!rfa?7i0v&KULSY5AFk1Oyl$*`oVG-HoOdK6scQlu z6sa7T6BIXhy(PJR$9Egvj_x~=^z8x{opbpPM*`=vIOiYGY}y;9g;)CoG2bd`x{omg zPQfj^aRTj&pZwQ-Uv3xAuSUq+1x{;&pP)KjYhHCY*`Lm3_l%YMoGw^t-!!XQyLNy4 zLFngnCXce0&qfXOWs>ZEmnJ$uh5iN(iEW3s>t5dPmy{(d93k^QrM&96=}W)d52M41%iwM=YkNm18%R`99q_q#C*<=Den88#&96`X--zHXvBc z6NA$wC{r(q^C3!t7tH_S@u{a< zaCPY4V(CPRC7=RpDK{u3!djWDTl?+n$LMC=kbSNShR)M1bDW_9c9+U;`oDE`25;s1 zT+1!?`1>c4vFbOw>N~U*=|jg~uheajjB0dPU-{s$wq)P*ORK=`%h4>YwzJ6@C$JE# z;?#xYJ9~w2LJTENWoBW){S|RPSFGp)-Es+qCzTCxnS3tAvIvEM6Pn444>+1YX{*KR zZ11C@RI`}R(6wzZR?KW~wqKQByE&R$Pn01$%6M;`l!3AEc;)~a{Q#`2Pm04;l|~te zVRt=FtqY&Bz@p0$ggmysL!V$^wKwpK<^ona04w_`Qho*`Jbb8hAOA$=X;FbC5U54? zOP??-P<}wP4MaoZX4eR)n`3HT+~HFg;1VUt!_Sq6Y<{>vLKBNVu4Ls52dD zM`LRhZHB{H{4VqEYEp{oI>di4kq+;GH3A(7XFepl1B4A^3QS$#RUE-z-;Ed9h$R;> zs#ie_Xb30we^zb2HNo<^{iR)UH`+i?`~00{ws5D@v+Ems=rVNEARuB}Vy-J_>gj{* zzT!WeHcYP_mE^Lig`9P^^P%w(SqO+Oa@(mjWZj44un% z3QuJSF*lWcK?yR)k(3b{(d&+TzZ7_3i3Hzh_}lOGjjId*9hDS{!gov1vrR3x8Xo_-G8e1j&Yo zIg!Fspj@`MZu&iq<+$zKkZxnT;{2k|^`U}u_If*O*)+^;wFcRzNG3#RmJBaue4-8XbeWL30OPZ~9#j+fJv0t-I}ngT6cF6AW}Qg#Z`%h}fb3|oGX`LxizYs zZ0Q;-D@+LAiN=0}7hxD7-lc@PKCf8!5zAa(EdxwSRwvIWM`O`HP*WUS_j@`!FZ`3I^VZ2zp)iAyH4i|B0h4NO>_ObiZbG zIFpZc>s?0a?AOdp1U43Z?>%M5C{S%*CeLaNLIx)s%D2~8(n`mECCdQhcHLacB6SY$ zrX)&D}1k^T50^7h=o!mv||@gatnRr#d3 z144m=h;5#rkWxIt#ir7vuqpPye^%ja-o`~35WkHX!zXU1!%GbO4IezC5}}R4d%6w5 z-P|LHx6z6bpo#D4g{5Kz>$BuA?d$GDP0&;gV{t<@5gnKXNw`7$u2^8MCP z<%cYMs>ThZ8K=Nx9-Q{u9ICpP&I{Y60yG?pB<>i(0R|S*02YsFJ35w1* zLwTV!X(9T6ATbDWmLnl83PFNFwOE_z9#|*-W8xdTi$pFV(?}aSnc$Mp+w-6LEg3Qe z=?(uk-?|R*7aORn%;YqWdOGj82*HB7cX#(eESZQ%R3@UCGIe^6kNG51nuAZzPvo5! zuYaG&7wb%A>4Jy&)3~Izhw2EEXo$1$BVq`07*XiTuJev#?||! z-$l=h>73Bo8G~d;M5&mMFiB?v-~^je_p|!Xnpc&O)qdsFauAIi^GL?$Qvt6>spDJW z-U+HKfH6dNoOr&BYdB^ae=%9YiTp|n@rh%R6TlECM(KiVhceb$s(ssOe4`Xv>J53<6u zUx6$x2HcQR^cU>Y1|1EJ26rGqA_d9e08F6`Q~Wmd{#Djl+?e2*s`S)6TQm=lrk{cd zokGQtYNtE*p^Kyov3(c+?fpxs>i6F?243z!3_>m^Ac;%|42cYS?TX)~?|merz^cRY zpL}2t0=o?eDcu7&vCqJ}vQf&Mvi}gN<6q z0QS3+d84eHTxZz*tI*KUep%r7vfI9!_P-!CcA-yW-NM$60+n(u5 z?5(~F;hPHnE^b<^*h~9K^$EZ0A%(?_PeOBp0=Z@6A5^%=Ns~aSh)>=}ykl4vz0|VIO*`-D7`#Hm6QSgy>JGBeZpc>fro1Ly?4s-72q8P7E~^zN zVyO4c;9iAlpTXLVjPuVBi>6gZ+;8KIwC`mc=9YFaeQ-9Fvb;l}p(`ePjcbJ*!DYoO zx+|oISOdTnIG*#HD z;qDP>fjs)AFg?^N#r9v&gMT>(oYgCA!m=PkU-hP%lMpzRm(>GJfBAZdRez|G^L4JEB-ltNDvGVx@rz|h!Vj3rrA$ApmL6b`pS1qF3}_j49oFb=(vYb?W+1~Snhm=aK>@}*FU+*J*@W8osAzips@#~ASw6*(CZ3`%tN%fOWda%V+cZq z*atT@MDU4)j;>H_JxFy)t0Fp(1>VGcNSuaE{;DgKnBs>VSh^D$nnF0hVtvl=%m-jR zrnN9)heL}WS(GuK9|>2M4dUa9Awees#{&!nz1VkUOHJ`YZW^Xe8akGF;`4(nzC@wk0#Xqr)i&wVQV zR`hEHQfP$nm2^0{@I^&vGhOz;M51`%sp)&Brid@%^70pNdXe7@nK)K6CaXR=m}4gv_Z1T zVouyI(A)tv-vkX|5G(KQROb>Fgiq%AJ8_2+YhSO{DKLi5i5V5kR9G2A@6yUJbQUdS{lL%Y}hZeVo0iuC;Z>+;sl+5S!*Ffar( zN{FbsQ{tRIRL!l0Vnisq3r&?}vEd?tvlA=E<`{P=ToOZRp@9OX2+gB$w@(5(hr24I z8u7_AonZDY0~@|Ag|DpFQo z5+VmDw89700%$i}3&XAy{xBuhdnp+e8>c(>^TDY%k=Ux}=%m$;^(Q3G71v&ybECS8 z*bSI#MgNgY8xzN_+a&!J`?wS->j@_7Jtef3lkoyb$c)ci8|&l@+{ue~XxIX2geTF& zOa(_>ZAfIN4JsesTg`}S4J?~XP*I;yo+1vK?Pa-4IiG4;LNHS*pmkMT$_>wkhs4gy z6=FSEe?QgV+E-E@hpfV7|2Mad!~urIqK^cL3cm-i;Jr8KeK^FPo$59?p=G6Ro#RSl zS;yb~%pt3!4=Ed6-W_3??-kA}w2R}P$f7GOK$k)$MZt@kMG6-)tk=v(s`uyXdxGz% zZVh#;K?g+kMb!LBi{<|S^jZJgSt(TaJtNIdq zEMo*K>DOeq6ZxlPS31Y}HwzZ~mqLskpz(P2Q|f+K&0ctIQ~XqlKk=uJI( z2(|5mTElBJIOgPYc{87QamH9Y+Zgm*uj8_L!q7*hirsWF!Y1TDSayY%3PIjv3W_TJ zpw!w?B(R4?UxH7mkj{DiPgH6d0AAHuw>|AU>jb*rVnY2#aPFV7StQlS{YxzX#C3vP z9Y;ONsR$qK+5yAD?bmErZezs%LT7nUqy4HDi`_-fn;)f5ZTSW6z&Myc7=hz^T((m` zN>a!R5v8;E){>d?#bQlvr@&SKTnNM%V~4QCN!t=Vx#UX9+9q>bbpRuNvF-+{Gq1}9(e^IAsBa0>M=mGDmZNUz&tyuVi;f0On_9`ClS zMal2^r;mP&9VNdc^gQ_d*)G#EW7HcG166XNl;O4d0Jik6KSpGGEl&YrG4S zTxq4orJ6bEQs_4w@2DL^Nj!0U__`-^{Xu^f^=7r~T^>mBt8+lIuK6?HS!g->oeUNw z948g9%NKt1bn5M`-x;ICcn!Ge-bLkEaBRt}fb(RMjHTnx@RVu@ete>E{vlWf*~w~i zFHI zUxT6rKv;P*OUPC8s)1x8mN(lgQ`=ne??tikUJ}d-Y!*{I^pc$yKFTG1>&`e!wF^RD z@0t6$?OGstF|d$e7kCYWtxYnFuP{L$E9M8Ga7IxxaxItzgSF@)n30;I5kxg;sW*6m zx&~4l3F?LgcUv)BX@5=nF!REZJd}0Z;W)YZ&Kl>`WJs(!?;bLYa+^rTXKTBur+UE& zae?y$xbRQRcO~jdSu~V6DP9IJ=IVZrBjMBO$H;R!yl-G=JWfW) zrVPX&=2j47G{LxDGL4U%#8pGkXA$h4{?nil-H95;hoXkag=NvGlRP*T1@6Gmg`W@h z&{2@YTZNWAg}NEvd@t>m&8ukbBy?9CtSi_Nu~q9R-UA|gmq~Hx6=ZJ0=3rV>u%QKK z2?Twl*eEmQw+~*hbRQ6473Nalc#v2gv&NO(|f-EdD|!T>8}l?w7~a8k5JX zn>pp^_r|>#Tvz67b{P~jD0clI zC9V5rj1KRDE4oVY4vKzx{7cYr8(4lYiVmiW5~8Mz5|gxxJ5I&vt706O#YbcWsgUiW zlg6mil@o}PY$yQ~_9W=$Z%q8^rK>dbK(NJgjdWu0zHTVs1ms{VQQCWR`9{0Zhe@cVV=%v<k8e%SPtab$@bR zD|(vzKQdb>>e=u&>Ds-ayuAt*APr}<=Fj2C!bmLc{KxOulx9@LDFX)zXEUAKPj=U# zN32=opoiR#m=R<7BkBtuO)u2B(6A@P1-OD0vo}|Gl{TF^oIr7ffGQ%DtzGw9wn&tR8xEhqH^#t zJlI;Zgz8R8+h3K189fuo0N8LHjL?m&Ant`RzRe=8UIj1ZR%Z4uXmmfNTI~D=7>A+Q z>ILq&OTClQPGM{ht~DKr+rj(kjqUthI#!-`NS@%tNb3MXGYfaTPoFXa3kB!;MX7)V z7PPIXLq4Sa3tXtThD&~i*S%U%fqWJeAS~hgH5UvE&%b-Aw0ttyeYq&8MGQl04KNr`&-NgXz(5^CTu{XL~wj#6uK=N*hGlf z!~dKPO3QK-53rIOiX2vQYv@a9V!;hlXkKYIaM%35wABfq{z{e*kyYe>Z7 zhetHgWO05wsxX0wCJL;nPB$J-3o-LXl>}c8(#s34N2kXyslpjw|;42+u znW%W9wf(kheIhI{1tdAd6+Y?YH~eMMkUles0edm;l)dMuICD@H*7+F|jO7pb8@Wps zc1!9$b#wUhd-y~D9^W$uW4O=J-Vv8Ox-EYWN_ars_u^mP23|Wf-49BH8AcZw(mg5f z_3$A9mKtPhcy(`NZ@nHxNDN2;d~B^-LCGavtnv51ks6h{!mm0lsh6R+AERHCrN~MEUGlbja47j*?P5%m_Q5@)o6FwT=vO{B=Awz50qoyKKK*Ir4*xsoDYQC zKR}K4<+N$h=yNjh6>n=XDJH|-&U{=wrQJM}QhC2Kclg5$RsvE=)WsI@@~!NuQ`Cqq z!#q0lu-3&^yCUx!7|+_mGi&M|JJWtdaBlxb5FgX&QX#7k`t9mrtHHCE+XJBwd^cg_ zIn>B(?T1uX&Qe}}EL{?!B-Q|zv(ret;evyKclb|BeBTqQnv$JQ>qd&>WF@XeF@JkM zmX#QGp`Wz9zC2AtwyJqtAq1T+RAmlI9HxHqYwLKqTMcD+x;fhA9Y^14Wcp(11;u?( zu6C3nlmhu5Z%^ozsEvW$p%PLMWSS$Li=2pBSOtXb&q(1U`@y-@&}vi8mtRLk;*c9rFv{q@jA5c*vdAxFRqYyeTE6HK% zq8kjpPvp%j5rCec4J8iLjgZoh6#V?tXN5+u8tJ?gm;{)U%>%Jm+ zJU=eYE?H9*4&WfCtd804aBQf`krW=tNgPu?K^AM64wFel=>g7~2wDk>0hv^f7Yt?m zJmy1kyX2*f(xkjCK>>mE{+L`$z;Xlyv~4_me0e=&F8Fa(L!YXqV~=9?>#8QRqa=+d zVgZTr_Mo}S1 z%JaTIpOvsBVG9JPst?EL4mA{TQdoau|HQ#H49M9awFnzMYC5`7eZoynpwxSDSeXpW zD|Nu6kCEr6HJGf3naoZX83(k^(T#r>rh(nXOarvYmdYlVwNk&^<5_7;BnBG?$l~uL zFl{B@xMFTaj=>1!V)f?bP8kHEzW**jrCLaH+gR`Y`4d?T@?o5z)>?-^8t zy&PwG!u$lY4xK-TyJOuu{!EK({)5*)&%?Kl; zbPVT7NfeROp2}vp|A$4P%pzH8)tEa?Gkcb?u3xZ|p4}hJ?HM($#{~Q+Ohb6v>+zcs z-5k&ue}8jWxTl|1R$zL#(o|81!mdZZ`O(PB|5}|c39mq=01&eZ$W97{$fB9fB_@!Q zsPcGP^ZXbWaB67QhFQF<)=rNx#twQf`vEW}o}E9=z<#R61~fCn#9vjB8Hbh6Gapme zTWRHNh-I!iwc8wMl@+2{VSICsT6N2`4}~!fGl13Uu$1C{sF_mBsR+x z+H2iNG$8QWf0M!eBlXp2g3jIx1Uuik-BC*hO^_S2z(UUH6zcrPc}OLT`;O;XZJhW) zd;zZed0DQozv>6>urYEOqoovI6NTY(oPIHx2iuZQ!K+pKmzgIgbE^~L_b?%H$|q=k z-M5Uv_Vn}X^8Mm)gv|Hg4J~1OW;XbcGOZQmk>Ln6D?^Se>W2zoi*Cl4p70hf>rJ-a aV5n@5P5EUR!~gwjMovmevRd3Y=>G#V%N + + pre.prettyprint.linenums.lang-typescript + code. + //TypeScript + + + p + | The <display> component here acts as the site where you'll insert your application. + | We'll assume a structure like this for the rest of the examples here and just focus on the parts that + | are different. + +.l-main-section + h2#section-showing-properties-with-interpolation Showing properties with interpolation + p.text-body(ng-non-bindable) + | The simple method for binding text into templates is through interpolation where you put the name of a property + | inside {{ }}. + + p To see this working, create another file, show-properties.js, and add the following: + From 313b3636d3f0a4ba182ccf621767a608800bafd8 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sun, 19 Apr 2015 10:24:28 -0700 Subject: [PATCH 13/80] displaying data guide --- .../docs/js/latest/guide/displaying-data.jade | 304 +++++++++++++++++- 1 file changed, 299 insertions(+), 5 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 9dad624a91..7c566547be 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -21,16 +21,17 @@ p. .l-main-section h2#section-create-an-entry-point Create an entry point + p Open your favorite editor and create a show-properties.html file with the content: - pre.prettyprint.linenums.lang-javascript + pre.prettyprint.linenums.lang-html code. //ES5 - + <display></display> - pre.prettyprint.linenums.lang-typescript + pre.prettyprint.linenums.lang-html code. //TypeScript - + <display></display> p | The <display> component here acts as the site where you'll insert your application. @@ -43,5 +44,298 @@ p. | The simple method for binding text into templates is through interpolation where you put the name of a property | inside {{ }}. - p To see this working, create another file, show-properties.js, and add the following: + p To see this working, create another file, show-properties.js, and add the following: + pre.prettyprint.linenums.lang-javascript + code. + // ES5 + function DisplayComponent() { + this.myName = "Alice"; + } + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display" + }), + new angular.View({ + template: + '<p>My name: {{ myName }}</p>', + directives: [angular.For, angular.If] + }) + ]; + + pre.prettyprint.linenums.lang-typescript + code. + // TypeScript + import {Component, View, bootstrap, For} from 'angular2/angular2'; + + @Component({ + selector: 'display' + }) + @View({ + template: ` + <p>My name: {{ myName }}</p> + `, + directives: [For] + }) + class DisplayComponent { + myName: string; + todos: Array<string>; + + constructor() { + this.myName = "Alice"; + } + } + p. + You've just defined a component that encompases a view and controller for the app. The view + defines a template: + pre.prettyprint.lang-html + code. + <p>My name: {{ myName }}</p> + + p. + Angular will automatically pull the value of myName and insert it into the browser and + update it whenever it changes without work on your part. + + p. + One thing to notice here is that though you've written your DisplayComponent class, you haven't + called new to create one anywhere. By associating your class with elements named 'display' in + the DOM, Angular knows to automatically call new on DisplayComponent and bind its properties to + that part of the template. + + p. + When you're building templates, data bindings like these have access to the same scope of + properties as your controller class does. Here, your class is the DisplayComponent that has + just one property, myName. + + .callout.is-helpful + header Note + p. + While you've used template: to specify an inline view, for larger templates you'd + want to move them to a separate file and load them with templateUrl: instead. + + p So you can see Angular dynamically update content, add a line after + + pre.prettyprint.lang-html + code. + <p>My name: {{ myName }}</p> + p to this: + pre.prettyprint.lang-html + code. + <p>Current time: {{ time }}</p> + p. + Then give the DisplayComponent a starting value for time and a call to update time + via setInterval. + + pre.prettyprint.lang-javascript + code. + setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000); + p Reload the page in your browser and you'll now see the seconds updating automatically. +.l-main-section + h2#Create-an-array Create an array property and use For on the view + p Moving up from a single property, create an array to display as a list. + pre.prettyprint.lang-javascript + code. + //ES5 + function DisplayComponent() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + pre.prettyprint.lang-typescript + code. + //Typescript + constructor() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + p. + You can then use this array in your template with the for directive to create copies of DOM elements + with one for each item in the array. + pre.prettyprint.lang-javascript + code. + //ES5 + template: + '<p>My name: {{ myName }}</p>' + + '<p>Friends:</p>' + + '<ul>' + + '<li *for="#name of names">' + + '{{ name }}' + + '</li>' + + '</ul>', pre.prettyprint.lang-typescript + code. + //Typescript + template: ` + <p>My name: {{ myName }}</p> + <p>Friends:</p> + <ul> + <li *for="#name of names"> + {{ name }} + </li> + </ul> + `, + p. + To make this work, you'll also need to add the angular.For directive used by the template so + that Angular knows to include it: + + pre.prettyprint.lang-javascript + code. + //ES5 + directives: [angular.For] + pre.prettyprint.lang-typescript + code. + //Typescript + import {Component, View, bootstrap, For} from + ... + directives: [For] + p Reload and you've got your list of friends! + p. + Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your + list. Delete one and Angular deletes the <li>. Reorder items and Angular makes the corresponding reorder of + the DOM list. + p Let's look at the few lines that do the work again: + pre.prettyprint.lang-html + code. + //HTML + <li *for="#name of names"> + {{ name }} + </li> + p The way to read this is: + ul + li. + *for : create a DOM element for each item in an + iterable + like an array + li #name : refer to individual values of the iterable as 'name' + li of names : the iterable to use is called 'names' in the current controller + p Using this syntax, you can build UI lists from any iterable object. +.l-main-section + h2#Create-a-class Create a class for the array property and inject into component + p. + Before we get too much further, we should mention that putting our model (array) directly in our controller isn't + proper form. We should separate the concerns by having another class serve the role of model and inject it into + the controller. + p Make a FriendsService class to provide the model with the list of friends. + pre.prettyprint.lang-javascript + code. + function FriendsService() { + this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + p. + Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of + names in DisplayComponent to the names provided by the service you passed in. + pre.prettyprint.lang-javascript + code. + function DisplayComponent(friends) { + this.myName = "Alice"; + this.names = friends.names; + } + p And then make FriendsService available to dependency injection + pre.prettyprint.lang-javascript + code. + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display", + injectables: [FriendsService] + }), + ... + DisplayComponent.parameters = [[FriendsService]]; + .callout.is-helpful + header ES5 Note + p. + The dependency injection syntax here is using the low-level API and is...well...not very nice. We're + working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon. + pre.prettyprint.lang-javascript + code. + //ES5 + function FriendsService() { + this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + function DisplayComponent(friends) { + this.myName = "Alice"; + this.names = friends.names; + } + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display", + injectables: [FriendsService] + }), + new angular.View({ + template: '{{ myName }} <ul> <li *for="#name of names"<{{ name }}>/li< >/ul<', + directives: [angular.For, angular.If] + }) + ]; + DisplayComponent.parameters = [[FriendsService]]; + document.addEventListener("DOMContentLoaded", function() { + angular.bootstrap(DisplayComponent); + }); + pre.prettyprint.lang-typescript + code. + //TypeScript + import {Component, View, bootstrap, For} from + ... + directives: [For] +.l-main-section + h2#Conditionally-displaying-data-with-If Conditionally displaying data with If + p. + Lastly, before we move on, let's handle showing parts of our UI conditionally with If. The + If directive adds or removes elements from the DOM based on the expression you provide. + p See it in action by adding a paragraph at the end of your template + pre.prettyprint.lang-html + code. + <p *if="names.length > 3">You have many friends!</p> + p You'll also need to add the If directive so Angular knows to include it. + p [TODO: CODE] + p. + As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. + Remove two items from the list, reload your browser, and see that the message no longer displays. + pre.prettyprint.lang-javascript + code. + //ES5 + function DisplayComponent() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display" + }), + new angular.View({ + template: + '<p>My name: {{ myName }}</p>' + + '<p>Friends:</p>' + + '<ul>' + + '<li *for="#name of names">' + + '{{ name }}' + + '</li>' + + '</ul>' + + '<p *if="names.length > 3">You have many friends!</p>', + directives: [angular.For, angular.If] + }) + ]; + pre.prettyprint.lang-typescript + code. + //TypeScript + import {Component, View, bootstrap, For, If} from 'angular2/angular2'; + @Component({ + selector: 'display' + }) + @View({ + template: ` + <p>My name: {{ myName }}</p> + <p>Friends:</p> + <ul> + <li *for="#name of names"> + {{ name }} + </li> + </ul> + <p *if="names.length > 3">You have many friends!</p> + `, + directives: [For, If] + }) + class DisplayComponent { + myName: string; + todos: Array; + constructor() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + } \ No newline at end of file From 3b72b715700f8bb77bd1b1f5ab2e828ff7a5a2ec Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sun, 19 Apr 2015 10:30:06 -0700 Subject: [PATCH 14/80] guide list --- public/docs/js/latest/guide.jade | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/docs/js/latest/guide.jade b/public/docs/js/latest/guide.jade index e69de29bb2..20b27ba287 100644 --- a/public/docs/js/latest/guide.jade +++ b/public/docs/js/latest/guide.jade @@ -0,0 +1,6 @@ +ul + for page, slug in public.docs[current.path[1]][current.path[2]].guide._data + name = page.menuTitle || page.title + selected = current.path[4] == slug ? 'is-selected':'' + if slug != '_listtype' + li #{slug} From 94cc8e900549e86c03adf812c4b5fd62fa761d30 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sun, 19 Apr 2015 13:53:18 -0700 Subject: [PATCH 15/80] First round of api docs --- public/_includes/_scripts-include.jade | 11 +- public/docs/js/latest/api/_data.json | 9 - .../api/annotations/Ancestor-class.jade | 74 ++ .../api/annotations/Attribute-class.jade | 72 ++ .../api/annotations/Decorator-class.jade | 106 +++ .../annotations/DynamicComponent-class.jade | 93 +++ .../latest/api/annotations/Parent-class.jade | 61 ++ .../api/annotations/PropertySetter-class.jade | 53 ++ .../latest/api/annotations/Query-class.jade | 39 + .../js/latest/api/annotations/View-class.jade | 119 +++ .../api/annotations/Viewport-class.jade | 124 +++ .../docs/js/latest/api/annotations/_data.json | 58 +- .../api/annotations/component-class.jade | 412 +++------- .../api/annotations/directive-class.jade | 710 ++++++++++++------ .../api/annotations/onAllChangesDone-var.jade | 23 + .../latest/api/annotations/onChange-var.jade | 39 + .../latest/api/annotations/onDestroy-var.jade | 22 + .../js/latest/api/change-detection/_data.json | 11 - .../api/change-detection/component-class.jade | 312 -------- .../api/change-detection/directive-class.jade | 312 -------- ...e-detection.jade => change_detection.jade} | 0 .../ChangeDetection-class.jade | 44 ++ .../ChangeDetectorRef-class.jade | 84 +++ .../DynamicChangeDetection-class.jade | 53 ++ .../JitChangeDetection-class.jade | 53 ++ .../api/change_detection/LifeCycle-class.jade | 84 +++ .../js/latest/api/change_detection/_data.json | 21 + public/docs/js/latest/api/core.jade | 5 + .../api/core/ExceptionHandler-class.jade | 50 ++ .../js/latest/api/core/NgElement-class.jade | 57 ++ public/docs/js/latest/api/core/_data.json | 13 + .../latest/api/core/bootstrap-function.jade | 113 +++ public/docs/js/latest/api/di.jade | 5 + .../docs/js/latest/api/di/Binding-class.jade | 256 +++++++ .../latest/api/di/BindingBuilder-class.jade | 216 ++++++ .../docs/js/latest/api/di/Injector-class.jade | 215 ++++++ public/docs/js/latest/api/di/Key-class.jade | 97 +++ public/docs/js/latest/api/di/_data.json | 21 + .../docs/js/latest/api/di/bind-function.jade | 14 + public/docs/js/latest/api/di_annotations.jade | 5 + .../DependencyAnnotation-class.jade | 60 ++ .../api/di_annotations/Inject-class.jade | 43 ++ .../api/di_annotations/InjectLazy-class.jade | 45 ++ .../di_annotations/InjectPromise-class.jade | 45 ++ .../api/di_annotations/Injectable-class.jade | 34 + .../api/di_annotations/Optional-class.jade | 32 + .../js/latest/api/di_annotations/_data.json | 25 + public/docs/js/latest/api/di_errors.jade | 5 + .../di_errors/AsyncBindingError-class.jade | 44 ++ .../CyclicDependencyError-class.jade | 38 + .../di_errors/InstantiationError-class.jade | 28 + .../di_errors/InvalidBindingError-class.jade | 54 ++ .../di_errors/NoAnnotationError-class.jade | 57 ++ .../api/di_errors/NoProviderError-class.jade | 26 + .../api/di_errors/ProviderError-class.jade | 95 +++ .../docs/js/latest/api/di_errors/_data.json | 29 + public/docs/js/latest/api/directives.jade | 5 + .../js/latest/api/directives/For-class.jade | 132 ++++ .../js/latest/api/directives/If-class.jade | 84 +++ .../api/directives/NonBindable-class.jade | 18 + .../latest/api/directives/Switch-class.jade | 64 ++ .../api/directives/SwitchDefault-class.jade | 33 + .../api/directives/SwitchWhen-class.jade | 54 ++ .../docs/js/latest/api/directives/_data.json | 25 + public/docs/js/latest/api/forms.jade | 5 + .../CheckboxControlValueAccessor-class.jade | 60 ++ .../js/latest/api/forms/Control-class.jade | 45 ++ .../latest/api/forms/ControlArray-class.jade | 124 +++ .../api/forms/ControlDirective-class.jade | 103 +++ .../latest/api/forms/ControlGroup-class.jade | 95 +++ .../forms/ControlGroupDirective-class.jade | 111 +++ .../api/forms/DefaultValueAccessor-class.jade | 61 ++ .../latest/api/forms/FormBuilder-class.jade | 76 ++ .../latest/api/forms/FormDirectives-var.jade | 11 + .../docs/js/latest/api/forms/INVALID-var.jade | 9 + .../docs/js/latest/api/forms/VALID-var.jade | 9 + .../js/latest/api/forms/Validators-class.jade | 100 +++ public/docs/js/latest/api/forms/_data.json | 49 ++ public/docs/js/latest/api/pipes.jade | 5 + .../pipes/CollectionChangeRecord-class.jade | 77 ++ .../api/pipes/IterableChanges-class.jade | 230 ++++++ .../api/pipes/KVChangeRecord-class.jade | 77 ++ .../api/pipes/KeyValueChanges-class.jade | 206 +++++ .../pipes/KeyValueChangesFactory-class.jade | 42 ++ .../js/latest/api/pipes/NullPipe-class.jade | 87 +++ .../api/pipes/NullPipeFactory-class.jade | 42 ++ .../docs/js/latest/api/pipes/Pipe-class.jade | 76 ++ public/docs/js/latest/api/pipes/_data.json | 33 + .../abstract_change_detector/_data.json | 5 + .../binding_record/_data.json | 5 + .../change_detection/_data.json | 17 + .../change_detection_util/_data.json | 13 + .../change_detector_ref/_data.json | 5 + .../src/change_detection/coalesce/_data.json | 5 + .../src/change_detection/constants/_data.json | 25 + .../directive_record/_data.json | 5 + .../dynamic_change_detector/_data.json | 5 + .../change_detection/exceptions/_data.json | 9 + .../change_detection/interfaces/_data.json | 17 + .../change_detection/parser/ast/_data.json | 85 +++ .../change_detection/parser/lexer/_data.json | 177 +++++ .../change_detection/parser/locals/_data.json | 5 + .../change_detection/parser/parser/_data.json | 5 + .../pipes/iterable_changes/_data.json | 13 + .../pipes/keyvalue_changes/_data.json | 13 + .../pipes/null_pipe/_data.json | 9 + .../change_detection/pipes/pipe/_data.json | 9 + .../pipes/pipe_registry/_data.json | 5 + .../proto_change_detector/_data.json | 9 + .../change_detection/proto_record/_data.json | 49 ++ .../core/annotations/annotations/_data.json | 33 + .../api/src/core/annotations/di/_data.json | 13 + .../api/src/core/annotations/view/_data.json | 5 + .../core/annotations/visibility/_data.json | 9 + .../api/src/core/application/_data.json | 5 + .../src/core/application_tokens/_data.json | 21 + .../api/src/core/compiler/compiler/_data.json | 9 + .../compiler/component_url_mapper/_data.json | 9 + .../compiler/directive_metadata/_data.json | 5 + .../directive_metadata_reader/_data.json | 5 + .../dynamic_component_loader/_data.json | 9 + .../core/compiler/element_binder/_data.json | 5 + .../core/compiler/element_injector/_data.json | 29 + .../src/core/compiler/interfaces/_data.json | 5 + .../src/core/compiler/ng_element/_data.json | 5 + .../compiler/proto_view_factory/_data.json | 5 + .../src/core/compiler/query_list/_data.json | 5 + .../compiler/template_resolver/_data.json | 5 + .../api/src/core/compiler/view/_data.json | 9 + .../core/compiler/view_container/_data.json | 5 + .../src/core/compiler/view_factory/_data.json | 9 + .../core/compiler/view_hydrator/_data.json | 5 + .../api/src/core/exception_handler/_data.json | 5 + .../src/core/life_cycle/life_cycle/_data.json | 5 + .../core/testability/testability/_data.json | 9 + .../latest/api/src/di/annotations/_data.json | 25 + .../js/latest/api/src/di/binding/_data.json | 21 + .../latest/api/src/di/exceptions/_data.json | 29 + .../js/latest/api/src/di/injector/_data.json | 5 + .../docs/js/latest/api/src/di/key/_data.json | 9 + .../latest/api/src/di/opaque_token/_data.json | 5 + .../api/src/directives/class/_data.json | 5 + .../latest/api/src/directives/for/_data.json | 5 + .../latest/api/src/directives/if/_data.json | 5 + .../src/directives/non_bindable/_data.json | 5 + .../api/src/directives/switch/_data.json | 13 + .../latest/api/src/dom/dom_adapter/_data.json | 13 + .../dom/generic_browser_adapter/_data.json | 5 + .../api/src/forms/directives/_data.json | 21 + .../api/src/forms/form_builder/_data.json | 5 + .../js/latest/api/src/forms/model/_data.json | 25 + .../src/forms/validator_directives/_data.json | 5 + .../api/src/forms/validators/_data.json | 5 + .../mock/template_resolver_mock/_data.json | 5 + .../api/src/mock/vm_turn_zone_mock/_data.json | 5 + .../latest/api/src/mock/xhr_mock/_data.json | 5 + .../api/src/reflection/reflector/_data.json | 5 + .../js/latest/api/src/render/api/_data.json | 45 ++ .../dom/compiler/compile_control/_data.json | 5 + .../dom/compiler/compile_element/_data.json | 5 + .../dom/compiler/compile_pipeline/_data.json | 5 + .../dom/compiler/compile_step/_data.json | 5 + .../compiler/compile_step_factory/_data.json | 9 + .../render/dom/compiler/compiler/_data.json | 9 + .../dom/compiler/directive_parser/_data.json | 5 + .../property_binding_parser/_data.json | 5 + .../render/dom/compiler/selector/_data.json | 9 + .../dom/compiler/template_loader/_data.json | 5 + .../text_interpolation_parser/_data.json | 5 + .../dom/compiler/view_splitter/_data.json | 5 + .../render/dom/direct_dom_renderer/_data.json | 13 + .../dom/events/event_manager/_data.json | 13 + .../dom/events/hammer_common/_data.json | 5 + .../render/dom/events/key_events/_data.json | 5 + .../dom/shadow_dom/content_tag/_data.json | 5 + .../_data.json | 5 + .../_data.json | 5 + .../dom/shadow_dom/light_dom/_data.json | 9 + .../native_shadow_dom_strategy/_data.json | 5 + .../dom/shadow_dom/shadow_css/_data.json | 5 + .../shadow_dom_compile_step/_data.json | 5 + .../shadow_dom/shadow_dom_strategy/_data.json | 5 + .../dom/shadow_dom/style_inliner/_data.json | 5 + .../shadow_dom/style_url_resolver/_data.json | 5 + .../src/render/dom/shadow_dom/util/_data.json | 33 + .../latest/api/src/render/dom/util/_data.json | 21 + .../render/dom/view/element_binder/_data.json | 9 + .../view/property_setter_factory/_data.json | 5 + .../src/render/dom/view/proto_view/_data.json | 5 + .../dom/view/proto_view_builder/_data.json | 17 + .../api/src/render/dom/view/view/_data.json | 5 + .../render/dom/view/view_container/_data.json | 5 + .../render/dom/view/view_factory/_data.json | 9 + .../render/dom/view/view_hydrator/_data.json | 5 + .../latest/api/src/services/ruler/_data.json | 9 + .../latest/api/src/services/title/_data.json | 5 + .../api/src/services/url_resolver/_data.json | 5 + .../js/latest/api/src/services/xhr/_data.json | 5 + .../src/test_lib/benchmark_util/_data.json | 17 + .../api/src/test_lib/test_bed/_data.json | 9 + .../api/src/test_lib/test_injector/_data.json | 13 + .../latest/api/src/test_lib/utils/_data.json | 21 + public/docs/js/latest/api/template.jade | 5 + .../latest/api/template/Compiler-class.jade | 58 ++ .../api/template/ViewContainer-class.jade | 281 +++++++ public/docs/js/latest/api/template/_data.json | 9 + public/docs/js/latest/api/test.jade | 5 + .../js/latest/api/test/TestBed-class.jade | 100 +++ public/docs/js/latest/api/test/_data.json | 9 + .../js/latest/api/test/inject-function.jade | 36 + public/docs/js/latest/api/test_lib/_data.json | 1 + public/docs/js/latest/api/view.jade | 5 + .../latest/api/view/ComponentRef-class.jade | 84 +++ .../view/DynamicComponentLoader-class.jade | 62 ++ .../js/latest/api/view/ElementRef-class.jade | 72 ++ .../js/latest/api/view/QueryList-class.jade | 104 +++ public/docs/js/latest/api/view/_data.json | 17 + public/resources/css/module/_side-nav.scss | 2 + public/resources/js/site.js | 7 + public/resources/js/vendor/jquery.js | 4 + 220 files changed, 7892 insertions(+), 1193 deletions(-) delete mode 100644 public/docs/js/latest/api/_data.json create mode 100644 public/docs/js/latest/api/annotations/Ancestor-class.jade create mode 100644 public/docs/js/latest/api/annotations/Attribute-class.jade create mode 100644 public/docs/js/latest/api/annotations/Decorator-class.jade create mode 100644 public/docs/js/latest/api/annotations/DynamicComponent-class.jade create mode 100644 public/docs/js/latest/api/annotations/Parent-class.jade create mode 100644 public/docs/js/latest/api/annotations/PropertySetter-class.jade create mode 100644 public/docs/js/latest/api/annotations/Query-class.jade create mode 100644 public/docs/js/latest/api/annotations/View-class.jade create mode 100644 public/docs/js/latest/api/annotations/Viewport-class.jade create mode 100644 public/docs/js/latest/api/annotations/onAllChangesDone-var.jade create mode 100644 public/docs/js/latest/api/annotations/onChange-var.jade create mode 100644 public/docs/js/latest/api/annotations/onDestroy-var.jade delete mode 100644 public/docs/js/latest/api/change-detection/_data.json delete mode 100644 public/docs/js/latest/api/change-detection/component-class.jade delete mode 100644 public/docs/js/latest/api/change-detection/directive-class.jade rename public/docs/js/latest/api/{change-detection.jade => change_detection.jade} (100%) create mode 100644 public/docs/js/latest/api/change_detection/ChangeDetection-class.jade create mode 100644 public/docs/js/latest/api/change_detection/ChangeDetectorRef-class.jade create mode 100644 public/docs/js/latest/api/change_detection/DynamicChangeDetection-class.jade create mode 100644 public/docs/js/latest/api/change_detection/JitChangeDetection-class.jade create mode 100644 public/docs/js/latest/api/change_detection/LifeCycle-class.jade create mode 100644 public/docs/js/latest/api/change_detection/_data.json create mode 100644 public/docs/js/latest/api/core.jade create mode 100644 public/docs/js/latest/api/core/ExceptionHandler-class.jade create mode 100644 public/docs/js/latest/api/core/NgElement-class.jade create mode 100644 public/docs/js/latest/api/core/_data.json create mode 100644 public/docs/js/latest/api/core/bootstrap-function.jade create mode 100644 public/docs/js/latest/api/di.jade create mode 100644 public/docs/js/latest/api/di/Binding-class.jade create mode 100644 public/docs/js/latest/api/di/BindingBuilder-class.jade create mode 100644 public/docs/js/latest/api/di/Injector-class.jade create mode 100644 public/docs/js/latest/api/di/Key-class.jade create mode 100644 public/docs/js/latest/api/di/_data.json create mode 100644 public/docs/js/latest/api/di/bind-function.jade create mode 100644 public/docs/js/latest/api/di_annotations.jade create mode 100644 public/docs/js/latest/api/di_annotations/DependencyAnnotation-class.jade create mode 100644 public/docs/js/latest/api/di_annotations/Inject-class.jade create mode 100644 public/docs/js/latest/api/di_annotations/InjectLazy-class.jade create mode 100644 public/docs/js/latest/api/di_annotations/InjectPromise-class.jade create mode 100644 public/docs/js/latest/api/di_annotations/Injectable-class.jade create mode 100644 public/docs/js/latest/api/di_annotations/Optional-class.jade create mode 100644 public/docs/js/latest/api/di_annotations/_data.json create mode 100644 public/docs/js/latest/api/di_errors.jade create mode 100644 public/docs/js/latest/api/di_errors/AsyncBindingError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/CyclicDependencyError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/InstantiationError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/InvalidBindingError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/NoAnnotationError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/NoProviderError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/ProviderError-class.jade create mode 100644 public/docs/js/latest/api/di_errors/_data.json create mode 100644 public/docs/js/latest/api/directives.jade create mode 100644 public/docs/js/latest/api/directives/For-class.jade create mode 100644 public/docs/js/latest/api/directives/If-class.jade create mode 100644 public/docs/js/latest/api/directives/NonBindable-class.jade create mode 100644 public/docs/js/latest/api/directives/Switch-class.jade create mode 100644 public/docs/js/latest/api/directives/SwitchDefault-class.jade create mode 100644 public/docs/js/latest/api/directives/SwitchWhen-class.jade create mode 100644 public/docs/js/latest/api/directives/_data.json create mode 100644 public/docs/js/latest/api/forms.jade create mode 100644 public/docs/js/latest/api/forms/CheckboxControlValueAccessor-class.jade create mode 100644 public/docs/js/latest/api/forms/Control-class.jade create mode 100644 public/docs/js/latest/api/forms/ControlArray-class.jade create mode 100644 public/docs/js/latest/api/forms/ControlDirective-class.jade create mode 100644 public/docs/js/latest/api/forms/ControlGroup-class.jade create mode 100644 public/docs/js/latest/api/forms/ControlGroupDirective-class.jade create mode 100644 public/docs/js/latest/api/forms/DefaultValueAccessor-class.jade create mode 100644 public/docs/js/latest/api/forms/FormBuilder-class.jade create mode 100644 public/docs/js/latest/api/forms/FormDirectives-var.jade create mode 100644 public/docs/js/latest/api/forms/INVALID-var.jade create mode 100644 public/docs/js/latest/api/forms/VALID-var.jade create mode 100644 public/docs/js/latest/api/forms/Validators-class.jade create mode 100644 public/docs/js/latest/api/forms/_data.json create mode 100644 public/docs/js/latest/api/pipes.jade create mode 100644 public/docs/js/latest/api/pipes/CollectionChangeRecord-class.jade create mode 100644 public/docs/js/latest/api/pipes/IterableChanges-class.jade create mode 100644 public/docs/js/latest/api/pipes/KVChangeRecord-class.jade create mode 100644 public/docs/js/latest/api/pipes/KeyValueChanges-class.jade create mode 100644 public/docs/js/latest/api/pipes/KeyValueChangesFactory-class.jade create mode 100644 public/docs/js/latest/api/pipes/NullPipe-class.jade create mode 100644 public/docs/js/latest/api/pipes/NullPipeFactory-class.jade create mode 100644 public/docs/js/latest/api/pipes/Pipe-class.jade create mode 100644 public/docs/js/latest/api/pipes/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/abstract_change_detector/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/binding_record/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/change_detection/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/change_detection_util/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/change_detector_ref/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/coalesce/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/constants/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/directive_record/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/dynamic_change_detector/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/exceptions/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/interfaces/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/parser/ast/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/parser/lexer/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/parser/locals/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/parser/parser/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/pipes/iterable_changes/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/pipes/keyvalue_changes/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/pipes/null_pipe/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/pipes/pipe/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/pipes/pipe_registry/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/proto_change_detector/_data.json create mode 100644 public/docs/js/latest/api/src/change_detection/proto_record/_data.json create mode 100644 public/docs/js/latest/api/src/core/annotations/annotations/_data.json create mode 100644 public/docs/js/latest/api/src/core/annotations/di/_data.json create mode 100644 public/docs/js/latest/api/src/core/annotations/view/_data.json create mode 100644 public/docs/js/latest/api/src/core/annotations/visibility/_data.json create mode 100644 public/docs/js/latest/api/src/core/application/_data.json create mode 100644 public/docs/js/latest/api/src/core/application_tokens/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/compiler/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/component_url_mapper/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/directive_metadata/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/directive_metadata_reader/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/dynamic_component_loader/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/element_binder/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/element_injector/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/interfaces/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/ng_element/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/proto_view_factory/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/query_list/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/template_resolver/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/view/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/view_container/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/view_factory/_data.json create mode 100644 public/docs/js/latest/api/src/core/compiler/view_hydrator/_data.json create mode 100644 public/docs/js/latest/api/src/core/exception_handler/_data.json create mode 100644 public/docs/js/latest/api/src/core/life_cycle/life_cycle/_data.json create mode 100644 public/docs/js/latest/api/src/core/testability/testability/_data.json create mode 100644 public/docs/js/latest/api/src/di/annotations/_data.json create mode 100644 public/docs/js/latest/api/src/di/binding/_data.json create mode 100644 public/docs/js/latest/api/src/di/exceptions/_data.json create mode 100644 public/docs/js/latest/api/src/di/injector/_data.json create mode 100644 public/docs/js/latest/api/src/di/key/_data.json create mode 100644 public/docs/js/latest/api/src/di/opaque_token/_data.json create mode 100644 public/docs/js/latest/api/src/directives/class/_data.json create mode 100644 public/docs/js/latest/api/src/directives/for/_data.json create mode 100644 public/docs/js/latest/api/src/directives/if/_data.json create mode 100644 public/docs/js/latest/api/src/directives/non_bindable/_data.json create mode 100644 public/docs/js/latest/api/src/directives/switch/_data.json create mode 100644 public/docs/js/latest/api/src/dom/dom_adapter/_data.json create mode 100644 public/docs/js/latest/api/src/dom/generic_browser_adapter/_data.json create mode 100644 public/docs/js/latest/api/src/forms/directives/_data.json create mode 100644 public/docs/js/latest/api/src/forms/form_builder/_data.json create mode 100644 public/docs/js/latest/api/src/forms/model/_data.json create mode 100644 public/docs/js/latest/api/src/forms/validator_directives/_data.json create mode 100644 public/docs/js/latest/api/src/forms/validators/_data.json create mode 100644 public/docs/js/latest/api/src/mock/template_resolver_mock/_data.json create mode 100644 public/docs/js/latest/api/src/mock/vm_turn_zone_mock/_data.json create mode 100644 public/docs/js/latest/api/src/mock/xhr_mock/_data.json create mode 100644 public/docs/js/latest/api/src/reflection/reflector/_data.json create mode 100644 public/docs/js/latest/api/src/render/api/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/compile_control/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/compile_element/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/compile_pipeline/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/compile_step/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/compile_step_factory/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/compiler/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/directive_parser/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/property_binding_parser/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/selector/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/template_loader/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/text_interpolation_parser/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/compiler/view_splitter/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/direct_dom_renderer/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/events/event_manager/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/events/hammer_common/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/events/key_events/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/content_tag/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/light_dom/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/native_shadow_dom_strategy/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/shadow_css/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/shadow_dom_compile_step/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/shadow_dom_strategy/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/style_inliner/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/style_url_resolver/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/shadow_dom/util/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/util/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/element_binder/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/property_setter_factory/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/proto_view/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/proto_view_builder/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/view/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/view_container/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/view_factory/_data.json create mode 100644 public/docs/js/latest/api/src/render/dom/view/view_hydrator/_data.json create mode 100644 public/docs/js/latest/api/src/services/ruler/_data.json create mode 100644 public/docs/js/latest/api/src/services/title/_data.json create mode 100644 public/docs/js/latest/api/src/services/url_resolver/_data.json create mode 100644 public/docs/js/latest/api/src/services/xhr/_data.json create mode 100644 public/docs/js/latest/api/src/test_lib/benchmark_util/_data.json create mode 100644 public/docs/js/latest/api/src/test_lib/test_bed/_data.json create mode 100644 public/docs/js/latest/api/src/test_lib/test_injector/_data.json create mode 100644 public/docs/js/latest/api/src/test_lib/utils/_data.json create mode 100644 public/docs/js/latest/api/template.jade create mode 100644 public/docs/js/latest/api/template/Compiler-class.jade create mode 100644 public/docs/js/latest/api/template/ViewContainer-class.jade create mode 100644 public/docs/js/latest/api/template/_data.json create mode 100644 public/docs/js/latest/api/test.jade create mode 100644 public/docs/js/latest/api/test/TestBed-class.jade create mode 100644 public/docs/js/latest/api/test/_data.json create mode 100644 public/docs/js/latest/api/test/inject-function.jade create mode 100644 public/docs/js/latest/api/test_lib/_data.json create mode 100644 public/docs/js/latest/api/view.jade create mode 100644 public/docs/js/latest/api/view/ComponentRef-class.jade create mode 100644 public/docs/js/latest/api/view/DynamicComponentLoader-class.jade create mode 100644 public/docs/js/latest/api/view/ElementRef-class.jade create mode 100644 public/docs/js/latest/api/view/QueryList-class.jade create mode 100644 public/docs/js/latest/api/view/_data.json create mode 100644 public/resources/js/vendor/jquery.js diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade index adc7bab4cb..9fa737e688 100644 --- a/public/_includes/_scripts-include.jade +++ b/public/_includes/_scripts-include.jade @@ -1,13 +1,16 @@ + +script(src="/resources/js/vendor/prettify.js") +script(src="/resources/js/vendor/lang-basic.js") +script(src="/resources/js/vendor/lang-dart.js") +script(src="/resources/js/vendor/jquery.js") + + script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js") script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js") - -script(src="/resources/js/vendor/prettify.js") -script(src="/resources/js/vendor/lang-basic.js") -script(src="/resources/js/vendor/lang-dart.js") script(src="/resources/js/site.js") diff --git a/public/docs/js/latest/api/_data.json b/public/docs/js/latest/api/_data.json deleted file mode 100644 index 0390cac11f..0000000000 --- a/public/docs/js/latest/api/_data.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "annotations": { - "title": "Annotations" - }, - - "change-detection": { - "title": "Change Detection" - } -} diff --git a/public/docs/js/latest/api/annotations/Ancestor-class.jade b/public/docs/js/latest/api/annotations/Ancestor-class.jade new file mode 100644 index 0000000000..cde8712e22 --- /dev/null +++ b/public/docs/js/latest/api/annotations/Ancestor-class.jade @@ -0,0 +1,74 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/visibility.js (line 105) + +:markdown + Specifies that an injector should retrieve a dependency from any ancestor element. + + An ancestor is any element between the parent element and shadow root. + + + ## Example + + Here is a simple directive that retrieves a dependency from an ancestor element. + + ``` + @Decorator({ + selector: '[dependency]', + properties: { + 'id':'dependency' + } + }) + class Dependency { + id:string; + } + + + @Decorator({ + selector: '[my-directive]' + }) + class Dependency { + constructor(@Ancestor() dependency:Dependency) { + expect(dependency.id).toEqual(2); + }; + } + ``` + + We use this with the following HTML template: + + ``` +
+
+
+
+
+
+
+ ``` + + The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the + nearest ancestor element: + - The current element `dependency="3"` is skipped because it is not an ancestor. + - Next parent has no directives `
` + - Next parent has the `Dependency` directive and so the dependency is satisfied. + + Angular injects `dependency=2`. + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + () + + + + :markdown + + + + diff --git a/public/docs/js/latest/api/annotations/Attribute-class.jade b/public/docs/js/latest/api/annotations/Attribute-class.jade new file mode 100644 index 0000000000..38e5211bdd --- /dev/null +++ b/public/docs/js/latest/api/annotations/Attribute-class.jade @@ -0,0 +1,72 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/di.js (line 53) + +: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 + @Decorator({ + selector: `input' + }) + class InputDecorator { + constructor(@Attribute('type') type) { + // type would be `text` in this example + } + } + ``` + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + (attributeName) + + + + :markdown + + + + + + .l-sub-section + h3 attributeName + + + + :markdown + + + + + + + .l-sub-section + h3 token + + + + :markdown + + + + + diff --git a/public/docs/js/latest/api/annotations/Decorator-class.jade b/public/docs/js/latest/api/annotations/Decorator-class.jade new file mode 100644 index 0000000000..c3826ebfac --- /dev/null +++ b/public/docs/js/latest/api/annotations/Decorator-class.jade @@ -0,0 +1,106 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/annotations.js (line 750) + +: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 [Directive]s. + - are best used as a composition pattern () + + Decorators differ from [Component]s in that they: + - can have multiple decorators per element + - do not create their own evaluation context + - do not have a template (and therefor do not create Shadow DOM) + + + ## Example + + Here we use a decorator directive to simply define basic tool-tip behavior. + + ``` + @Decorator({ + selector: '[tooltip]', + properties: { + 'text': 'tooltip' + }, + hostListeners: { + 'onmouseenter': 'onMouseEnter()', + 'onmouseleave': 'onMouseLeave()' + } + }) + class Tooltip{ + text:string; + overlay:Overlay; // NOT YET IMPLEMENTED + overlayManager:OverlayManager; // NOT YET IMPLEMENTED + + constructor(overlayManager:OverlayManager) { + this.overlay = overlay; + } + + onMouseEnter() { + // exact signature to be determined + this.overlay = this.overlayManager.open(text, ...); + } + + onMouseLeave() { + this.overlay.close(); + this.overlay = null; + } + } + ``` + In our HTML template, we can then add this behavior to a `
` or any other element with the `tooltip` selector, + like so: + + ``` +
+ ``` + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + ({ + selector, + properties, + events, + hostListeners, + lifecycle, + compileChildren = true, + }:{ + selector:string, + properties:any, + events:List, + hostListeners: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/DynamicComponent-class.jade b/public/docs/js/latest/api/annotations/DynamicComponent-class.jade new file mode 100644 index 0000000000..64f2c8be4e --- /dev/null +++ b/public/docs/js/latest/api/annotations/DynamicComponent-class.jade @@ -0,0 +1,93 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/annotations.js (line 655) + +:markdown + Directive used for dynamically loading components. + + Regular Angular components are statically resolved. DynamicComponent allows to you 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. + + + ## 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. + + ``` + @DynamicComponent({ + selector: 'dynamic-comp' + }) + class DynamicComp { + helloCmp:HelloCmp; + constructor(loader:DynamicComponentLoader, location:PrivateComponentLocation) { + 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 + h3 constructor + + + pre.prettyprint + code. + ({ + selector, + properties, + events, + hostListeners, + injectables, + lifecycle + }:{ + selector:string, + properties:Object, + events:List, + hostListeners:Object, + injectables:List, + lifecycle:List + }={}) + + + + :markdown + + + + + + .l-sub-section + h3 injectables + + + + :markdown + Same as [Component.injectables]. + + + + diff --git a/public/docs/js/latest/api/annotations/Parent-class.jade b/public/docs/js/latest/api/annotations/Parent-class.jade new file mode 100644 index 0000000000..2eaad1cac8 --- /dev/null +++ b/public/docs/js/latest/api/annotations/Parent-class.jade @@ -0,0 +1,61 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/visibility.js (line 44) + +:markdown + Specifies that an injector should retrieve a dependency from the direct parent. + + ## Example + + Here is a simple directive that retrieves a dependency from its parent element. + + ``` + @Decorator({ + selector: '[dependency]', + properties: { + 'id':'dependency' + } + }) + class Dependency { + id:string; + } + + + @Decorator({ + selector: '[my-directive]' + }) + class Dependency { + constructor(@Parent() dependency:Dependency) { + expect(dependency.id).toEqual(1); + }; + } + ``` + + We use this with the following HTML template: + + ``` +
+
+
+ ``` + The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the + parent element (even thought the current element could resolve it): Angular injects `dependency=1`. + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + () + + + + :markdown + + + + diff --git a/public/docs/js/latest/api/annotations/PropertySetter-class.jade b/public/docs/js/latest/api/annotations/PropertySetter-class.jade new file mode 100644 index 0000000000..cc3812d055 --- /dev/null +++ b/public/docs/js/latest/api/annotations/PropertySetter-class.jade @@ -0,0 +1,53 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/di.js (line 12) + +:markdown + Specifies that a function for setting host properties should be injected. + + NOTE: This is changing pre 1.0. + + The directive can inject a property setter that would allow setting this property on the host element. + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + (propName) + + + + :markdown + + + + + + .l-sub-section + h3 propName + + + + :markdown + + + + + + + .l-sub-section + h3 token + + + + :markdown + + + + + diff --git a/public/docs/js/latest/api/annotations/Query-class.jade b/public/docs/js/latest/api/annotations/Query-class.jade new file mode 100644 index 0000000000..a80a868aeb --- /dev/null +++ b/public/docs/js/latest/api/annotations/Query-class.jade @@ -0,0 +1,39 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/di.js (line 77) + +:markdown + Specifies that a [QueryList] should be injected. + + See: [QueryList] for usage and example. + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + (directive) + + + + :markdown + + + + + + .l-sub-section + h3 directive + + + + :markdown + + + + + diff --git a/public/docs/js/latest/api/annotations/View-class.jade b/public/docs/js/latest/api/annotations/View-class.jade new file mode 100644 index 0000000000..d901a2faf7 --- /dev/null +++ b/public/docs/js/latest/api/annotations/View-class.jade @@ -0,0 +1,119 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/view.js (line 34) + +:markdown + Declare the available HTML templates for an application. + + Each angular component requires a single `@Component` and at least one `@View` annotation. The @View + annotation specifies the HTML template to use, and lists the directives that are active within the template. + + When a component is instantiated, the template is loaded into the component's shadow root, and the + expressions and statements in the template are evaluated against the component. + + For details on the `@Component` annotation, see [Component]. + + ## Example + + ``` + @Component({ + selector: 'greet' + }) + @View({ + template: 'Hello {{name}}!', + directives: [GreetUser, Bold] + }) + class Greet { + name: string; + + constructor() { + this.name = 'World'; + } + } + ``` + +.l-main-section + h2 Members + .l-sub-section + h3 constructor + + + pre.prettyprint + code. + ({ + templateUrl, + template, + directives + }: { + templateUrl: string, + template: string, + directives: List<Type> + }) + + + + :markdown + + + + + + .l-sub-section + h3 directives + + + + :markdown + Specify a list of directives that are active within a template. [TODO: true?] + + Directives must be listed explicitly to provide proper component encapsulation. + + + + ```javascript + @Component({ + selector: 'my-component' + }) + @View({ + directives: [For] + template: ' +
    +
  • {{item}}
    • +
' + }) + class MyComponent { + } + ``` + + + + + + .l-sub-section + h3 template + + + + :markdown + Specify an inline template for an angular component. + + NOTE: either `templateURL` or `template` should be used, but not both. + + + + + + .l-sub-section + h3 templateUrl + + + + :markdown + Specify a template URL for an angular component. + + NOTE: either `templateURL` or `template` should be used, but not both. + + + + diff --git a/public/docs/js/latest/api/annotations/Viewport-class.jade b/public/docs/js/latest/api/annotations/Viewport-class.jade new file mode 100644 index 0000000000..b5062fb744 --- /dev/null +++ b/public/docs/js/latest/api/annotations/Viewport-class.jade @@ -0,0 +1,124 @@ + +p. + exported from angular2/annotations + defined in angular2/src/core/annotations/annotations.js (line 879) + +:markdown + Directive that controls the instantiation, destruction, and positioning of inline template elements. + + A viewport directive uses a [ViewContainer] to instantiate, insert, move, and destroy views at runtime. + The [ViewContainer] is created as a result of `