merge with master

This commit is contained in:
Alex Wolfe 2015-05-01 06:51:21 -07:00
commit d4086a71bb
82 changed files with 656 additions and 794 deletions

View File

@ -1,5 +1,11 @@
textFormat = ''
if current.path[4] && current.path[3] == 'api'
textFormat = 'is-standard-case'
header(class="hero background-sky")
h1.hero-title.text-display-1 #{title}
h1(class="hero-title text-display-1 #{textFormat}") #{title}
if subtitle
h2.hero-subtitle.text-subhead #{subtitle}

View File

@ -11,9 +11,10 @@
.l-main-section
h2 <span class="icon-play-circle-outline"></span> Videos
h4 Intro to building Apps
h4 Intro Vidoes
ul
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
h4 ng-conf
ul

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L105">angular2/src/core/annotations/visibility.js (line 105)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/visibility.js#L105">angular2/src/core/annotations_impl/visibility.js (line 105)</a>
:markdown
Specifies that an injector should retrieve a dependency from any ancestor element.
@ -14,7 +14,7 @@ p.location-badge.
Here is a simple directive that retrieves a dependency from an ancestor element.
```
@Decorator({
@Directive({
selector: '[dependency]',
properties: {
'id':'dependency'
@ -25,7 +25,7 @@ p.location-badge.
}
@Decorator({
@Directive({
selector: '[my-directive]'
})
class Dependency {

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L31">angular2/src/core/annotations/di.js (line 31)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/di.js#L31">angular2/src/core/annotations_impl/di.js (line 31)</a>
:markdown
Specifies that a constant attribute value should be injected.
@ -19,10 +19,10 @@ p.location-badge.
A decorator can inject string literal `text` like so:
```javascript
@Decorator({
@Directive({
selector: `input'
})
class InputDecorator {
class InputDirective {
constructor(@Attribute('type') type) {
// type would be `text` in this example
}
@ -50,6 +50,7 @@ p.location-badge.
:markdown
@ -61,6 +62,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L547">angular2/src/core/annotations/annotations.js (line 547)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.js#L732">angular2/src/core/annotations_impl/annotations.js (line 732)</a>
:markdown
Declare reusable UI building blocks for an application.
@ -36,6 +36,51 @@ p.location-badge.
}
```
Dynamically loading a component at runtime:
Regular Angular components are statically resolved. Dynamic components allows to resolve a component at runtime
instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
the dynamically-loaded component becomes permanent and cannot be changed.
Dynamic components are declared just like components, but without a `@View` annotation.
## Example
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
`DynamicComp` requests loading of the `HelloCmp` component.
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
locations.
```
@Component({
selector: 'dynamic-comp'
})
class DynamicComp {
helloCmp:HelloCmp;
constructor(loader:DynamicComponentLoader, location:ElementRef) {
loader.load(HelloCmp, location).then((helloCmp) => {
this.helloCmp = helloCmp;
});
}
}
@Component({
selector: 'hello-cmp'
})
@View({
template: "{{greeting}}"
})
class HelloCmp {
greeting:string;
constructor() {
this.greeting = "hello";
}
}
```
.l-main-section
h2 Members
.l-sub-section
@ -52,7 +97,8 @@ p.location-badge.
hostProperties,
injectables,
lifecycle,
changeDetection = DEFAULT
changeDetection = DEFAULT,
compileChildren = true,
}:{
selector:string,
properties:Object,
@ -61,7 +107,8 @@ p.location-badge.
hostProperties:any,
injectables:List,
lifecycle:List,
changeDetection:string
changeDetection:string,
compileChildren:boolean
}={})
:markdown
@ -75,6 +122,7 @@ p.location-badge.
:markdown
Defines the used change detection strategy.
When a component is instantiated, Angular creates a change detector, which is responsible for propagating
@ -92,6 +140,7 @@ p.location-badge.
:markdown
Defines the set of injectable objects that are visible to a Component and its children.
The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's

View File

@ -1,105 +0,0 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L787">angular2/src/core/annotations/annotations.js (line 787)</a>
: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 <a href='Directive-class.html'><code>Directive</code></a>s.
- are best used as a composition pattern ()
Decorators differ from <a href='Component-class.html'><code>Component</code></a>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 `<div>` or any other element with the `tooltip` selector,
like so:
```
<div tooltip="some text here"></div>
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({
selector,
properties,
events,
hostListeners,
hostProperties,
lifecycle,
compileChildren = true,
}:{
selector:string,
properties:any,
events:List,
hostListeners:any,
hostProperties:any,
lifecycle:List,
compileChildren:boolean
}={})
:markdown
.l-sub-section
h3 compileChildren
:markdown
If set to true the compiler does not compile the children of this directive.

View File

@ -1,13 +1,12 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L240">angular2/src/core/annotations/annotations.js (line 240)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.js#L371">angular2/src/core/annotations_impl/annotations.js (line 371)</a>
:markdown
Directives allow you to attach behavior to elements in the DOM.
Directive is an abstract concept, instead use concrete directives: <a href='Component-class.html'><code>Component</code></a>, <a href='DynamicComponent-class.html'><code>DynamicComponent</code></a>, <a href='Decorator-class.html'><code>Decorator</code></a>
or <a href='Viewport-class.html'><code>Viewport</code></a>.
<a href='Directive-class.html'><code>Directive</code></a>s with an embedded view are called <a href='Component-class.html'><code>Component</code></a>s.
A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
elements in the DOM, the following steps occur:
@ -52,8 +51,8 @@ p.location-badge.
- `@Descendants query:Query<DirectiveType>`: A live collection of any child directives (will be implemented in later relaese).
To inject element-specific special objects, declare the constructor parameter as:
- `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
- `viewContainer: ViewContainerRef` to control child template instantiation, for <a href='Viewport-class.html'><code>Viewport</code></a> directives only
- `element: ElementRef` to obtain a reference to logical element in the view.
- `viewContainer: ViewContainerRef` to control child template instantiation, for <a href='Directive-class.html'><code>Directive</code></a> directives only
- `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
## Example
@ -83,7 +82,7 @@ p.location-badge.
class SomeService {
}
@Decorator({
@Directive({
selector: '[dependency]',
properties: {
'id':'dependency'
@ -102,7 +101,7 @@ p.location-badge.
Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor() {
}
@ -119,7 +118,7 @@ p.location-badge.
Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
component's injector.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(someService: SomeService) {
}
@ -134,7 +133,7 @@ p.location-badge.
Directives can inject other directives declared on the current element.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(dependency: Dependency) {
expect(dependency.id).toEqual(3);
@ -151,7 +150,7 @@ p.location-badge.
the dependency.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@Parent() dependency: Dependency) {
expect(dependency.id).toEqual(2);
@ -168,7 +167,7 @@ p.location-badge.
resolve dependencies for the current element, even if this would satisfy the dependency.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@Ancestor() dependency: Dependency) {
expect(dependency.id).toEqual(2);
@ -186,11 +185,11 @@ p.location-badge.
A directive can also query for other child directives. Since parent directives are instantiated before child
directives, a directive can't simply inject the list of child directives. Instead, the directive
injects a <a href='../view/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved by any
<a href='Viewport-class.html'><code>Viewport</code></a> directive such as a `for`, an `if`, or a `switch`.
injects a <a href='../view/QueryList-class.html'><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved by a directive
that uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> such as a `for`, an `if`, or a `switch`.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@Query(Marker) dependencies:QueryList<Maker>) {
}
@ -207,7 +206,7 @@ p.location-badge.
Similar to `@Children` above, but also includes the children of the child elements.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@QueryDescendents(Marker) dependencies:QueryList<Maker>) {
}
@ -223,7 +222,7 @@ p.location-badge.
This explicitly permits the author of a template to treat some of the surrounding directives as optional.
```
@Decorator({ selector: '[my-directive]' })
@Directive({ selector: '[my-directive]' })
class MyDirective {
constructor(@Optional() dependency:Dependency) {
}
@ -233,6 +232,139 @@ p.location-badge.
This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
found, the injector supplies `null` instead of throwing an error.
## Example
Here we use a decorator directive to simply define basic tool-tip behavior.
```
@Directive({
selector: '[tooltip]',
properties: {
'text': 'tooltip'
},
hostListeners: {
'onmouseenter': 'onMouseEnter()',
'onmouseleave': 'onMouseLeave()'
}
})
class Tooltip{
text:string;
overlay:Overlay; // NOT YET IMPLEMENTED
overlayManager:OverlayManager; // NOT YET IMPLEMENTED
constructor(overlayManager:OverlayManager) {
this.overlay = overlay;
}
onMouseEnter() {
// exact signature to be determined
this.overlay = this.overlayManager.open(text, ...);
}
onMouseLeave() {
this.overlay.close();
this.overlay = null;
}
}
```
In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
like so:
```
<div tooltip="some text here"></div>
```
Directives can also control the instantiation, destruction, and positioning of inline template elements:
A directive uses a <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> to instantiate, insert, move, and destroy views at runtime.
The <a href='../core/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> is created as a result of `<template>` element, and represents a location in the current view
where these actions are performed.
Views are always created as children of the current <a href='View-class.html'><code>View</code></a>, and as siblings of the `<template>` element. Thus a
directive in a child view cannot inject the directive that created it.
Since directives that create views via ViewContainers are common in Angular, and using the full `<template>` element syntax is wordy, Angular
also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
Thus,
```
<ul>
<li *foo="bar" title="text"></li>
</ul>
```
Expands in use to:
```
<ul>
<template [foo]="bar">
<li title="text"></li>
</template>
</ul>
```
Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the directive
controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
## Example
Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
Here is a simple directive that triggers on an `unless` selector:
```
@Directive({
selector: '[unless]',
properties: {
'unless': 'unless'
}
})
export class Unless {
viewContainer: ViewContainerRef;
protoViewRef: ProtoViewRef;
prevCondition: boolean;
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
this.viewContainer = viewContainer;
this.protoViewRef = protoViewRef;
this.prevCondition = null;
}
set unless(newCondition) {
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
this.prevCondition = true;
this.viewContainer.clear();
} else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
this.prevCondition = false;
this.viewContainer.create(this.protoViewRef);
}
}
}
```
We can then use this `unless` selector in a template:
```
<ul>
<li *unless="expr"></li>
</ul>
```
Once the directive instantiates the child view, the shorthand notation for the template expands and the result is:
```
<ul>
<template [unless]="exp">
<li></li>
</template>
<li></li>
</ul>
```
Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
.l-main-section
h2 Members
.l-sub-section
@ -247,14 +379,16 @@ p.location-badge.
events,
hostListeners,
hostProperties,
lifecycle
lifecycle,
compileChildren = true,
}:{
selector:string,
properties:any,
events:List,
hostListeners: any,
hostProperties: any,
lifecycle:List
lifecycle:List,
compileChildren:boolean
}={})
:markdown
@ -263,11 +397,24 @@ p.location-badge.
.l-sub-section
h3 compileChildren
:markdown
If set to true the compiler does not compile the children of this directive.
.l-sub-section
h3 events
:markdown
Enumerates the set of emitted events.
## Syntax
@ -302,6 +449,7 @@ p.location-badge.
hasLifecycleHook(hook:string)
:markdown
Returns true if a directive participates in a given `LifecycleEvent`.
See <a href='onChange-var.html'><code>onChange</code></a>, <a href='onDestroy-var.html'><code>onDestroy</code></a>, <a href='onAllChangesDone-var.html'><code>onAllChangesDone</code></a> for details.
@ -315,6 +463,7 @@ p.location-badge.
:markdown
Specifies which DOM hostListeners a directive listens to.
The `hostListeners` property defines a set of `event` to `method` key-value pairs:
@ -350,14 +499,14 @@ p.location-badge.
You would define the event binding as follows:
```
@Decorator({
@Directive({
selector: 'input',
hostListeners: {
'change': 'onChange($event)',
'window:resize': 'onResize($event)'
}
})
class InputDecorator {
class InputDirective {
onChange(event:Event) {
}
onResize(event:Event) {
@ -365,7 +514,7 @@ p.location-badge.
}
```
Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event.
@ -376,18 +525,19 @@ p.location-badge.
:markdown
Specifies which DOM properties a directives updates.
## Syntax
```
@Decorator({
@Directive({
selector: 'input',
hostProperties: {
'value': 'value'
}
})
class InputDecorator {
class InputDirective {
value:string;
}
@ -404,6 +554,7 @@ p.location-badge.
:markdown
Specifies a set of lifecycle hostListeners in which the directive participates.
See <a href='onChange-var.html'><code>onChange</code></a>, <a href='onDestroy-var.html'><code>onDestroy</code></a>, <a href='onAllChangesDone-var.html'><code>onAllChangesDone</code></a> for details.
@ -417,6 +568,7 @@ p.location-badge.
:markdown
Enumerates the set of properties that accept data binding for a directive.
The `properties` property defines a set of `directiveProperty` to `bindingProperty`
@ -448,7 +600,7 @@ p.location-badge.
with standard Angular syntax. For example:
```
@Decorator({
@Directive({
selector: '[tooltip]',
properties: {
'text': 'tooltip'
@ -484,7 +636,7 @@ p.location-badge.
See <a href='../pipes/Pipe-class.html'><code>Pipe</code></a> and <a href='../pipes/keyValDiff-var.html'><code>keyValDiff</code></a> documentation for more details.
```
@Decorator({
@Directive({
selector: '[class-set]',
properties: {
'classChanges': 'classSet | keyValDiff'
@ -514,6 +666,7 @@ p.location-badge.
:markdown
The CSS selector that triggers the instantiation of a directive.
Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.

View File

@ -1,92 +0,0 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L689">angular2/src/core/annotations/annotations.js (line 689)</a>
: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.
constructor({
selector,
properties,
events,
hostListeners,
hostProperties,
injectables,
lifecycle
}:{
selector:string,
properties:any,
events:List,
hostListeners:any,
hostProperties:any,
injectables:List,
lifecycle:List
}={})
:markdown
.l-sub-section
h3 injectables
:markdown
Same as `injectables` in the <a href='Component-class.html'><code>Component</code></a>.

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L44">angular2/src/core/annotations/visibility.js (line 44)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/visibility.js#L44">angular2/src/core/annotations_impl/visibility.js (line 44)</a>
:markdown
Specifies that an injector should retrieve a dependency from the direct parent.
@ -11,7 +11,7 @@ p.location-badge.
Here is a simple directive that retrieves a dependency from its parent element.
```
@Decorator({
@Directive({
selector: '[dependency]',
properties: {
'id':'dependency'
@ -22,7 +22,7 @@ p.location-badge.
}
@Decorator({
@Directive({
selector: '[my-directive]'
})
class Dependency {

View File

@ -1,49 +0,0 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L12">angular2/src/core/annotations/di.js (line 12)</a>
: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.
constructor(propName)
:markdown
.l-sub-section
h3 propName
:markdown
.l-sub-section
h3 token
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L55">angular2/src/core/annotations/di.js (line 55)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/di.js#L55">angular2/src/core/annotations_impl/di.js (line 55)</a>
:markdown
Specifies that a <a href='../view/QueryList-class.html'><code>QueryList</code></a> should be injected.
@ -29,6 +29,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/view.js#L34">angular2/src/core/annotations/view.js (line 34)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/view.js#L34">angular2/src/core/annotations_impl/view.js (line 34)</a>
:markdown
Declares the available HTML templates for an application.
@ -64,6 +64,7 @@ p.location-badge.
:markdown
Specifies a list of directives that can be used within a template.
Directives must be listed explicitly to provide proper component encapsulation.
@ -94,6 +95,7 @@ p.location-badge.
:markdown
Specify a custom renderer for this View.
If this is set, neither `template`, `templateURL` nor `directives` are used.
@ -106,6 +108,7 @@ p.location-badge.
:markdown
Specifies an inline template for an angular component.
NOTE: either `templateUrl` or `template` should be used, but not both.
@ -119,6 +122,7 @@ p.location-badge.
:markdown
Specifies a template URL for an angular component.
NOTE: either `templateUrl` or `template` should be used, but not both.

View File

@ -1,125 +0,0 @@
p.location-badge.
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L919">angular2/src/core/annotations/annotations.js (line 919)</a>
:markdown
Directive that controls the instantiation, destruction, and positioning of inline template elements.
A viewport directive uses a <a href='../view/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> to instantiate, insert, move, and destroy views at runtime.
The <a href='../view/ViewContainerRef-class.html'><code>ViewContainerRef</code></a> is created as a result of `<template>` element, and represents a location in the current view
where these actions are performed.
Views are always created as children of the current <a href='View-class.html'><code>View</code></a>, and as siblings of the `<template>` element. Thus a
directive in a child view cannot inject the viewport directive that created it.
Since viewport directives are common in Angular, and using the full `<template>` element syntax is wordy, Angular
also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
Thus,
```
<ul>
<li *foo="bar" title="text"></li>
</ul>
```
Expands in use to:
```
<ul>
<template [foo]="bar">
<li title="text"></li>
</template>
</ul>
```
Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the `Viewport`
controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
## Example
Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
Here is a simple viewport directive that triggers on an `unless` selector:
```
@Viewport({
selector: '[unless]',
properties: {
'unless': 'unless'
}
})
export class Unless {
viewContainer: ViewContainerRef;
prevCondition: boolean;
constructor(viewContainer: ViewContainerRef) {
this.viewContainer = viewContainer;
this.prevCondition = null;
}
set unless(newCondition) {
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
this.prevCondition = true;
this.viewContainer.clear();
} else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
this.prevCondition = false;
this.viewContainer.create();
}
}
}
```
We can then use this `unless` selector in a template:
```
<ul>
<li *unless="expr"></li>
</ul>
```
Once the viewport instantiates the child view, the shorthand notation for the template expands and the result is:
```
<ul>
<template [unless]="exp">
<li></li>
</template>
<li></li>
</ul>
```
Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor({
selector,
properties,
events,
hostListeners,
hostProperties,
lifecycle
}:{
selector:string,
properties:any,
hostListeners:any,
hostProperties:any,
events:List,
lifecycle:List
}={})
:markdown

View File

@ -1,7 +1,7 @@
{
"index" : {
"title" : "Annotations",
"intro" : "Annotations provide the additional information that Angular requires in order to run your application. This modulecontains <a href='Component-class.html'><code>Component</code></a>, <a href='Decorator-class.html'><code>Decorator</code></a>, and <a href='View-class.html'><code>View</code></a> annotations, as well as <a href='Parent-class.html'><code>Parent</code></a> and <a href='Ancestor-class.html'><code>Ancestor</code></a> annotations that areused by Angular to resolve dependencies."
"intro" : "Annotations provide the additional information that Angular requires in order to run your application. This modulecontains <a href='Component-class.html'><code>Component</code></a>, <a href='Directive-class.html'><code>Directive</code></a>, and <a href='View-class.html'><code>View</code></a> annotations, as well as <a href='Parent-class.html'><code>Parent</code></a> and <a href='Ancestor-class.html'><code>Ancestor</code></a> annotations that areused by Angular to resolve dependencies."
},
"Directive-class" : {
@ -12,18 +12,6 @@
"title" : "Component Class"
},
"DynamicComponent-class" : {
"title" : "DynamicComponent Class"
},
"Decorator-class" : {
"title" : "Decorator Class"
},
"Viewport-class" : {
"title" : "Viewport Class"
},
"onDestroy-var" : {
"title" : "onDestroy Var"
},

View File

@ -10,7 +10,7 @@
## Example:
```
@Decorator({
@Directive({
selector: '[class-set]',
lifecycle: [onAllChangesDone]
})

View File

@ -15,7 +15,7 @@
## Example:
```
@Decorator({
@Directive({
selector: '[class-set]',
properties: {
'propA': 'propA'

View File

@ -10,7 +10,7 @@
## Example
```
@Decorator({
@Directive({
...,
lifecycle: [onDestroy]
})

View File

@ -35,6 +35,7 @@ p.location-badge.
createProtoChangeDetector(name:string, changeControlStrategy:string=DEFAULT)
:markdown

View File

@ -34,6 +34,7 @@ p.location-badge.
detach()
:markdown
Detaches the change detector from the change detector tree.
The detached change detector will not be checked until it is reattached.
@ -51,6 +52,7 @@ p.location-badge.
reattach()
:markdown
Reattach the change detector to the change detector tree.
This also requests a check of this change detector. This reattached change detector will be checked during the
@ -69,6 +71,7 @@ p.location-badge.
requestCheck()
:markdown
Request to check all ON_PUSH ancestors.

View File

@ -33,6 +33,7 @@ p.location-badge.
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
:markdown
@ -44,6 +45,7 @@ p.location-badge.
:markdown

View File

@ -33,6 +33,7 @@ p.location-badge.
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
:markdown
@ -44,6 +45,7 @@ p.location-badge.
:markdown

View File

@ -41,21 +41,6 @@ p.location-badge.
.l-sub-section
h3 registerWith
pre.prettyprint
code.
registerWith(zone:VmTurnZone, changeDetector:ChangeDetector = null)
:markdown
.l-sub-section
h3 tick
@ -65,6 +50,7 @@ p.location-badge.
tick()
:markdown
Invoke this method to explicitly process change detection and its side-effects.
In development mode, `tick()` also performs a second change detection cycle to ensure that no further

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/core.html">angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/exception_handler.js#L34">angular2/src/core/exception_handler.js (line 34)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/exception_handler.js#L35">angular2/src/core/exception_handler.js (line 35)</a>
:markdown
Provides a hook for centralized exception handling.
@ -41,6 +41,7 @@ p.location-badge.
call(error, stackTrace = null, reason = null)
:markdown

View File

@ -1,52 +0,0 @@
p.location-badge.
exported from <a href="/angular2/core.html">angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/ng_element.js#L13">angular2/src/core/compiler/ng_element.js (line 13)</a>
:markdown
Allows direct access to the underlying DOM element.
Attention: NgElement will be replaced by a different concept
for accessing an element in a way that is compatible with the render layer.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(view, boundElementIndex)
:markdown
.l-sub-section
h3 domElement
:markdown
.l-sub-section
h3 getAttribute
pre.prettyprint
code.
getAttribute(name:string)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.js#L11">angular2/src/core/compiler/view_container_ref.js (line 11)</a>
exported from <a href="/angular2/core.html">angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.js#L12">angular2/src/core/compiler/view_container_ref.js (line 12)</a>
:markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(viewManager: avmModule.AppViewManager, location: eiModule.ElementRef, defaultProtoView: viewModule.AppProtoView)
constructor(viewManager: avmModule.AppViewManager, element: ElementRef)
:markdown
@ -30,6 +30,7 @@ p.location-badge.
clear()
:markdown
@ -42,9 +43,10 @@ p.location-badge.
pre.prettyprint
code.
create(atIndex:number=-1, protoView:viewModule.AppProtoView = null, injector:Injector = null)
create(protoViewRef:ProtoViewRef = null, atIndex:number=-1, injector:Injector = null)
:markdown
@ -60,6 +62,7 @@ p.location-badge.
detach(atIndex:number=-1)
:markdown
The method can be used together with insert to implement a view move, i.e.
moving the dom nodes while the directives in the view stay intact.
@ -76,6 +79,7 @@ p.location-badge.
get(index: number)
:markdown
@ -88,9 +92,10 @@ p.location-badge.
pre.prettyprint
code.
indexOf(view:viewModule.AppView)
indexOf(viewRef:ViewRef)
:markdown
@ -103,9 +108,10 @@ p.location-badge.
pre.prettyprint
code.
insert(view:viewModule.AppView, atIndex:number=-1)
insert(viewRef:ViewRef, atIndex:number=-1)
:markdown
@ -117,6 +123,7 @@ p.location-badge.
:markdown
@ -132,6 +139,7 @@ p.location-badge.
remove(atIndex:number=-1)
:markdown

View File

@ -41,6 +41,7 @@ p.location-badge.
initCallbacks({onTurnStart, onTurnDone, onScheduleMicrotask, onErrorHandler} = {}, [object Object], [object Object], [object Object], [object Object])
:markdown
Initializes the zone hooks.
@ -57,6 +58,7 @@ p.location-badge.
run(fn)
:markdown
Runs `fn` in the inner zone and returns whatever it returns.
In a typical app where the inner zone is the Angular zone, this allows one to make use of the
@ -83,6 +85,7 @@ p.location-badge.
runOutsideAngular(fn)
:markdown
Runs `fn` in the outer zone and returns whatever it returns.
In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's

View File

@ -8,8 +8,8 @@
"title" : "bootstrap Function"
},
"NgElement-class" : {
"title" : "NgElement Class"
"ViewContainerRef-class" : {
"title" : "ViewContainerRef Class"
},
"ExceptionHandler-class" : {

View File

@ -46,6 +46,7 @@ p.location-badge.
:markdown
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies (as `token`s) which
should be injected into the factory function.
@ -75,6 +76,7 @@ p.location-badge.
resolve()
:markdown
Converts the <a href='Binding-class.html'><code>Binding</code></a> into <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>.
<a href='Injector-class.html'><code>Injector</code></a> internally only uses <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>, <a href='Binding-class.html'><code>Binding</code></a> contains convenience binding syntax.
@ -88,6 +90,7 @@ p.location-badge.
:markdown
Binds a key to the alias for an existing key.
An alias means that <a href='Injector-class.html'><code>Injector</code></a> returns the same instance as if the alias token was used. This is in contrast to
@ -128,6 +131,7 @@ p.location-badge.
:markdown
Binds a key to a function which computes the value asynchronously.
@ -159,6 +163,7 @@ p.location-badge.
:markdown
Binds an interface to an implementation / subclass.
@ -196,6 +201,7 @@ p.location-badge.
:markdown
Binds a key to a function which computes the value.
@ -220,6 +226,7 @@ p.location-badge.
:markdown
Binds a key to a value.
@ -241,6 +248,7 @@ p.location-badge.
:markdown
Token used when retrieving this binding. Usually the `Type`.

View File

@ -31,6 +31,7 @@ p.location-badge.
toAlias(aliasToken)
:markdown
Binds a key to the alias for an existing key.
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
@ -75,6 +76,7 @@ p.location-badge.
toAsyncFactory(factoryFunction:Function, dependencies:List = null)
:markdown
Binds a key to a function which computes the value asynchronously.
@ -109,6 +111,7 @@ p.location-badge.
toClass(type:Type)
:markdown
Binds an interface to an implementation / subclass.
@ -150,6 +153,7 @@ p.location-badge.
toFactory(factoryFunction:Function, dependencies:List = null)
:markdown
Binds a key to a function which computes the value.
@ -177,6 +181,7 @@ p.location-badge.
toValue(value)
:markdown
Binds a key to a value.
@ -198,6 +203,7 @@ p.location-badge.
:markdown

View File

@ -64,6 +64,7 @@ p.location-badge.
asyncGet(token, [object Object])
:markdown
Retrieves an instance from the injector asynchronously. Used with asynchronous bindings.
@ -80,6 +81,7 @@ p.location-badge.
createChildFromResolved(bindings:List&lt;ResolvedBinding&gt;, [object Object])
:markdown
Creates a child injector and loads a new set of <a href='ResolvedBinding-class.html'><code>ResolvedBinding</code></a>s into it.
@ -96,6 +98,7 @@ p.location-badge.
fromResolvedBindings(bindings:List&lt;ResolvedBinding&gt;, {defaultBindings=false}={}, [object Object], [object Object])
:markdown
Creates an injector from previously resolved bindings. This bypasses resolution and flattening. This API is the
recommended way to construct injectors in performance-sensitive parts.
@ -113,6 +116,7 @@ p.location-badge.
get(token, [object Object])
:markdown
Retrieves an instance from the injector.
@ -129,6 +133,7 @@ p.location-badge.
getOptional(token, [object Object])
:markdown
Retrieves an instance from the injector.
@ -145,6 +150,7 @@ p.location-badge.
resolve(bindings:List, [object Object])
:markdown
Turns a list of binding definitions into an internal resolved list of resolved bindings.
A resolution is a process of flattening multiple nested lists and converting individual bindings into a
@ -165,6 +171,7 @@ p.location-badge.
resolveAndCreate(bindings:List, {defaultBindings=false}={}, [object Object], [object Object])
:markdown
Resolves bindings and creates an injector based on those bindings. This function is slower than the
corresponding `fromResolvedBindings` because it needs to resolve bindings first. See `resolve` for the
<a href='Injector-class.html'><code>Injector</code></a>.
@ -185,6 +192,7 @@ p.location-badge.
resolveAndCreateChild(bindings:List, [object Object])
:markdown
Creates a child injector and loads a new set of bindings into it.
A resolution is a process of flattening multiple nested lists and converting individual bindings into a

View File

@ -34,6 +34,7 @@ p.location-badge.
:markdown
@ -49,6 +50,7 @@ p.location-badge.
get(token)
:markdown
Retrieves a `Key` for a token.
@ -60,6 +62,7 @@ p.location-badge.
:markdown
@ -71,6 +74,7 @@ p.location-badge.
:markdown
@ -82,6 +86,7 @@ p.location-badge.
:markdown

View File

@ -30,6 +30,7 @@ p.location-badge.
:markdown
Arguments (dependencies) to the `factory` function.
@ -41,6 +42,7 @@ p.location-badge.
:markdown
Factory function which can return an instance of an object represented by a key.
@ -52,6 +54,7 @@ p.location-badge.
:markdown
A key, usually a `Type`.
@ -63,6 +66,7 @@ p.location-badge.
:markdown
Specifies whether the `factory` function returns a `Promise`.

View File

@ -49,6 +49,7 @@ p.location-badge.
:markdown

View File

@ -33,6 +33,7 @@ p.location-badge.
:markdown

View File

@ -35,6 +35,7 @@ p.location-badge.
:markdown

View File

@ -35,6 +35,7 @@ p.location-badge.
:markdown

View File

@ -31,6 +31,7 @@ p.location-badge.
addKey(key)
:markdown
@ -42,6 +43,7 @@ p.location-badge.
:markdown
@ -53,6 +55,7 @@ p.location-badge.
:markdown
@ -64,6 +67,7 @@ p.location-badge.
:markdown
@ -79,6 +83,7 @@ p.location-badge.
toString()
:markdown

View File

@ -30,6 +30,7 @@ p.location-badge.
:markdown
@ -41,6 +42,7 @@ p.location-badge.
:markdown

View File

@ -27,6 +27,7 @@ p.location-badge.
:markdown
@ -42,6 +43,7 @@ p.location-badge.
toString()
:markdown

View File

@ -30,6 +30,7 @@ p.location-badge.
:markdown
@ -45,6 +46,7 @@ p.location-badge.
toString()
:markdown

View File

@ -21,7 +21,7 @@ p.location-badge.
```
<ul>
<li *for="#error in errors; #i = index">
<li *for="#error of errors; #i = index">
Error {{i}} of {{errors.length}}: {{error.message}}
</li>
</ul>
@ -41,7 +41,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(viewContainer:ViewContainerRef)
constructor(viewContainer:ViewContainerRef, protoViewRef: ProtoViewRef)
:markdown
@ -55,9 +55,10 @@ p.location-badge.
pre.prettyprint
code.
bulkInsert(tuples, viewContainer)
bulkInsert(tuples, viewContainer, protoViewRef)
:markdown
@ -73,6 +74,7 @@ p.location-badge.
bulkRemove(tuples, viewContainer)
:markdown
@ -88,6 +90,7 @@ p.location-badge.
iterableChanges(changes)
:markdown
@ -103,6 +106,19 @@ p.location-badge.
perViewChange(view, record)
:markdown
.l-sub-section
h3 protoViewRef
:markdown
@ -114,6 +130,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L33">angular2/src/directives/if.js (line 33)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L34">angular2/src/directives/if.js (line 34)</a>
:markdown
Removes or recreates a portion of the DOM tree based on an {expression}.
@ -32,7 +32,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(viewContainer: ViewContainerRef)
constructor(viewContainer: ViewContainerRef, protoViewRef:ProtoViewRef)
:markdown
@ -49,6 +49,7 @@ p.location-badge.
condition(newCondition)
:markdown
@ -60,6 +61,19 @@ p.location-badge.
:markdown
.l-sub-section
h3 protoViewRef
:markdown
@ -71,6 +85,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L39">angular2/src/directives/switch.js (line 39)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L58">angular2/src/directives/switch.js (line 58)</a>
:markdown
The `Switch` directive is used to conditionally swap DOM structure on your template based on a
@ -53,6 +53,7 @@ p.location-badge.
value(value)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L187">angular2/src/directives/switch.js (line 187)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L211">angular2/src/directives/switch.js (line 211)</a>
:markdown
Defines a default case statement.
@ -22,7 +22,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(viewContainer: ViewContainerRef, sswitch: Switch)
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, sswitch: Switch)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/directives.html">angular2/directives</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L152">angular2/src/directives/switch.js (line 152)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L172">angular2/src/directives/switch.js (line 172)</a>
:markdown
Defines a case statement as an expression.
@ -26,7 +26,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(viewContainer: ViewContainerRef, sswitch: Switch)
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, sswitch: Switch)
:markdown
@ -34,6 +34,22 @@ p.location-badge.
.l-sub-section
h3 onDestroy
pre.prettyprint
code.
onDestroy()
:markdown
.l-sub-section
h3 when
@ -43,6 +59,7 @@ p.location-badge.
when(value)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L68">angular2/src/forms/directives.js (line 68)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L70">angular2/src/forms/directives.js (line 70)</a>
:markdown
The accessor for writing a value and listening to changes on a checkbox input element.
@ -33,6 +33,7 @@ p.location-badge.
:markdown
@ -44,6 +45,7 @@ p.location-badge.
:markdown
@ -59,6 +61,7 @@ p.location-badge.
writeValue(value)
:markdown

View File

@ -34,6 +34,7 @@ p.location-badge.
updateValue(value:any)
:markdown

View File

@ -39,6 +39,7 @@ p.location-badge.
at(index:number)
:markdown
@ -50,6 +51,7 @@ p.location-badge.
:markdown
@ -65,6 +67,7 @@ p.location-badge.
insert(index:number, control:AbstractControl)
:markdown
@ -76,6 +79,7 @@ p.location-badge.
:markdown
@ -91,6 +95,7 @@ p.location-badge.
push(control:AbstractControl)
:markdown
@ -106,6 +111,7 @@ p.location-badge.
removeAt(index:number)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L125">angular2/src/forms/directives.js (line 125)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L127">angular2/src/forms/directives.js (line 127)</a>
:markdown
Binds a control to a DOM element.
@ -52,6 +52,7 @@ p.location-badge.
:markdown
@ -67,6 +68,7 @@ p.location-badge.
onChange(_)
:markdown
@ -78,6 +80,7 @@ p.location-badge.
:markdown
@ -89,6 +92,7 @@ p.location-badge.
:markdown

View File

@ -39,6 +39,7 @@ p.location-badge.
contains(controlName:string)
:markdown
@ -50,6 +51,7 @@ p.location-badge.
:markdown
@ -65,6 +67,7 @@ p.location-badge.
exclude(controlName:string)
:markdown
@ -80,6 +83,7 @@ p.location-badge.
include(controlName:string)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L221">angular2/src/forms/directives.js (line 221)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L223">angular2/src/forms/directives.js (line 223)</a>
:markdown
Binds a control group to a DOM element.
@ -66,6 +66,7 @@ p.location-badge.
addDirective(c:ControlDirective)
:markdown
@ -81,6 +82,7 @@ p.location-badge.
controlGroup(controlGroup)
:markdown
@ -96,6 +98,7 @@ p.location-badge.
findControl(name:string)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/forms.html">angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L35">angular2/src/forms/directives.js (line 35)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L37">angular2/src/forms/directives.js (line 37)</a>
:markdown
The default accessor for writing a value and listening to changes that is used by a <a href='Control-class.html'><code>Control</code></a> directive.
@ -34,6 +34,7 @@ p.location-badge.
:markdown
@ -45,6 +46,7 @@ p.location-badge.
:markdown
@ -60,6 +62,7 @@ p.location-badge.
writeValue(value)
:markdown

View File

@ -33,6 +33,7 @@ p.location-badge.
array(controlsConfig:List, validator:Function = null)
:markdown
@ -48,6 +49,7 @@ p.location-badge.
control(value, validator:Function = null)
:markdown
@ -63,6 +65,7 @@ p.location-badge.
group(controlsConfig, extra = null)
:markdown

View File

@ -23,6 +23,7 @@ p.location-badge.
array(c:modelModule.ControlArray)
:markdown
@ -38,6 +39,7 @@ p.location-badge.
compose(validators:List&lt;Function&gt;)
:markdown
@ -53,6 +55,7 @@ p.location-badge.
group(c:modelModule.ControlGroup)
:markdown
@ -68,6 +71,7 @@ p.location-badge.
nullValidator(c:any)
:markdown
@ -83,6 +87,7 @@ p.location-badge.
required(c:modelModule.Control)
:markdown

View File

@ -50,6 +50,7 @@ p.location-badge.
onDestroy()
:markdown
@ -65,6 +66,7 @@ p.location-badge.
supports(obs)
:markdown
@ -80,6 +82,7 @@ p.location-badge.
transform(obs:Observable)
:markdown

View File

@ -17,6 +17,7 @@ p.location-badge.
create(cdRef)
:markdown
@ -32,6 +33,7 @@ p.location-badge.
supports(obs)
:markdown

View File

@ -26,6 +26,7 @@ p.location-badge.
:markdown
@ -37,6 +38,7 @@ p.location-badge.
:markdown
@ -48,6 +50,7 @@ p.location-badge.
:markdown
@ -63,6 +66,7 @@ p.location-badge.
toString()
:markdown

View File

@ -30,6 +30,7 @@ p.location-badge.
check(collection)
:markdown
@ -41,6 +42,7 @@ p.location-badge.
:markdown
@ -56,6 +58,7 @@ p.location-badge.
forEachAddedItem(fn:Function)
:markdown
@ -71,6 +74,7 @@ p.location-badge.
forEachItem(fn:Function)
:markdown
@ -86,6 +90,7 @@ p.location-badge.
forEachMovedItem(fn:Function)
:markdown
@ -101,6 +106,7 @@ p.location-badge.
forEachPreviousItem(fn:Function)
:markdown
@ -116,6 +122,7 @@ p.location-badge.
forEachRemovedItem(fn:Function)
:markdown
@ -127,6 +134,7 @@ p.location-badge.
:markdown
@ -138,6 +146,7 @@ p.location-badge.
:markdown
@ -153,6 +162,7 @@ p.location-badge.
supports(obj)
:markdown
@ -168,6 +178,7 @@ p.location-badge.
supportsObj(obj)
:markdown
@ -183,6 +194,7 @@ p.location-badge.
toString()
:markdown
@ -198,6 +210,7 @@ p.location-badge.
transform(collection)
:markdown

View File

@ -26,6 +26,7 @@ p.location-badge.
:markdown
@ -37,6 +38,7 @@ p.location-badge.
:markdown
@ -48,6 +50,7 @@ p.location-badge.
:markdown
@ -63,6 +66,7 @@ p.location-badge.
toString()
:markdown

View File

@ -30,6 +30,7 @@ p.location-badge.
check(map)
:markdown
@ -45,6 +46,7 @@ p.location-badge.
forEachAddedItem(fn:Function)
:markdown
@ -60,6 +62,7 @@ p.location-badge.
forEachChangedItem(fn:Function)
:markdown
@ -75,6 +78,7 @@ p.location-badge.
forEachItem(fn:Function)
:markdown
@ -90,6 +94,7 @@ p.location-badge.
forEachPreviousItem(fn:Function)
:markdown
@ -105,6 +110,7 @@ p.location-badge.
forEachRemovedItem(fn:Function)
:markdown
@ -116,6 +122,7 @@ p.location-badge.
:markdown
@ -131,6 +138,7 @@ p.location-badge.
supports(obj)
:markdown
@ -146,6 +154,7 @@ p.location-badge.
supportsObj(obj)
:markdown
@ -161,6 +170,7 @@ p.location-badge.
toString()
:markdown
@ -176,6 +186,7 @@ p.location-badge.
transform(map)
:markdown

View File

@ -16,6 +16,7 @@ p.location-badge.
create(cdRef)
:markdown
@ -31,6 +32,7 @@ p.location-badge.
supports(obj)
:markdown

View File

@ -26,6 +26,7 @@ p.location-badge.
:markdown
@ -41,6 +42,7 @@ p.location-badge.
supports(obj)
:markdown
@ -56,6 +58,7 @@ p.location-badge.
supportsObj(obj)
:markdown
@ -71,6 +74,7 @@ p.location-badge.
transform(value)
:markdown

View File

@ -16,6 +16,7 @@ p.location-badge.
create(cdRef)
:markdown
@ -31,6 +32,7 @@ p.location-badge.
supports(obj)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L32">angular2/src/change_detection/pipes/pipe.js (line 32)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L52">angular2/src/change_detection/pipes/pipe.js (line 52)</a>
:markdown
An interface for extending the list of pipes known to Angular.
@ -33,6 +33,7 @@ p.location-badge.
onDestroy()
:markdown
@ -48,6 +49,7 @@ p.location-badge.
supports(obj)
:markdown
@ -63,6 +65,7 @@ p.location-badge.
transform(value:any)
:markdown

View File

@ -4,7 +4,7 @@ p.location-badge.
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/router/router.js#L18">angular2/src/router/router.js (line 18)</a>
:markdown
# Router
## Router
The router is responsible for mapping URLs to components.
You can see the state of the router by inspecting the read-only field `router.navigating`.
@ -35,6 +35,7 @@ p.location-badge.
activateOutlets(instruction:Instruction)
:markdown
@ -50,6 +51,7 @@ p.location-badge.
childRouter(outletName = &#39;default&#39;)
:markdown
Constructs a child router. You probably don't need to use this unless you're writing a reusable component.
@ -65,9 +67,10 @@ p.location-badge.
config(path:string, component, alias:string=null)
:markdown
Update the routing configuration and trigger a navigation.
# Usage
### Usage
```
router.config('/', SomeCmp);
@ -86,6 +89,7 @@ p.location-badge.
generate(name:string, params:any)
:markdown
Generate a URL from a component name and optional map of parameters. The URL is relative to the app's base href.
@ -101,6 +105,7 @@ p.location-badge.
getRoot()
:markdown
@ -112,6 +117,7 @@ p.location-badge.
:markdown
@ -123,6 +129,7 @@ p.location-badge.
:markdown
@ -138,6 +145,7 @@ p.location-badge.
navigate(url:string)
:markdown
Navigate to a URL. Returns a promise that resolves to the canonical URL for the route.
@ -149,6 +157,7 @@ p.location-badge.
:markdown
@ -160,6 +169,7 @@ p.location-badge.
:markdown
@ -171,6 +181,7 @@ p.location-badge.
:markdown
@ -186,6 +197,7 @@ p.location-badge.
recognize(url:string)
:markdown
Given a URL, returns an instruction representing the component graph
@ -201,6 +213,7 @@ p.location-badge.
registerOutlet(outlet:RouterOutlet, name = &#39;default&#39;)
:markdown
Register an object to notify of route changes. You probably don't need to use this unless you're writing a reusable component.
@ -216,6 +229,7 @@ p.location-badge.
renavigate()
:markdown
Navigates to either the last URL successfully navigated to, or the last URL requested if the router has yet to successfully navigate.
@ -231,6 +245,7 @@ p.location-badge.
subscribe(onNext)
:markdown
Subscribe to URL updates from the router
@ -246,6 +261,7 @@ p.location-badge.
traverseOutlets(fn)
:markdown

View File

@ -30,7 +30,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(ngEl:NgElement, router:Router)
constructor(elementRef:ElementRef, router:Router)
:markdown
@ -47,6 +47,7 @@ p.location-badge.
params(changes)
:markdown
@ -62,6 +63,7 @@ p.location-badge.
route(changes)
:markdown
@ -77,6 +79,7 @@ p.location-badge.
updateHref()
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/test.html">angular2/test</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/test_lib/test_bed.js#L19">angular2/src/test_lib/test_bed.js (line 19)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/test_lib/test_bed.js#L20">angular2/src/test_lib/test_bed.js (line 20)</a>
:markdown
@ -30,6 +30,7 @@ p.location-badge.
createView(component: Type, {context = null, html = null}: {context:any, html: string} = {}, [object Object], [object Object], [object Object])
:markdown
Creates an `AppView` for the given component.
Only either a component or a context needs to be specified but both can be provided for
@ -49,6 +50,7 @@ p.location-badge.
overrideDirective(component: Type, from: Type, to: Type, [object Object], [object Object], [object Object])
:markdown
Overrides the directives from the component <a href='../annotations/View-class.html'><code>View</code></a>.
@ -65,6 +67,7 @@ p.location-badge.
overrideView(component: Type, template: View, [object Object], [object Object])
:markdown
Overrides the <a href='../annotations/View-class.html'><code>View</code></a> of a <a href='../annotations/Component-class.html'><code>Component</code></a>.
@ -81,6 +84,7 @@ p.location-badge.
setInlineTemplate(component: Type, html: string, [object Object], [object Object])
:markdown
Overrides only the html of a <a href='../annotations/Component-class.html'><code>Component</code></a>.
All the other propoerties of the component's <a href='../annotations/View-class.html'><code>View</code></a> are preserved.

View File

@ -35,6 +35,7 @@ p.location-badge.
[Symbol.iterator]()
:markdown
@ -50,6 +51,7 @@ p.location-badge.
add(obj)
:markdown
@ -65,6 +67,7 @@ p.location-badge.
fireCallbacks()
:markdown
@ -80,6 +83,7 @@ p.location-badge.
onChange(callback)
:markdown
@ -95,6 +99,7 @@ p.location-badge.
removeCallback(callback)
:markdown
@ -110,6 +115,7 @@ p.location-badge.
reset(newList)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.js#L46">angular2/src/core/compiler/compiler.js (line 46)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.js#L47">angular2/src/core/compiler/compiler.js (line 47)</a>
:markdown
@ -30,6 +30,7 @@ p.location-badge.
buildRenderDirective(directiveBinding)
:markdown
@ -45,6 +46,7 @@ p.location-badge.
compile(component: Type)
:markdown
@ -60,6 +62,7 @@ p.location-badge.
compileInHost(componentTypeOrBinding:any)
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L11">angular2/src/core/compiler/dynamic_component_loader.js (line 11)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L10">angular2/src/core/compiler/dynamic_component_loader.js (line 10)</a>
:markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(location:ElementRef, instance:any, componentView:AppView, dispose:Function)
constructor(location:ElementRef, instance:any, dispose:Function)
:markdown
@ -21,17 +21,6 @@ p.location-badge.
.l-sub-section
h3 componentView
:markdown
.l-sub-section
h3 dispose
@ -41,6 +30,7 @@ p.location-badge.
dispose()
:markdown
@ -52,17 +42,7 @@ p.location-badge.
:markdown
.l-sub-section
h3 injector
:markdown
@ -74,6 +54,7 @@ p.location-badge.
:markdown
@ -85,6 +66,7 @@ p.location-badge.
:markdown

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L44">angular2/src/core/compiler/dynamic_component_loader.js (line 44)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L37">angular2/src/core/compiler/dynamic_component_loader.js (line 37)</a>
:markdown
Service for dynamically loading a Component into an arbitrary position in the internal Angular
@ -32,6 +32,7 @@ p.location-badge.
loadIntoExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null)
:markdown
Loads a component into the location given by the provided ElementRef. The loaded component
receives injection as if it in the place of the provided ElementRef.
@ -48,6 +49,7 @@ p.location-badge.
loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef, elementOrSelector:any, injector:Injector = null)
:markdown
Loads a component in the element specified by elementOrSelector. The loaded component receives
injection normally as a hosted view.
@ -64,6 +66,7 @@ p.location-badge.
loadNextToExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null)
:markdown
Loads a component next to the provided ElementRef. The loaded component receives
injection normally as a hosted view.

View File

@ -1,7 +1,7 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/element_injector.js#L28">angular2/src/core/compiler/element_injector.js (line 28)</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/element_ref.js#L8">angular2/src/core/compiler/element_ref.js (line 8)</a>
:markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint
code.
constructor(elementInjector, hostView, boundElementIndex, injector, viewManager, defaultProtoView)
constructor(parentView:ViewRef, boundElementIndex:number)
:markdown
@ -26,6 +26,7 @@ p.location-badge.
:markdown
@ -33,43 +34,41 @@ p.location-badge.
.l-sub-section
h3 elementInjector
h3 domElement
:markdown
Exposes the underlying DOM element.
(DEPRECATED way of accessing the DOM, replacement coming)
.l-sub-section
h3 hostView
h3 getAttribute
pre.prettyprint
code.
getAttribute(name:string)
:markdown
Gets an attribute from the underlying DOM element.
(DEPRECATED way of accessing the DOM, replacement coming)
.l-sub-section
h3 injector
:markdown
.l-sub-section
h3 viewContainer
h3 parentView
:markdown

View File

@ -0,0 +1,22 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_ref.js#L36">angular2/src/core/compiler/view_ref.js (line 36)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(protoView)
:markdown

View File

@ -10,7 +10,7 @@ p.location-badge.
The directives are kept in depth-first pre-order traversal of the DOM.
The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop as well as in
template with `*for="of"` viewport.
template with `*for="of"` directive.
NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable
callbacks.
@ -78,6 +78,7 @@ p.location-badge.
onChange(callback)
:markdown
@ -93,6 +94,7 @@ p.location-badge.
removeCallback(callback)
:markdown

View File

@ -1,217 +0,0 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container.js#L12">angular2/src/core/compiler/view_container.js (line 12)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(parentView: viewModule.AppView, defaultProtoView: viewModule.AppProtoView, elementInjector: eiModule.ElementInjector)
:markdown
.l-sub-section
h3 clear
pre.prettyprint
code.
clear()
:markdown
.l-sub-section
h3 create
pre.prettyprint
code.
create(atIndex:number=-1, protoView:viewModule.AppProtoView = null, injector:Injector = null)
:markdown
.l-sub-section
h3 defaultProtoView
:markdown
.l-sub-section
h3 detach
pre.prettyprint
code.
detach(atIndex:number=-1)
:markdown
The method can be used together with insert to implement a view move, i.e.
moving the dom nodes while the directives in the view stay intact.
.l-sub-section
h3 elementInjector
:markdown
.l-sub-section
h3 get
pre.prettyprint
code.
get(index: number)
:markdown
.l-sub-section
h3 getRender
pre.prettyprint
code.
getRender()
:markdown
.l-sub-section
h3 hydrated
pre.prettyprint
code.
hydrated()
:markdown
.l-sub-section
h3 indexOf
pre.prettyprint
code.
indexOf(view:viewModule.AppView)
:markdown
.l-sub-section
h3 insert
pre.prettyprint
code.
insert(view:viewModule.AppView, atIndex:number=-1)
:markdown
.l-sub-section
h3 internalClearWithoutRender
pre.prettyprint
code.
internalClearWithoutRender()
:markdown
.l-sub-section
h3 length
:markdown
.l-sub-section
h3 parentView
:markdown
.l-sub-section
h3 remove
pre.prettyprint
code.
remove(atIndex:number=-1)
:markdown

View File

@ -0,0 +1,50 @@
p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_ref.js#L17">angular2/src/core/compiler/view_ref.js (line 17)</a>
:markdown
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(view:viewModule.AppView)
:markdown
.l-sub-section
h3 render
:markdown
.l-sub-section
h3 setLocal
pre.prettyprint
code.
setLocal(contextName: string, value:any)
:markdown

View File

@ -24,8 +24,12 @@
"title" : "QueryList Class"
},
"ViewContainerRef-class" : {
"title" : "ViewContainerRef Class"
"ViewRef-class" : {
"title" : "ViewRef Class"
},
"ProtoViewRef-class" : {
"title" : "ProtoViewRef Class"
},
"BaseQueryList-class" : {

View File

@ -42,8 +42,7 @@
know to read this file so we don't need to configure them or add command-line options.
pre.prettyprint
# We need to use an unreleased version of TypeScript
$ npm install -g mhegazy/typescript#v1.5-beta
$ npm install -g typescript@^1.5.0-beta
$ tsc --watch
// STEP 3 - Import Angular ##########################
@ -55,8 +54,8 @@
<code>app.ts</code>, both at the root of the project:
pre.prettyprint
$ touch index.html
$ touch app.ts
$ touch index.html
$ touch app.ts
p Inside of <code>app.ts</code>, import the type definitions from Angular:
pre.prettyprint
@ -217,12 +216,16 @@
adds ES6 module loading functionality to browsers.
p.
Add the System.js dependency in the <code>&lt;head&gt;</code> tag:
Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that
it looks like:
pre.prettyprint.linenums
code.
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
p.
@ -230,8 +233,8 @@
pre.prettyprint.linenums
code.
&lt;script&gt;System.import('app');&lt;/script&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;System.import('app');&lt;/script&gt;
// STEP 8 - Run a local server ##########################

View File

@ -11,9 +11,10 @@
.l-main-section
h2 <span class="icon-play-circle-outline"></span> Videos
h4 Intro to building Apps
h4 Intro Vidoes
ul
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
h4 ng-conf
ul

View File

@ -22,6 +22,7 @@
background: lighten($steel, 3%);
color: $tin;
font-weight: 500;
text-transform: none;
&.is-selected {
background: $blueberry;

View File

@ -28,6 +28,10 @@ $hero-padding: $unit * 2;
margin: ($unit * 9) 0px 0px ($unit * 10);
opacity: .87;
&.is-standard-case {
text-transform: none;
}
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {

View File

@ -3,6 +3,18 @@
*
*/
var getTabName = function(name) {
var prettyName = name;
switch(name) {
case 'es5': prettyName = 'ES5'; break;
case 'typescript': prettyName = 'TypeScript'; break;
default: prettyName = name;
}
return prettyName;
};
angularIO.directive('code-tabs', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
@ -31,8 +43,9 @@ angularIO.directive('code-tabs', function() {
$examples.each(function(index, example) {
var $example = $(example);
var name = $example.data('name');
var tabName = getTabName(name);
var selected = (index === 0) ? 'is-selected' : '';
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>");
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + tabName + "</button>");
// ADD EVENTS FOR CODE SNIPPETS
$button.on('click', function(e) {