honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: camelCase Angular (kebab-case removal)

Browse Source 
BREAKING CHANGE:

Angular is now fully camel case.

Before:

    <p *ng-if="cond">
    <my-cmp [my-prop]="exp">
    <my-cmp (my-event)="action()">
    <my-cmp [(my-prop)]="prop">
    <input #my-input>
    <template ng-for #my-item [ng-for-of]=items #my-index="index">

After

    <p *ngIf="cond">
    <my-cmp [myProp]="exp">
    <my-cmp (myEvent)="action()">
    <my-cmp [(myProp)]="prop">
    <input #myInput>`,
    <template ngFor="#my-item" [ngForOf]=items #myIndex="index">

The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
This commit is contained in:
Victor Berchet 2015-11-23 16:02:19 -08:00 committed by Igor Minar
parent b386d1134a
commit da9b46a071
120 changed files with 759 additions and 802 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
modules/angular2/docs/cheatsheet/built-in-directives.md
View File

@ -7,28 +7,29 @@ Built-in directives
@cheatsheetItem @cheatsheetItem
syntax: syntax:
`<section *ng-if="showSection">`|`*ng-if` `<section *ngIf="showSection">`|`*ngIf`
description: description:
Removes or recreates a portion of the DOM tree based on the showSection expression. Removes or recreates a portion of the DOM tree based on the showSection expression.
@cheatsheetItem @cheatsheetItem
syntax: syntax:
`<li *ng-for="#item of list">`|`*ng-for` `<li *ngFor="#item of list">`|`*ngFor`
description: description:
Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
@cheatsheetItem @cheatsheetItem
syntax: syntax:
`<div [ng-switch]="conditionExpression"> `<div [ngSwitch]="conditionExpression">
<template [ng-switch-when]="case1Exp">...</template> <template [ngSwitchWhen]="case1Exp">...</template>
<template ng-switch-when="case2LiteralString">...</template> <template ngSwitchWhen="case2LiteralString">...</template>
<template ng-switch-default>...</template> <template ngSwitchDefault>...</template>
</div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default` </div>`|`[ngSwitch]`|`[ngSwitchWhen]`|`ngSwitchWhen`|`ngSwitchDefault`
description: description:
Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression. Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
@cheatsheetItem @cheatsheetItem
syntax: syntax:
`<div [ng-class]="{active: isActive, disabled: isDisabled}">`|`[ng-class]` `<div [ngClass]="{active: isActive, disabled: isDisabled}">`|`[ngClass]`
description: description:
Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map. Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.

2
modules/angular2/docs/cheatsheet/forms.md
View File

@ -7,6 +7,6 @@ Forms
@cheatsheetItem @cheatsheetItem
syntax: syntax:
`<input [(ng-model)]="userName">`|`[(ng-model)]` `<input [(ngModel)]="userName">`|`[(ngModel)]`
description: description:
Provides two-way data-binding, parsing and validation for form controls. Provides two-way data-binding, parsing and validation for form controls.

3
modules/angular2/docs/cheatsheet/routing.md
View File

@ -30,8 +30,7 @@ Marks the location to load the component of the active route.
@cheatsheetItem @cheatsheetItem
syntax: `<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">`|`[routerLink]`
`<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">`|`[router-link]`
description: description:
Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route. Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route.

2
modules/angular2/docs/cheatsheet/template-syntax.md
View File

@ -50,7 +50,7 @@ Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
syntax: syntax:
`<my-cmp [(title)]="name">`|`[(title)]` `<my-cmp [(title)]="name">`|`[(title)]`
description: description:
Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (title-change)="name=$event">` Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">`
@cheatsheetItem @cheatsheetItem
syntax: syntax:

32
modules/angular2/docs/core/01_templates.md
View File

@ -359,20 +359,20 @@ Example of conditionally included template:
``` ```
Hello {{user}}! Hello {{user}}!
<div template="ng-if: isAdministrator"> <div template="ngIf: isAdministrator">
...administrator menu here... ...administrator menu here...
</div> </div>
``` ```
In the above example the `ng-if` directive determines whether the child view (an instance of the child template) should be In the above example the `ngIf` directive determines whether the child view (an instance of the child template) should be
inserted into the root view. The `ng-if` makes this decision based on if the `isAdministrator` binding is true. inserted into the root view. The `ngIf` makes this decision based on if the `isAdministrator` binding is true.
The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
identical. identical.
``` ```
Hello {{user}}! Hello {{user}}!
<template [ng-if]="isAdministrator"> <template [ngIf]="isAdministrator">
<div> <div>
...administrator menu here... ...administrator menu here...
</div> </div>
@ -383,22 +383,22 @@ Hello {{user}}!
### Template Microsyntax ### Template Microsyntax
Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
of the templates occurs. One such example is `ng-for`. of the templates occurs. One such example is `ngFor`.
``` ```
<form #foo=form> <form #foo=form>
</form> </form>
<ul> <ul>
<template [ng-for] #person [ng-for-of]="people" #i="index"> <template [ngFor] #person [ngForOf]="people" #i="index">
<li>{{i}}. {{person}}<li> <li>{{i}}. {{person}}<li>
</template> </template>
</ul> </ul>
``` ```
Where: Where:
* `[ng-for]` triggers the for directive. * `[ngFor]` triggers the for directive.
* `#person` exports the implicit `ng-for` item. * `#person` exports the implicit `ngFor` item.
* `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller. * `[ngForOf]="people"` binds an iterable object to the `ngFor` controller.
* `#i=index` exports item index as `i`. * `#i=index` exports item index as `i`.
The above example is explicit but quite wordy. For this reason in most situations a short hand version of the The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
@ -406,7 +406,7 @@ syntax is preferable.
``` ```
<ul> <ul>
<li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li> <li template="ngFor; #person; of=people; #i=index;">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
@ -416,24 +416,24 @@ which allows us to further shorten the text.
``` ```
<ul> <ul>
<li template="ng-for #person of people #i=index">{{i}}. {{person}}<li> <li template="ngFor #person of people #i=index">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
microsyntax for `ng-for`. microsyntax for `ngFor`.
``` ```
<ul> <ul>
<li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li> <li template="ngFor: var person of people; var i=index">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so: Finally, we can move the `ngFor` keyword to the left hand side and prefix it with `*` as so:
``` ```
<ul> <ul>
<li *ng-for="var person of people; var i=index">{{i}}. {{person}}<li> <li *ngFor="var person of people; var i=index">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
@ -544,7 +544,7 @@ Angular are:
<div title="{{expression}}">{{expression}}</div> <div title="{{expression}}">{{expression}}</div>
<div [title]="expression">...</div> <div [title]="expression">...</div>
<div bind-title="expression">...</div> <div bind-title="expression">...</div>
<div template="ng-if: expression">...</div> <div template="ngIf: expression">...</div>
``` ```
Expressions are simplified version of expression in the language in which you are writing your application. (i.e. Expressions are simplified version of expression in the language in which you are writing your application. (i.e.

2
modules/angular2/docs/core/02_directives.md
View File

@ -161,7 +161,7 @@ Example of usage:
## Directives that use a ViewContainer ## Directives that use a ViewContainer
Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.) Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ngIf` and `ngFor`.)
* Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer. * Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
* The child views show up as siblings of the directive in the DOM. * The child views show up as siblings of the directive in the DOM.

2
modules/angular2/docs/core/10_view.md
View File

@ -94,7 +94,7 @@ Let's start with a View such as:
``` ```
<ul> <ul>
<li template="ng-for: #person of people">{{person}}</li> <li template="ngFor: #person of people">{{person}}</li>
</ul> </ul>
``` ```

2
modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts
View File

@ -22,7 +22,7 @@ export class SlicePipeStringExample {
@Component({ @Component({
selector: 'slice-list-example', selector: 'slice-list-example',
template: `<div> template: `<div>
<li *ng-for="var i of collection | slice:1:3">{{i}}</li> <li *ngFor="var i of collection | slice:1:3">{{i}}</li>
</div>` </div>`
}) })
export class SlicePipeListExample { export class SlicePipeListExample {

4
modules/angular2/examples/router/ts/can_activate/can_activate_example.ts
View File

@ -24,8 +24,8 @@ class ControlPanelCmp {
template: ` template: `
<h1>Welcome Home!</h1> <h1>Welcome Home!</h1>
<div> <div>
Edit <a [router-link]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> | Edit <a [routerLink]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
Edit <a [router-link]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a> Edit <a [routerLink]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
</div> </div>
`, `,
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]

4
modules/angular2/examples/router/ts/can_deactivate/can_deactivate_example.ts
View File

@ -34,8 +34,8 @@ class NoteCmp implements CanDeactivate {
template: ` template: `
<h1>Your Notes</h1> <h1>Your Notes</h1>
<div> <div>
Edit <a [router-link]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> | Edit <a [routerLink]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
Edit <a [router-link]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a> Edit <a [routerLink]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
</div> </div>
`, `,
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]

4
modules/angular2/examples/router/ts/on_activate/on_activate_example.ts
View File

@ -25,8 +25,8 @@ class MyCmp implements OnActivate {
template: ` template: `
<h1>My App</h1> <h1>My App</h1>
<nav> <nav>
<a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> | <a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a> <a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,

6
modules/angular2/examples/router/ts/on_deactivate/on_deactivate_example.ts
View File

@ -34,13 +34,13 @@ class MyCmp implements OnDeactivate {
template: ` template: `
<h1>My App</h1> <h1>My App</h1>
<nav> <nav>
<a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> | <a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a> <a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<div id="log"> <div id="log">
<h2>Log:</h2> <h2>Log:</h2>
<p *ng-for="#logItem of logService.logs">{{ logItem }}</p> <p *ngFor="#logItem of logService.logs">{{ logItem }}</p>
</div> </div>
`, `,
directives: [ROUTER_DIRECTIVES, NgFor] directives: [ROUTER_DIRECTIVES, NgFor]

4
modules/angular2/examples/router/ts/reuse/reuse_example.ts
View File

@ -37,8 +37,8 @@ class MyCmp implements CanReuse,
selector: 'example-app', selector: 'example-app',
template: ` template: `
<h1>Say hi to...</h1> <h1>Say hi to...</h1>
<a [router-link]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> | <a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
<a [router-link]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a> <a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]

4
modules/angular2/http.ts
View File

@ -54,7 +54,7 @@ export {URLSearchParams} from './src/http/url_search_params';
* <div> * <div>
* <h1>People</h1> * <h1>People</h1>
* <ul> * <ul>
* <li *ng-for="#person of people"> * <li *ngFor="#person of people">
* {{person.name}} * {{person.name}}
* </li> * </li>
* </ul> * </ul>
@ -185,7 +185,7 @@ export const HTTP_BINDINGS = HTTP_PROVIDERS;
* <div> * <div>
* <h1>People</h1> * <h1>People</h1>
* <ul> * <ul>
* <li *ng-for="#person of people"> * <li *ngFor="#person of people">
* {{person.name}} * {{person.name}}
* </li> * </li>
* </ul> * </ul>

4
modules/angular2/src/common/directives/ng_class.ts
View File

@ -37,7 +37,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
* selector: 'toggle-button', * selector: 'toggle-button',
* inputs: ['isDisabled'], * inputs: ['isDisabled'],
* template: ` * template: `
* <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}" * <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
* (click)="toggle(!isOn)"> * (click)="toggle(!isOn)">
* Click me! * Click me!
* </div>`, * </div>`,
@ -70,7 +70,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
* } * }
* ``` * ```
*/ */
@Directive({selector: '[ng-class]', inputs: ['rawClass: ng-class', 'initialClasses: class']}) @Directive({selector: '[ngClass]', inputs: ['rawClass: ngClass', 'initialClasses: class']})
export class NgClass implements DoCheck, OnDestroy { export class NgClass implements DoCheck, OnDestroy {
private _differ: any; private _differ: any;
private _mode: string; private _mode: string;

8
modules/angular2/src/common/directives/ng_for.ts
View File

@ -50,16 +50,16 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
* *
* # Syntax * # Syntax
* *
* - `<li *ng-for="#item of items; #i = index">...</li>` * - `<li *ngFor="#item of items; #i = index">...</li>`
* - `<li template="ng-for #item of items; #i = index">...</li>` * - `<li template="ngFor #item of items; #i = index">...</li>`
* - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>` * - `<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>`
* *
* ### Example * ### Example
* *
* See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed * See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
* example. * example.
*/ */
@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf', 'ngForTemplate']}) @Directive({selector: '[ngFor][ngForOf]', inputs: ['ngForOf', 'ngForTemplate']})
export class NgFor implements DoCheck { export class NgFor implements DoCheck {
/** @internal */ /** @internal */
_ngForOf: any; _ngForOf: any;

12
modules/angular2/src/common/directives/ng_if.ts
View File

@ -4,13 +4,13 @@ import {isBlank} from 'angular2/src/facade/lang';
/** /**
* Removes or recreates a portion of the DOM tree based on an {expression}. * Removes or recreates a portion of the DOM tree based on an {expression}.
* *
* If the expression assigned to `ng-if` evaluates to a false value then the element * If the expression assigned to `ngIf` evaluates to a false value then the element
* is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
* *
* ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)): * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
* *
* ``` * ```
* <div *ng-if="errorCount > 0" class="error"> * <div *ngIf="errorCount > 0" class="error">
* <!-- Error message displayed when the errorCount property on the current context is greater * <!-- Error message displayed when the errorCount property on the current context is greater
* than 0. --> * than 0. -->
* {{errorCount}} errors detected * {{errorCount}} errors detected
@ -19,11 +19,11 @@ import {isBlank} from 'angular2/src/facade/lang';
* *
* ### Syntax * ### Syntax
* *
* - `<div *ng-if="condition">...</div>` * - `<div *ngIf="condition">...</div>`
* - `<div template="ng-if condition">...</div>` * - `<div template="ngIf condition">...</div>`
* - `<template [ng-if]="condition"><div>...</div></template>` * - `<template [ngIf]="condition"><div>...</div></template>`
*/ */
@Directive({selector: '[ng-if]', inputs: ['ngIf']}) @Directive({selector: '[ngIf]', inputs: ['ngIf']})
export class NgIf { export class NgIf {
private _prevCondition: boolean = null; private _prevCondition: boolean = null;

12
modules/angular2/src/common/directives/ng_style.ts
View File

@ -11,14 +11,14 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
/** /**
* The `NgStyle` directive changes styles based on a result of expression evaluation. * The `NgStyle` directive changes styles based on a result of expression evaluation.
* *
* An expression assigned to the `ng-style` property must evaluate to an object and the * An expression assigned to the `ngStyle` property must evaluate to an object and the
* corresponding element styles are updated based on changes to this object. Style names to update * corresponding element styles are updated based on changes to this object. Style names to update
* are taken from the object's keys, and values - from the corresponding object's values. * are taken from the object's keys, and values - from the corresponding object's values.
* *
* ### Syntax * ### Syntax
* *
* - `<div [ng-style]="{'font-style': style}"></div>` * - `<div [ngStyle]="{'font-style': style}"></div>`
* - `<div [ng-style]="styleExp"></div>` - here the `styleExp` must evaluate to an object * - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object
* *
* ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)): * ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
* *
@ -26,9 +26,9 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
* import {Component, NgStyle} from 'angular2/angular2'; * import {Component, NgStyle} from 'angular2/angular2';
* *
* @Component({ * @Component({
* selector: 'ng-style-example', * selector: 'ngStyle-example',
* template: ` * template: `
* <h1 [ng-style]="{'font-style': style, 'font-size': size, 'font-weight': weight}"> * <h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
* Change style of this text! * Change style of this text!
* </h1> * </h1>
* *
@ -58,7 +58,7 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
* In this example the `font-style`, `font-size` and `font-weight` styles will be updated * In this example the `font-style`, `font-size` and `font-weight` styles will be updated
* based on the `style` property's value changes. * based on the `style` property's value changes.
*/ */
@Directive({selector: '[ng-style]', inputs: ['rawStyle: ng-style']}) @Directive({selector: '[ngStyle]', inputs: ['rawStyle: ngStyle']})
export class NgStyle implements DoCheck { export class NgStyle implements DoCheck {
/** @internal */ /** @internal */
_rawStyle; _rawStyle;

42
modules/angular2/src/common/directives/ng_switch.ts
View File

@ -21,12 +21,12 @@ class SwitchView {
* `NgSwitch` simply inserts nested elements based on which match expression matches the value * `NgSwitch` simply inserts nested elements based on which match expression matches the value
* obtained from the evaluated switch expression. In other words, you define a container element * obtained from the evaluated switch expression. In other words, you define a container element
* (where you place the directive with a switch expression on the * (where you place the directive with a switch expression on the
* **`[ng-switch]="..."` attribute**), define any inner elements inside of the directive and * **`[ngSwitch]="..."` attribute**), define any inner elements inside of the directive and
* place a `[ng-switch-when]` attribute per element. * place a `[ngSwitchWhen]` attribute per element.
* *
* The `ng-switch-when` property is used to inform `NgSwitch` which element to display when the * The `ngSwitchWhen` property is used to inform `NgSwitch` which element to display when the
* expression is evaluated. If a matching expression is not found via a `ng-switch-when` property * expression is evaluated. If a matching expression is not found via a `ngSwitchWhen` property
* then an element with the `ng-switch-default` attribute is displayed. * then an element with the `ngSwitchDefault` attribute is displayed.
* *
* ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview)) * ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
* *
@ -37,22 +37,22 @@ class SwitchView {
* <p>Value = {{value}}</p> * <p>Value = {{value}}</p>
* <button (click)="inc()">Increment</button> * <button (click)="inc()">Increment</button>
* *
* <div [ng-switch]="value"> * <div [ngSwitch]="value">
* <p *ng-switch-when="'init'">increment to start</p> * <p *ngSwitchWhen="'init'">increment to start</p>
* <p *ng-switch-when="0">0, increment again</p> * <p *ngSwitchWhen="0">0, increment again</p>
* <p *ng-switch-when="1">1, increment again</p> * <p *ngSwitchWhen="1">1, increment again</p>
* <p *ng-switch-when="2">2, stop incrementing</p> * <p *ngSwitchWhen="2">2, stop incrementing</p>
* <p *ng-switch-default>&gt; 2, STOP!</p> * <p *ngSwitchDefault>&gt; 2, STOP!</p>
* </div> * </div>
* *
* <!-- alternate syntax --> * <!-- alternate syntax -->
* *
* <p [ng-switch]="value"> * <p [ngSwitch]="value">
* <template ng-switch-when="init">increment to start</template> * <template ngSwitchWhen="init">increment to start</template>
* <template [ng-switch-when]="0">0, increment again</template> * <template [ngSwitchWhen]="0">0, increment again</template>
* <template [ng-switch-when]="1">1, increment again</template> * <template [ngSwitchWhen]="1">1, increment again</template>
* <template [ng-switch-when]="2">2, stop incrementing</template> * <template [ngSwitchWhen]="2">2, stop incrementing</template>
* <template ng-switch-default>&gt; 2, STOP!</template> * <template ngSwitchDefault>&gt; 2, STOP!</template>
* </p> * </p>
* `, * `,
* directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault] * directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
@ -68,7 +68,7 @@ class SwitchView {
* bootstrap(App).catch(err => console.error(err)); * bootstrap(App).catch(err => console.error(err));
* ``` * ```
*/ */
@Directive({selector: '[ng-switch]', inputs: ['ngSwitch']}) @Directive({selector: '[ngSwitch]', inputs: ['ngSwitch']})
export class NgSwitch { export class NgSwitch {
private _switchValue: any; private _switchValue: any;
private _useDefault: boolean = false; private _useDefault: boolean = false;
@ -159,14 +159,14 @@ export class NgSwitch {
} }
/** /**
* Insert the sub-tree when the `ng-switch-when` expression evaluates to the same value as the * Insert the sub-tree when the `ngSwitchWhen` expression evaluates to the same value as the
* enclosing switch expression. * enclosing switch expression.
* *
* If multiple match expression match the switch expression value, all of them are displayed. * If multiple match expression match the switch expression value, all of them are displayed.
* *
* See {@link NgSwitch} for more details and example. * See {@link NgSwitch} for more details and example.
*/ */
@Directive({selector: '[ng-switch-when]', inputs: ['ngSwitchWhen']}) @Directive({selector: '[ngSwitchWhen]', inputs: ['ngSwitchWhen']})
export class NgSwitchWhen { export class NgSwitchWhen {
// `_WHEN_DEFAULT` is used as a marker for a not yet initialized value // `_WHEN_DEFAULT` is used as a marker for a not yet initialized value
/** @internal */ /** @internal */
@ -193,7 +193,7 @@ export class NgSwitchWhen {
* *
* See {@link NgSwitch} for more details and example. * See {@link NgSwitch} for more details and example.
*/ */
@Directive({selector: '[ng-switch-default]'}) @Directive({selector: '[ngSwitchDefault]'})
export class NgSwitchDefault { export class NgSwitchDefault {
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef,
@Host() sswitch: NgSwitch) { @Host() sswitch: NgSwitch) {

4
modules/angular2/src/common/forms/directives/checkbox_value_accessor.ts
View File

@ -11,12 +11,12 @@ const CHECKBOX_VALUE_ACCESSOR = CONST_EXPR(new Provider(
* *
* ### Example * ### Example
* ``` * ```
* <input type="checkbox" ng-control="rememberLogin"> * <input type="checkbox" ngControl="rememberLogin">
* ``` * ```
*/ */
@Directive({ @Directive({
selector: selector:
'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]', 'input[type=checkbox][ngControl],input[type=checkbox][ngFormControl],input[type=checkbox][ngModel]',
host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'}, host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
bindings: [CHECKBOX_VALUE_ACCESSOR] bindings: [CHECKBOX_VALUE_ACCESSOR]
}) })

6
modules/angular2/src/common/forms/directives/default_value_accessor.ts
View File

@ -11,15 +11,15 @@ const DEFAULT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
* *
* ### Example * ### Example
* ``` * ```
* <input type="text" ng-control="searchQuery"> * <input type="text" ngControl="searchQuery">
* ``` * ```
*/ */
@Directive({ @Directive({
selector: selector:
'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model],[ng-default-control]', 'input:not([type=checkbox])[ngControl],textarea[ngControl],input:not([type=checkbox])[ngFormControl],textarea[ngFormControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
// TODO: vsavkin replace the above selector with the one below it once // TODO: vsavkin replace the above selector with the one below it once
// https://github.com/angular/angular/issues/3011 is implemented // https://github.com/angular/angular/issues/3011 is implemented
// selector: '[ng-control],[ng-model],[ng-form-control]', // selector: '[ngControl],[ngModel],[ngFormControl]',
host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
bindings: [DEFAULT_VALUE_ACCESSOR] bindings: [DEFAULT_VALUE_ACCESSOR]
}) })

14
modules/angular2/src/common/forms/directives/ng_control_group.ts
View File

@ -38,17 +38,17 @@ const controlGroupProvider =
* <div> * <div>
* <h2>Angular2 Control &amp; ControlGroup Example</h2> * <h2>Angular2 Control &amp; ControlGroup Example</h2>
* <form #f="ngForm"> * <form #f="ngForm">
* <div ng-control-group="name" #cg-name="ngForm"> * <div ngControlGroup="name" #cg-name="form">
* <h3>Enter your name:</h3> * <h3>Enter your name:</h3>
* <p>First: <input ng-control="first" required></p> * <p>First: <input ngControl="first" required></p>
* <p>Middle: <input ng-control="middle"></p> * <p>Middle: <input ngControl="middle"></p>
* <p>Last: <input ng-control="last" required></p> * <p>Last: <input ngControl="last" required></p>
* </div> * </div>
* <h3>Name value:</h3> * <h3>Name value:</h3>
* <pre>{{valueOf(cgName)}}</pre> * <pre>{{valueOf(cgName)}}</pre>
* <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p> * <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p>
* <h3>What's your favorite food?</h3> * <h3>What's your favorite food?</h3>
* <p><input ng-control="food"></p> * <p><input ngControl="food"></p>
* <h3>Form value</h3> * <h3>Form value</h3>
* <pre>{{valueOf(f)}}</pre> * <pre>{{valueOf(f)}}</pre>
* </form> * </form>
@ -70,9 +70,9 @@ const controlGroupProvider =
* this group can be accessed separately from the overall form. * this group can be accessed separately from the overall form.
*/ */
@Directive({ @Directive({
selector: '[ng-control-group]', selector: '[ngControlGroup]',
providers: [controlGroupProvider], providers: [controlGroupProvider],
inputs: ['name: ng-control-group'], inputs: ['name: ngControlGroup'],
exportAs: 'ngForm' exportAs: 'ngForm'
}) })
export class NgControlGroup extends ControlContainer implements OnInit, export class NgControlGroup extends ControlContainer implements OnInit,

16
modules/angular2/src/common/forms/directives/ng_control_name.ts
View File

@ -50,10 +50,10 @@ const controlNameBinding =
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: ` * template: `
* <form #f="ngForm" (submit)='onLogIn(f.value)'> * <form #f="ngForm" (submit)='onLogIn(f.value)'>
* Login <input type='text' ng-control='login' #l="ngForm"> * Login <input type='text' ngControl='login' #l="form">
* <div *ng-if="!l.valid">Login is invalid</div> * <div *ngIf="!l.valid">Login is invalid</div>
* *
* Password <input type='password' ng-control='password'> * Password <input type='password' ngControl='password'>
* <button type='submit'>Log in!</button> * <button type='submit'>Log in!</button>
* </form> * </form>
* `}) * `})
@ -64,7 +64,7 @@ const controlNameBinding =
* } * }
* ``` * ```
* *
* We can also use ng-model to bind a domain model to the form. * We can also use ngModel to bind a domain model to the form.
* *
* ``` * ```
* @Component({ * @Component({
@ -72,9 +72,9 @@ const controlNameBinding =
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: ` * template: `
* <form (submit)='onLogIn()'> * <form (submit)='onLogIn()'>
* Login <input type='text' ng-control='login' [(ng-model)]="credentials.login"> * Login <input type='text' ngControl='login' [(ngModel)]="credentials.login">
* Password <input type='password' ng-control='password' * Password <input type='password' ngControl='password'
* [(ng-model)]="credentials.password"> * [(ngModel)]="credentials.password">
* <button type='submit'>Log in!</button> * <button type='submit'>Log in!</button>
* </form> * </form>
* `}) * `})
@ -89,7 +89,7 @@ const controlNameBinding =
* ``` * ```
*/ */
@Directive({ @Directive({
selector: '[ng-control]', selector: '[ngControl]',
bindings: [controlNameBinding], bindings: [controlNameBinding],
inputs: ['name: ngControl', 'model: ngModel'], inputs: ['name: ngControl', 'model: ngModel'],
outputs: ['update: ngModelChange'], outputs: ['update: ngModelChange'],

2
modules/angular2/src/common/forms/directives/ng_control_status.ts
View File

@ -3,7 +3,7 @@ import {NgControl} from './ng_control';
import {isBlank, isPresent} from 'angular2/src/facade/lang'; import {isBlank, isPresent} from 'angular2/src/facade/lang';
@Directive({ @Directive({
selector: '[ng-control],[ng-model],[ng-form-control]', selector: '[ngControl],[ngModel],[ngFormControl]',
host: { host: {
'[class.ng-untouched]': 'ngClassUntouched', '[class.ng-untouched]': 'ngClassUntouched',
'[class.ng-touched]': 'ngClassTouched', '[class.ng-touched]': 'ngClassTouched',

18
modules/angular2/src/common/forms/directives/ng_form.ts
View File

@ -36,7 +36,7 @@ const formDirectiveProvider =
* *
* ### Submission * ### Submission
* *
* The `ng-submit` event signals when the user triggers a form submission. * The `ngSubmit` event signals when the user triggers a form submission.
* *
* ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview)) * ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
* *
@ -47,16 +47,16 @@ const formDirectiveProvider =
* <div> * <div>
* <p>Submit the form to see the data object Angular builds</p> * <p>Submit the form to see the data object Angular builds</p>
* <h2>NgForm demo</h2> * <h2>NgForm demo</h2>
* <form #f="ngForm" (ng-submit)="onSubmit(f.value)"> * <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
* <h3>Control group: credentials</h3> * <h3>Control group: credentials</h3>
* <div ng-control-group="credentials"> * <div ngControlGroup="credentials">
* <p>Login: <input type="text" ng-control="login"></p> * <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ng-control="password"></p> * <p>Password: <input type="password" ngControl="password"></p>
* </div> * </div>
* <h3>Control group: person</h3> * <h3>Control group: person</h3>
* <div ng-control-group="person"> * <div ngControlGroup="person">
* <p>First name: <input type="text" ng-control="firstName"></p> * <p>First name: <input type="text" ngControl="firstName"></p>
* <p>Last name: <input type="text" ng-control="lastName"></p> * <p>Last name: <input type="text" ngControl="lastName"></p>
* </div> * </div>
* <button type="submit">Submit Form</button> * <button type="submit">Submit Form</button>
* <p>Form data submitted:</p> * <p>Form data submitted:</p>
@ -78,7 +78,7 @@ const formDirectiveProvider =
* ``` * ```
*/ */
@Directive({ @Directive({
selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]', selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',
bindings: [formDirectiveProvider], bindings: [formDirectiveProvider],
host: { host: {
'(submit)': 'onSubmit()', '(submit)': 'onSubmit()',

10
modules/angular2/src/common/forms/directives/ng_form_control.ts
View File

@ -44,7 +44,7 @@ const formControlBinding =
* <h2>NgFormControl Example</h2> * <h2>NgFormControl Example</h2>
* <form> * <form>
* <p>Element with existing control: <input type="text" * <p>Element with existing control: <input type="text"
* [ng-form-control]="loginControl"></p> * [ngFormControl]="loginControl"></p>
* <p>Value of existing control: {{loginControl.value}}</p> * <p>Value of existing control: {{loginControl.value}}</p>
* </form> * </form>
* </div> * </div>
@ -56,9 +56,9 @@ const formControlBinding =
* } * }
* ``` * ```
* *
* ###ng-model * ###ngModel
* *
* We can also use `ng-model` to bind a domain model to the form. * We can also use `ngModel` to bind a domain model to the form.
* *
* ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview)) * ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
* *
@ -66,7 +66,7 @@ const formControlBinding =
* @Component({ * @Component({
* selector: "login-comp", * selector: "login-comp",
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>" * template: "<input type='text' [ngFormControl]='loginControl' [(ngModel)]='login'>"
* }) * })
* class LoginComp { * class LoginComp {
* loginControl: Control = new Control(''); * loginControl: Control = new Control('');
@ -75,7 +75,7 @@ const formControlBinding =
* ``` * ```
*/ */
@Directive({ @Directive({
selector: '[ng-form-control]', selector: '[ngFormControl]',
bindings: [formControlBinding], bindings: [formControlBinding],
inputs: ['form: ngFormControl', 'model: ngModel'], inputs: ['form: ngFormControl', 'model: ngModel'],
outputs: ['update: ngModelChange'], outputs: ['update: ngModelChange'],

20
modules/angular2/src/common/forms/directives/ng_form_model.ts
View File

@ -36,9 +36,9 @@ const formDirectiveProvider =
* template: ` * template: `
* <div> * <div>
* <h2>NgFormModel Example</h2> * <h2>NgFormModel Example</h2>
* <form [ng-form-model]="loginForm"> * <form [ngFormModel]="loginForm">
* <p>Login: <input type="text" ng-control="login"></p> * <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ng-control="password"></p> * <p>Password: <input type="password" ngControl="password"></p>
* </form> * </form>
* <p>Value:</p> * <p>Value:</p>
* <pre>{{value}}</pre> * <pre>{{value}}</pre>
@ -62,17 +62,17 @@ const formDirectiveProvider =
* } * }
* ``` * ```
* *
* We can also use ng-model to bind a domain model to the form. * We can also use ngModel to bind a domain model to the form.
* *
* ```typescript * ```typescript
* @Component({ * @Component({
* selector: "login-comp", * selector: "login-comp",
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: ` * template: `
* <form [ng-form-model]='loginForm'> * <form [ngFormModel]='loginForm'>
* Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'> * Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
* Password <input type='password' ng-control='password' * Password <input type='password' ngControl='password'
* [(ng-model)]='credentials.password'> * [(ngModel)]='credentials.password'>
* <button (click)="onLogin()">Login</button> * <button (click)="onLogin()">Login</button>
* </form>` * </form>`
* }) * })
@ -95,9 +95,9 @@ const formDirectiveProvider =
* ``` * ```
*/ */
@Directive({ @Directive({
selector: '[ng-form-model]', selector: '[ngFormModel]',
bindings: [formDirectiveProvider], bindings: [formDirectiveProvider],
inputs: ['form: ng-form-model'], inputs: ['form: ngFormModel'],
host: {'(submit)': 'onSubmit()'}, host: {'(submit)': 'onSubmit()'},
outputs: ['ngSubmit'], outputs: ['ngSubmit'],
exportAs: 'ngForm' exportAs: 'ngForm'

8
modules/angular2/src/common/forms/directives/ng_model.ts
View File

@ -31,8 +31,8 @@ const formControlBinding =
* *
* ### Usage * ### Usage
* *
* `ng-model` binds an existing domain model to a form control. For a * `ngModel` binds an existing domain model to a form control. For a
* two-way binding, use `[(ng-model)]` to ensure the model updates in * two-way binding, use `[(ngModel)]` to ensure the model updates in
* both directions. * both directions.
* *
* ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview)) * ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
@ -40,7 +40,7 @@ const formControlBinding =
* @Component({ * @Component({
* selector: "search-comp", * selector: "search-comp",
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: `<input type='text' [(ng-model)]="searchQuery">` * template: `<input type='text' [(ngModel)]="searchQuery">`
* }) * })
* class SearchComp { * class SearchComp {
* searchQuery: string; * searchQuery: string;
@ -48,7 +48,7 @@ const formControlBinding =
* ``` * ```
*/ */
@Directive({ @Directive({
selector: '[ng-model]:not([ng-control]):not([ng-form-control])', selector: '[ngModel]:not([ngControl]):not([ngFormControl])',
bindings: [formControlBinding], bindings: [formControlBinding],
inputs: ['model: ngModel'], inputs: ['model: ngModel'],
outputs: ['update: ngModelChange'], outputs: ['update: ngModelChange'],

4
modules/angular2/src/common/forms/directives/number_value_accessor.ts
View File

@ -11,12 +11,12 @@ const NUMBER_VALUE_ACCESSOR = CONST_EXPR(new Provider(
* *
* ### Example * ### Example
* ``` * ```
* <input type="number" [(ng-model)]="age"> * <input type="number" [(ngModel)]="age">
* ``` * ```
*/ */
@Directive({ @Directive({
selector: selector:
'input[type=number][ng-control],input[type=number][ng-form-control],input[type=number][ng-model]', 'input[type=number][ngControl],input[type=number][ngFormControl],input[type=number][ngModel]',
host: { host: {
'(change)': 'onChange($event.target.value)', '(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)', '(input)': 'onChange($event.target.value)',

6
modules/angular2/src/common/forms/directives/select_control_value_accessor.ts
View File

@ -22,8 +22,8 @@ const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
* ### Example * ### Example
* *
* ``` * ```
* <select ng-control="city"> * <select ngControl="city">
* <option *ng-for="#c of cities" [value]="c"></option> * <option *ngFor="#c of cities" [value]="c"></option>
* </select> * </select>
* ``` * ```
*/ */
@ -35,7 +35,7 @@ export class NgSelectOption {
* The accessor for writing a value and listening to changes on a select element. * The accessor for writing a value and listening to changes on a select element.
*/ */
@Directive({ @Directive({
selector: 'select[ng-control],select[ng-form-control],select[ng-model]', selector: 'select[ngControl],select[ngFormControl],select[ngModel]',
host: { host: {
'(change)': 'onChange($event.target.value)', '(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)', '(input)': 'onChange($event.target.value)',

8
modules/angular2/src/common/forms/directives/validators.ts
View File

@ -35,11 +35,11 @@ const REQUIRED_VALIDATOR =
* ### Example * ### Example
* *
* ``` * ```
* <input ng-control="fullName" required> * <input ngControl="fullName" required>
* ``` * ```
*/ */
@Directive({ @Directive({
selector: '[required][ng-control],[required][ng-form-control],[required][ng-model]', selector: '[required][ngControl],[required][ngFormControl],[required][ngModel]',
providers: [REQUIRED_VALIDATOR] providers: [REQUIRED_VALIDATOR]
}) })
export class RequiredValidator { export class RequiredValidator {
@ -48,7 +48,7 @@ export class RequiredValidator {
const MIN_LENGTH_VALIDATOR = CONST_EXPR( const MIN_LENGTH_VALIDATOR = CONST_EXPR(
new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MinLengthValidator), multi: true})); new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MinLengthValidator), multi: true}));
@Directive({ @Directive({
selector: '[minlength][ng-control],[minlength][ng-form-control],[minlength][ng-model]', selector: '[minlength][ngControl],[minlength][ngFormControl],[minlength][ngModel]',
providers: [MIN_LENGTH_VALIDATOR] providers: [MIN_LENGTH_VALIDATOR]
}) })
export class MinLengthValidator implements Validator { export class MinLengthValidator implements Validator {
@ -64,7 +64,7 @@ export class MinLengthValidator implements Validator {
const MAX_LENGTH_VALIDATOR = CONST_EXPR( const MAX_LENGTH_VALIDATOR = CONST_EXPR(
new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MaxLengthValidator), multi: true})); new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MaxLengthValidator), multi: true}));
@Directive({ @Directive({
selector: '[maxlength][ng-control],[maxlength][ng-form-control],[maxlength][ng-model]', selector: '[maxlength][ngControl],[maxlength][ngFormControl],[maxlength][ngModel]',
providers: [MAX_LENGTH_VALIDATOR] providers: [MAX_LENGTH_VALIDATOR]
}) })
export class MaxLengthValidator implements Validator { export class MaxLengthValidator implements Validator {

10
modules/angular2/src/common/forms/form_builder.ts
View File

@ -14,11 +14,11 @@ import * as modelModule from './model';
* selector: 'my-app', * selector: 'my-app',
* viewBindings: [FORM_BINDINGS] * viewBindings: [FORM_BINDINGS]
* template: ` * template: `
* <form [ng-form-model]="loginForm"> * <form [ngFormModel]="loginForm">
* <p>Login <input ng-control="login"></p> * <p>Login <input ngControl="login"></p>
* <div ng-control-group="passwordRetry"> * <div ngControlGroup="passwordRetry">
* <p>Password <input type="password" ng-control="password"></p> * <p>Password <input type="password" ngControl="password"></p>
* <p>Confirm password <input type="password" ng-control="passwordConfirmation"></p> * <p>Confirm password <input type="password" ngControl="passwordConfirmation"></p>
* </div> * </div>
* </form> * </form>
* <h3>Form value:</h3> * <h3>Form value:</h3>

2
modules/angular2/src/common/pipes/slice_pipe.ts
View File

@ -42,7 +42,7 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
* *
* ## List Example * ## List Example
* *
* This `ng-for` example: * This `ngFor` example:
* *
* {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'} * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'}
* *

2
modules/angular2/src/compiler/html_parser.ts
View File

@ -200,7 +200,7 @@ class TreeBuilder {
private _popElement(fullName: string): boolean { private _popElement(fullName: string): boolean {
for (let stackIndex = this.elementStack.length - 1; stackIndex >= 0; stackIndex--) { for (let stackIndex = this.elementStack.length - 1; stackIndex >= 0; stackIndex--) {
let el = this.elementStack[stackIndex]; let el = this.elementStack[stackIndex];
if (el.name.toLowerCase() == fullName.toLowerCase()) { if (el.name == fullName) {
ListWrapper.splice(this.elementStack, stackIndex, this.elementStack.length - stackIndex); ListWrapper.splice(this.elementStack, stackIndex, this.elementStack.length - stackIndex);
return true; return true;
} }

9
modules/angular2/src/compiler/selector.ts
View File

@ -84,12 +84,7 @@ export class CssSelector {
ListWrapper.isEmpty(this.attrs) && this.notSelectors.length === 0; ListWrapper.isEmpty(this.attrs) && this.notSelectors.length === 0;
} }
setElement(element: string = null) { setElement(element: string = null) { this.element = element; }
if (isPresent(element)) {
element = element.toLowerCase();
}
this.element = element;
}
/** Gets a template string for an element that matches the selector. */ /** Gets a template string for an element that matches the selector. */
getMatchingElementTemplate(): string { getMatchingElementTemplate(): string {
@ -107,7 +102,7 @@ export class CssSelector {
} }
addAttribute(name: string, value: string = _EMPTY_ATTR_VALUE) { addAttribute(name: string, value: string = _EMPTY_ATTR_VALUE) {
this.attrs.push(name.toLowerCase()); this.attrs.push(name);
if (isPresent(value)) { if (isPresent(value)) {
value = value.toLowerCase(); value = value.toLowerCase();
} else { } else {

54
modules/angular2/src/compiler/template_parser.ts
View File

@ -44,7 +44,7 @@ import {
htmlVisitAll htmlVisitAll
} from './html_ast'; } from './html_ast';
import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util'; import {splitAtColon} from './util';
// Group 1 = "bind-" // Group 1 = "bind-"
// Group 2 = "var-" or "#" // Group 2 = "var-" or "#"
@ -55,7 +55,7 @@ import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
// Group 7 = idenitifer inside [] // Group 7 = idenitifer inside []
// Group 8 = identifier inside () // Group 8 = identifier inside ()
var BIND_NAME_REGEXP = var BIND_NAME_REGEXP =
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/ig; /^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/g;
const TEMPLATE_ELEMENT = 'template'; const TEMPLATE_ELEMENT = 'template';
const TEMPLATE_ATTR = 'template'; const TEMPLATE_ATTR = 'template';
@ -270,7 +270,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
targetProps: BoundElementOrDirectiveProperty[], targetProps: BoundElementOrDirectiveProperty[],
targetVars: VariableAst[]): boolean { targetVars: VariableAst[]): boolean {
var templateBindingsSource = null; var templateBindingsSource = null;
if (attr.name.toLowerCase() == TEMPLATE_ATTR) { if (attr.name == TEMPLATE_ATTR) {
templateBindingsSource = attr.value; templateBindingsSource = attr.value;
} else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) { } else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
var key = attr.name.substring(TEMPLATE_ATTR_PREFIX.length); // remove the star var key = attr.name.substring(TEMPLATE_ATTR_PREFIX.length); // remove the star
@ -280,17 +280,15 @@ class TemplateParseVisitor implements HtmlAstVisitor {
var bindings = this._parseTemplateBindings(templateBindingsSource, attr.sourceSpan); var bindings = this._parseTemplateBindings(templateBindingsSource, attr.sourceSpan);
for (var i = 0; i < bindings.length; i++) { for (var i = 0; i < bindings.length; i++) {
var binding = bindings[i]; var binding = bindings[i];
var dashCaseKey = camelCaseToDashCase(binding.key);
if (binding.keyIsVar) { if (binding.keyIsVar) {
targetVars.push( targetVars.push(new VariableAst(binding.key, binding.name, attr.sourceSpan));
new VariableAst(dashCaseToCamelCase(binding.key), binding.name, attr.sourceSpan)); targetMatchableAttrs.push([binding.key, binding.name]);
targetMatchableAttrs.push([dashCaseKey, binding.name]);
} else if (isPresent(binding.expression)) { } else if (isPresent(binding.expression)) {
this._parsePropertyAst(dashCaseKey, binding.expression, attr.sourceSpan, this._parsePropertyAst(binding.key, binding.expression, attr.sourceSpan,
targetMatchableAttrs, targetProps); targetMatchableAttrs, targetProps);
} else { } else {
targetMatchableAttrs.push([dashCaseKey, '']); targetMatchableAttrs.push([binding.key, '']);
this._parseLiteralAttr(dashCaseKey, null, attr.sourceSpan, targetProps); this._parseLiteralAttr(binding.key, null, attr.sourceSpan, targetProps);
} }
} }
return true; return true;
@ -356,7 +354,10 @@ class TemplateParseVisitor implements HtmlAstVisitor {
private _parseVariable(identifier: string, value: string, sourceSpan: ParseSourceSpan, private _parseVariable(identifier: string, value: string, sourceSpan: ParseSourceSpan,
targetVars: VariableAst[]) { targetVars: VariableAst[]) {
targetVars.push(new VariableAst(dashCaseToCamelCase(identifier), value, sourceSpan)); if (identifier.indexOf('-') > -1) {
this._reportError(`"-" is not allowed in variable names`, sourceSpan);
}
targetVars.push(new VariableAst(identifier, value, sourceSpan));
} }
private _parseProperty(name: string, expression: string, sourceSpan: ParseSourceSpan, private _parseProperty(name: string, expression: string, sourceSpan: ParseSourceSpan,
@ -386,7 +387,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
private _parseAssignmentEvent(name: string, expression: string, sourceSpan: ParseSourceSpan, private _parseAssignmentEvent(name: string, expression: string, sourceSpan: ParseSourceSpan,
targetMatchableAttrs: string[][], targetEvents: BoundEventAst[]) { targetMatchableAttrs: string[][], targetEvents: BoundEventAst[]) {
this._parseEvent(`${name}-change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs, this._parseEvent(`${name}Change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs,
targetEvents); targetEvents);
} }
@ -396,7 +397,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
var parts = splitAtColon(name, [null, name]); var parts = splitAtColon(name, [null, name]);
var target = parts[0]; var target = parts[0];
var eventName = parts[1]; var eventName = parts[1];
targetEvents.push(new BoundEventAst(dashCaseToCamelCase(eventName), target, targetEvents.push(new BoundEventAst(eventName, target,
this._parseAction(expression, sourceSpan), sourceSpan)); this._parseAction(expression, sourceSpan), sourceSpan));
// Don't detect directives for event names for now, // Don't detect directives for event names for now,
// so don't add the event name to the matchableAttrs // so don't add the event name to the matchableAttrs
@ -405,8 +406,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
private _parseLiteralAttr(name: string, value: string, sourceSpan: ParseSourceSpan, private _parseLiteralAttr(name: string, value: string, sourceSpan: ParseSourceSpan,
targetProps: BoundElementOrDirectiveProperty[]) { targetProps: BoundElementOrDirectiveProperty[]) {
targetProps.push(new BoundElementOrDirectiveProperty( targetProps.push(new BoundElementOrDirectiveProperty(
dashCaseToCamelCase(name), this._exprParser.wrapLiteralPrimitive(value, ''), true, name, this._exprParser.wrapLiteralPrimitive(value, ''), true, sourceSpan));
sourceSpan));
} }
private _parseDirectives(selectorMatcher: SelectorMatcher, private _parseDirectives(selectorMatcher: SelectorMatcher,
@ -493,16 +493,14 @@ class TemplateParseVisitor implements HtmlAstVisitor {
if (isPresent(directiveProperties)) { if (isPresent(directiveProperties)) {
var boundPropsByName = new Map<string, BoundElementOrDirectiveProperty>(); var boundPropsByName = new Map<string, BoundElementOrDirectiveProperty>();
boundProps.forEach(boundProp => { boundProps.forEach(boundProp => {
var key = dashCaseToCamelCase(boundProp.name);
var prevValue = boundPropsByName.get(boundProp.name); var prevValue = boundPropsByName.get(boundProp.name);
if (isBlank(prevValue) || prevValue.isLiteral) { if (isBlank(prevValue) || prevValue.isLiteral) {
// give [a]="b" a higher precedence thatn a="b" on the same element // give [a]="b" a higher precedence than a="b" on the same element
boundPropsByName.set(key, boundProp); boundPropsByName.set(boundProp.name, boundProp);
} }
}); });
StringMapWrapper.forEach(directiveProperties, (elProp: string, dirProp: string) => { StringMapWrapper.forEach(directiveProperties, (elProp: string, dirProp: string) => {
elProp = dashCaseToCamelCase(elProp);
var boundProp = boundPropsByName.get(elProp); var boundProp = boundPropsByName.get(elProp);
// Bindings are optional, so this binding only needs to be set up if an expression is given. // Bindings are optional, so this binding only needs to be set up if an expression is given.
@ -539,7 +537,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
var boundPropertyName; var boundPropertyName;
var parts = name.split(PROPERTY_PARTS_SEPARATOR); var parts = name.split(PROPERTY_PARTS_SEPARATOR);
if (parts.length === 1) { if (parts.length === 1) {
boundPropertyName = this._schemaRegistry.getMappedPropName(dashCaseToCamelCase(parts[0])); boundPropertyName = this._schemaRegistry.getMappedPropName(parts[0]);
bindingType = PropertyBindingType.Property; bindingType = PropertyBindingType.Property;
if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName)) { if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName)) {
this._reportError( this._reportError(
@ -547,20 +545,18 @@ class TemplateParseVisitor implements HtmlAstVisitor {
sourceSpan); sourceSpan);
} }
} else { } else {
let lcPrefix = parts[0].toLowerCase(); if (parts[0] == ATTRIBUTE_PREFIX) {
if (lcPrefix == ATTRIBUTE_PREFIX) { boundPropertyName = parts[1];
boundPropertyName = dashCaseToCamelCase(parts[1]);
bindingType = PropertyBindingType.Attribute; bindingType = PropertyBindingType.Attribute;
} else if (lcPrefix == CLASS_PREFIX) { } else if (parts[0] == CLASS_PREFIX) {
// keep original case!
boundPropertyName = parts[1]; boundPropertyName = parts[1];
bindingType = PropertyBindingType.Class; bindingType = PropertyBindingType.Class;
} else if (lcPrefix == STYLE_PREFIX) { } else if (parts[0] == STYLE_PREFIX) {
unit = parts.length > 2 ? parts[2] : null; unit = parts.length > 2 ? parts[2] : null;
boundPropertyName = dashCaseToCamelCase(parts[1]); boundPropertyName = parts[1];
bindingType = PropertyBindingType.Style; bindingType = PropertyBindingType.Style;
} else { } else {
this._reportError(`Invalid property name ${name}`, sourceSpan); this._reportError(`Invalid property name '${name}'`, sourceSpan);
bindingType = null; bindingType = null;
} }
} }
@ -694,7 +690,7 @@ function createElementCssSelector(elementName: string, matchableAttrs: string[][
cssSelector.setElement(elementName); cssSelector.setElement(elementName);
for (var i = 0; i < matchableAttrs.length; i++) { for (var i = 0; i < matchableAttrs.length; i++) {
var attrName = matchableAttrs[i][0].toLowerCase(); var attrName = matchableAttrs[i][0];
var attrValue = matchableAttrs[i][1]; var attrValue = matchableAttrs[i][1];
cssSelector.addAttribute(attrName, attrValue); cssSelector.addAttribute(attrName, attrValue);
if (attrName == CLASS_ATTR) { if (attrName == CLASS_ATTR) {

12
modules/angular2/src/compiler/template_preparser.ts
View File

@ -9,7 +9,7 @@ const LINK_STYLE_HREF_ATTR = 'href';
const LINK_STYLE_REL_VALUE = 'stylesheet'; const LINK_STYLE_REL_VALUE = 'stylesheet';
const STYLE_ELEMENT = 'style'; const STYLE_ELEMENT = 'style';
const SCRIPT_ELEMENT = 'script'; const SCRIPT_ELEMENT = 'script';
const NG_NON_BINDABLE_ATTR = 'ng-non-bindable'; const NG_NON_BINDABLE_ATTR = 'ngNonBindable';
export function preparseElement(ast: HtmlElementAst): PreparsedElement { export function preparseElement(ast: HtmlElementAst): PreparsedElement {
var selectAttr = null; var selectAttr = null;
@ -17,14 +17,14 @@ export function preparseElement(ast: HtmlElementAst): PreparsedElement {
var relAttr = null; var relAttr = null;
var nonBindable = false; var nonBindable = false;
ast.attrs.forEach(attr => { ast.attrs.forEach(attr => {
let attrName = attr.name.toLowerCase(); let lcAttrName = attr.name.toLowerCase();
if (attrName == NG_CONTENT_SELECT_ATTR) { if (lcAttrName == NG_CONTENT_SELECT_ATTR) {
selectAttr = attr.value; selectAttr = attr.value;
} else if (attrName == LINK_STYLE_HREF_ATTR) { } else if (lcAttrName == LINK_STYLE_HREF_ATTR) {
hrefAttr = attr.value; hrefAttr = attr.value;
} else if (attrName == LINK_STYLE_REL_ATTR) { } else if (lcAttrName == LINK_STYLE_REL_ATTR) {
relAttr = attr.value; relAttr = attr.value;
} else if (attrName == NG_NON_BINDABLE_ATTR) { } else if (attr.name == NG_NON_BINDABLE_ATTR) {
nonBindable = true; nonBindable = true;
} }
}); });

4
modules/angular2/src/core/change_detection/change_detector_ref.ts
View File

@ -73,7 +73,7 @@ export abstract class ChangeDetectorRef {
* @Component({ * @Component({
* selector: 'giant-list', * selector: 'giant-list',
* template: ` * template: `
* <li *ng-for="#d of dataProvider.data">Data {{d}}</lig> * <li *ngFor="#d of dataProvider.data">Data {{d}}</lig>
* `, * `,
* directives: [NgFor] * directives: [NgFor]
* }) * })
@ -179,7 +179,7 @@ export abstract class ChangeDetectorRef {
* selector: 'app', * selector: 'app',
* providers: [DataProvider], * providers: [DataProvider],
* template: ` * template: `
* Live Update: <input type="checkbox" [(ng-model)]="live"> * Live Update: <input type="checkbox" [(ngModel)]="live">
* <live-data [live]="live"><live-data> * <live-data [live]="live"><live-data>
* `, * `,
* directives: [LiveData, FORM_DIRECTIVES] * directives: [LiveData, FORM_DIRECTIVES]

2
modules/angular2/src/core/change_detection/parser/parser.ts
View File

@ -594,7 +594,7 @@ export class _ParseAST {
if (prefix == null) { if (prefix == null) {
prefix = key; prefix = key;
} else { } else {
key = prefix + '-' + key; key = prefix + key[0].toUpperCase() + key.substring(1);
} }
} }
this.optionalCharacter($COLON); this.optionalCharacter($COLON);

10
modules/angular2/src/core/linker/interfaces.ts
View File

@ -109,7 +109,7 @@ export interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange})
* <button (click)="hasChild = !hasChild"> * <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent * {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button> * </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`, * <my-cmp *ngIf="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf] * directives: [MyComponent, NgIf]
* }) * })
* export class App { * export class App {
@ -150,7 +150,7 @@ export interface OnInit { ngOnInit(); }
* template: ` * template: `
* <p>Changes:</p> * <p>Changes:</p>
* <ul> * <ul>
* <li *ng-for="#line of logs">{{line}}</li> * <li *ngFor="#line of logs">{{line}}</li>
* </ul>`, * </ul>`,
* directives: [NgFor] * directives: [NgFor]
* }) * })
@ -217,7 +217,7 @@ export interface DoCheck { ngDoCheck(); }
* <button (click)="hasChild = !hasChild"> * <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent * {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button> * </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`, * <my-cmp *ngIf="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf] * directives: [MyComponent, NgIf]
* }) * })
* export class App { * export class App {
@ -367,7 +367,7 @@ export interface AfterContentInit { ngAfterContentInit(); }
* template: ` * template: `
* <parent-cmp> * <parent-cmp>
* <button (click)="hasContent = !hasContent">Toggle content child</button> * <button (click)="hasContent = !hasContent">Toggle content child</button>
* <child-cmp *ng-if="hasContent" where="content"></child-cmp> * <child-cmp *ngIf="hasContent" where="content"></child-cmp>
* </parent-cmp>`, * </parent-cmp>`,
* directives: [NgIf, ParentComponent, ChildComponent] * directives: [NgIf, ParentComponent, ChildComponent]
* }) * })
@ -442,7 +442,7 @@ export interface AfterViewInit { ngAfterViewInit(); }
* selector: 'parent-cmp', * selector: 'parent-cmp',
* template: ` * template: `
* <button (click)="showView = !showView">Toggle view child</button> * <button (click)="showView = !showView">Toggle view child</button>
* <child-cmp *ng-if="showView" where="view"></child-cmp>`, * <child-cmp *ngIf="showView" where="view"></child-cmp>`,
* directives: [NgIf, ChildComponent] * directives: [NgIf, ChildComponent]
* }) * })
* class ParentComponent implements AfterViewChecked { * class ParentComponent implements AfterViewChecked {

2
modules/angular2/src/core/linker/query_list.ts
View File

@ -11,7 +11,7 @@ import {Observable, EventEmitter} from 'angular2/src/facade/async';
* *
* Implements an iterable interface, therefore it can be used in both ES6 * Implements an iterable interface, therefore it can be used in both ES6
* javascript `for (var i of items)` loops as well as in Angular templates with * javascript `for (var i of items)` loops as well as in Angular templates with
* `*ng-for="#i of myList"`. * `*ngFor="#i of myList"`.
* *
* Changes can be observed by subscribing to the changes `Observable`. * Changes can be observed by subscribing to the changes `Observable`.
* *

8
modules/angular2/src/core/linker/view_ref.ts
View File

@ -50,7 +50,7 @@ export interface HostViewRef {
* ``` * ```
* Count: {{items.length}} * Count: {{items.length}}
* <ul> * <ul>
* <li *ng-for="var item of items">{{item}}</li> * <li *ngFor="var item of items">{{item}}</li>
* </ul> * </ul>
* ``` * ```
* *
@ -60,7 +60,7 @@ export interface HostViewRef {
* ``` * ```
* Count: {{items.length}} * Count: {{items.length}}
* <ul> * <ul>
* <template ng-for var-item [ng-for-of]="items"></template> * <template ngFor var-item [ngForOf]="items"></template>
* </ul> * </ul>
* ``` * ```
* *
@ -146,7 +146,7 @@ export class ViewRef_ extends ViewRef {
* ``` * ```
* Count: {{items.length}} * Count: {{items.length}}
* <ul> * <ul>
* <li *ng-for="var item of items">{{item}}</li> * <li *ngFor="var item of items">{{item}}</li>
* </ul> * </ul>
* ``` * ```
* *
@ -156,7 +156,7 @@ export class ViewRef_ extends ViewRef {
* ``` * ```
* Count: {{items.length}} * Count: {{items.length}}
* <ul> * <ul>
* <template ng-for var-item [ng-for-of]="items"></template> * <template ngFor var-item [ngForOf]="items"></template>
* </ul> * </ul>
* ``` * ```
* *

14
modules/angular2/src/core/metadata.ts
View File

@ -732,8 +732,8 @@ export var Component: ComponentFactory =
* A directive can also query for other child directives. Since parent directives are instantiated * 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, * before child directives, a directive can't simply inject the list of child directives. Instead,
* the directive injects a {@link QueryList}, which updates its contents as children are added, * the directive injects a {@link QueryList}, which updates its contents as children are added,
* removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an
* `ng-if`, or an `ng-switch`. * `ngIf`, or an `ngSwitch`.
* *
* ``` * ```
* @Directive({ selector: '[my-directive]' }) * @Directive({ selector: '[my-directive]' })
@ -1007,7 +1007,7 @@ export var Attribute: AttributeFactory = makeParamDecorator(AttributeMetadata);
* ```html * ```html
* <tabs> * <tabs>
* <pane title="Overview">...</pane> * <pane title="Overview">...</pane>
* <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane> * <pane *ngFor="#o of objects" [title]="o.title">{{o.text}}</pane>
* </tabs> * </tabs>
* ``` * ```
* *
@ -1026,7 +1026,7 @@ export var Attribute: AttributeFactory = makeParamDecorator(AttributeMetadata);
* selector: 'tabs', * selector: 'tabs',
* template: ` * template: `
* <ul> * <ul>
* <li *ng-for="#pane of panes">{{pane.title}}</li> * <li *ngFor="#pane of panes">{{pane.title}}</li>
* </ul> * </ul>
* <content></content> * <content></content>
* ` * `
@ -1357,10 +1357,10 @@ export var Output: OutputFactory = makePropDecorator(OutputMetadata);
* ### Example * ### Example
* *
* The following example creates a directive that sets the `valid` and `invalid` classes * The following example creates a directive that sets the `valid` and `invalid` classes
* on the DOM element that has ng-model directive on it. * on the DOM element that has ngModel directive on it.
* *
* ```typescript * ```typescript
* @Directive({selector: '[ng-model]'}) * @Directive({selector: '[ngModel]'})
* class NgModelStatus { * class NgModelStatus {
* constructor(public control:NgModel) {} * constructor(public control:NgModel) {}
* @HostBinding('[class.valid]') get valid { return this.control.valid; } * @HostBinding('[class.valid]') get valid { return this.control.valid; }
@ -1369,7 +1369,7 @@ export var Output: OutputFactory = makePropDecorator(OutputMetadata);
* *
* @Component({ * @Component({
* selector: 'app', * selector: 'app',
* template: `<input [(ng-model)]="prop">`, * template: `<input [(ngModel)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus] * directives: [FORM_DIRECTIVES, NgModelStatus]
* }) * })
* class App { * class App {

4
modules/angular2/src/core/metadata/di.ts
View File

@ -55,7 +55,7 @@ export class AttributeMetadata extends DependencyMetadata {
* ```html * ```html
* <tabs> * <tabs>
* <pane title="Overview">...</pane> * <pane title="Overview">...</pane>
* <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane> * <pane *ngFor="#o of objects" [title]="o.title">{{o.text}}</pane>
* </tabs> * </tabs>
* ``` * ```
* *
@ -74,7 +74,7 @@ export class AttributeMetadata extends DependencyMetadata {
* selector: 'tabs', * selector: 'tabs',
* template: ` * template: `
* <ul> * <ul>
* <li *ng-for="#pane of panes">{{pane.title}}</li> * <li *ngFor="#pane of panes">{{pane.title}}</li>
* </ul> * </ul>
* <content></content> * <content></content>
* ` * `

16
modules/angular2/src/core/metadata/directives.ts
View File

@ -186,8 +186,8 @@ import {ViewEncapsulation} from 'angular2/src/core/metadata/view';
* A directive can also query for other child directives. Since parent directives are instantiated * 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, * before child directives, a directive can't simply inject the list of child directives. Instead,
* the directive injects a {@link QueryList}, which updates its contents as children are added, * the directive injects a {@link QueryList}, which updates its contents as children are added,
* removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an
* `ng-if`, or an `ng-switch`. * `ngIf`, or an `ngSwitch`.
* *
* ``` * ```
* @Directive({ selector: '[my-directive]' }) * @Directive({ selector: '[my-directive]' })
@ -582,11 +582,11 @@ export class DirectiveMetadata extends InjectableMetadata {
* ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview)) * ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))
* *
* The following example creates a directive that sets the `valid` and `invalid` classes * The following example creates a directive that sets the `valid` and `invalid` classes
* on the DOM element that has ng-model directive on it. * on the DOM element that has ngModel directive on it.
* *
* ```typescript * ```typescript
* @Directive({ * @Directive({
* selector: '[ng-model]', * selector: '[ngModel]',
* host: { * host: {
* '[class.valid]': 'valid', * '[class.valid]': 'valid',
* '[class.invalid]': 'invalid' * '[class.invalid]': 'invalid'
@ -600,7 +600,7 @@ export class DirectiveMetadata extends InjectableMetadata {
* *
* @Component({ * @Component({
* selector: 'app', * selector: 'app',
* template: `<input [(ng-model)]="prop">`, * template: `<input [(ngModel)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus] * directives: [FORM_DIRECTIVES, NgModelStatus]
* }) * })
* class App { * class App {
@ -1085,10 +1085,10 @@ export class OutputMetadata {
* ### Example * ### Example
* *
* The following example creates a directive that sets the `valid` and `invalid` classes * The following example creates a directive that sets the `valid` and `invalid` classes
* on the DOM element that has ng-model directive on it. * on the DOM element that has ngModel directive on it.
* *
* ```typescript * ```typescript
* @Directive({selector: '[ng-model]'}) * @Directive({selector: '[ngModel]'})
* class NgModelStatus { * class NgModelStatus {
* constructor(public control:NgModel) {} * constructor(public control:NgModel) {}
* @HostBinding('[class.valid]') get valid { return this.control.valid; } * @HostBinding('[class.valid]') get valid { return this.control.valid; }
@ -1097,7 +1097,7 @@ export class OutputMetadata {
* *
* @Component({ * @Component({
* selector: 'app', * selector: 'app',
* template: `<input [(ng-model)]="prop">`, * template: `<input [(ngModel)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus] * directives: [FORM_DIRECTIVES, NgModelStatus]
* }) * })
* class App { * class App {

2
modules/angular2/src/core/metadata/view.ts
View File

@ -104,7 +104,7 @@ export class ViewMetadata {
* directives: [NgFor] * directives: [NgFor]
* template: ' * template: '
* <ul> * <ul>
* <li *ng-for="#item of items">{{item}}</li> * <li *ngFor="#item of items">{{item}}</li>
* </ul>' * </ul>'
* }) * })
* class MyComponent { * class MyComponent {

6
modules/angular2/src/core/render/api.ts
View File

@ -33,7 +33,7 @@ export class RenderProtoViewRef {}
<div>foo</div> -> view 1 / fragment 1 <div>foo</div> -> view 1 / fragment 1
<ul> <ul>
<template ng-for> <template ngFor>
<li>{{fg}}</li> -> view 2 / fragment 1 <li>{{fg}}</li> -> view 2 / fragment 1
</template> </template>
</ul> </ul>
@ -42,10 +42,10 @@ export class RenderProtoViewRef {}
<div>foo</div> -> view 1 / fragment 1 <div>foo</div> -> view 1 / fragment 1
<ul> <ul>
<template ng-if> <template ngIf>
<li><ng-content></></li> -> view 1 / fragment 2 <li><ng-content></></li> -> view 1 / fragment 2
</template> </template>
<template ng-for> <template ngFor>
<li><ng-content></></li> -> <li><ng-content></></li> ->
<li></li> -> view 1 / fragment 2 + view 2 / fragment 1..n-1 <li></li> -> view 1 / fragment 2 + view 2 / fragment 1..n-1
</template> </template>

2
modules/angular2/src/core/zone/ng_zone.ts
View File

@ -42,7 +42,7 @@ export class NgZoneError {
* <h2>Demo: NgZone</h2> * <h2>Demo: NgZone</h2>
* *
* <p>Progress: {{progress}}%</p> * <p>Progress: {{progress}}%</p>
* <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p> * <p *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</p>
* *
* <button (click)="processWithinAngularZone()">Process within Angular zone</button> * <button (click)="processWithinAngularZone()">Process within Angular zone</button>
* <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button> * <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>

11
modules/angular2/src/platform/dom/dom_renderer.ts
View File

@ -39,7 +39,6 @@ import {
DefaultRenderFragmentRef, DefaultRenderFragmentRef,
DefaultProtoViewRef DefaultProtoViewRef
} from 'angular2/src/core/render/view'; } from 'angular2/src/core/render/view';
import {camelCaseToDashCase} from './util';
import {ViewEncapsulation} from 'angular2/src/core/metadata'; import {ViewEncapsulation} from 'angular2/src/core/metadata';
// TODO move it once DomAdapter is moved // TODO move it once DomAdapter is moved
@ -139,11 +138,10 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
attributeValue: string): void { attributeValue: string): void {
var view = resolveInternalDomView(location.renderView); var view = resolveInternalDomView(location.renderView);
var element = view.boundElements[location.boundElementIndex]; var element = view.boundElements[location.boundElementIndex];
var dashCasedAttributeName = camelCaseToDashCase(attributeName);
if (isPresent(attributeValue)) { if (isPresent(attributeValue)) {
DOM.setAttribute(element, dashCasedAttributeName, stringify(attributeValue)); DOM.setAttribute(element, attributeName, stringify(attributeValue));
} else { } else {
DOM.removeAttribute(element, dashCasedAttributeName); DOM.removeAttribute(element, attributeName);
} }
} }
@ -160,11 +158,10 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void { setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void {
var view = resolveInternalDomView(location.renderView); var view = resolveInternalDomView(location.renderView);
var element = view.boundElements[location.boundElementIndex]; var element = view.boundElements[location.boundElementIndex];
var dashCasedStyleName = camelCaseToDashCase(styleName);
if (isPresent(styleValue)) { if (isPresent(styleValue)) {
DOM.setStyle(element, dashCasedStyleName, stringify(styleValue)); DOM.setStyle(element, styleName, stringify(styleValue));
} else { } else {
DOM.removeStyle(element, dashCasedStyleName); DOM.removeStyle(element, styleName);
} }
} }

4
modules/angular2/src/router/router_link.ts
View File

@ -20,7 +20,7 @@ import {Instruction} from './instruction';
* When linking to this `User` route, you can write: * When linking to this `User` route, you can write:
* *
* ``` * ```
* <a [router-link]="['./User']">link to user component</a> * <a [routerLink]="['./User']">link to user component</a>
* ``` * ```
* *
* RouterLink expects the value to be an array of route names, followed by the params * RouterLink expects the value to be an array of route names, followed by the params
@ -35,7 +35,7 @@ import {Instruction} from './instruction';
* current component's parent. * current component's parent.
*/ */
@Directive({ @Directive({
selector: '[router-link]', selector: '[routerLink]',
inputs: ['routeParams: routerLink', 'target: target'], inputs: ['routeParams: routerLink', 'target: target'],
host: { host: {
'(click)': 'onClick()', '(click)': 'onClick()',

54
modules/angular2/test/common/directives/ng_class_spec.ts
View File

@ -34,7 +34,7 @@ export function main() {
it('should clean up when the directive is destroyed', it('should clean up when the directive is destroyed',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div *ng-for="var item of items" [ng-class]="item"></div>'; var template = '<div *ngFor="var item of items" [ngClass]="item"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
@ -54,7 +54,7 @@ export function main() {
it('should add classes specified in an object literal', it('should add classes specified in an object literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="{foo: true, bar: false}"></div>'; var template = '<div [ngClass]="{foo: true, bar: false}"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -67,7 +67,7 @@ export function main() {
it('should add classes specified in an object literal without change in class names', it('should add classes specified in an object literal without change in class names',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="{'foo-bar': true, 'fooBar': true}"></div>`; var template = `<div [ngClass]="{'foo-bar': true, 'fooBar': true}"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -79,7 +79,7 @@ export function main() {
it('should add and remove classes based on changes in object literal values', it('should add and remove classes based on changes in object literal values',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="{foo: condition, bar: !condition}"></div>'; var template = '<div [ngClass]="{foo: condition, bar: !condition}"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -95,7 +95,7 @@ export function main() {
it('should add and remove classes based on changes to the expression object', it('should add and remove classes based on changes to the expression object',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>'; var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -117,7 +117,7 @@ export function main() {
it('should add and remove classes based on reference changes to the expression object', it('should add and remove classes based on reference changes to the expression object',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>'; var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -136,7 +136,7 @@ export function main() {
it('should remove active classes when expression evaluates to null', it('should remove active classes when expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>'; var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -156,7 +156,7 @@ export function main() {
it('should allow multiple classes per expression', it('should allow multiple classes per expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>'; var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -181,7 +181,7 @@ export function main() {
it('should split by one or more spaces between classes', it('should split by one or more spaces between classes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>'; var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -200,7 +200,7 @@ export function main() {
it('should add classes specified in a list literal', it('should add classes specified in a list literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`; var template = `<div [ngClass]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -212,7 +212,7 @@ export function main() {
it('should add and remove classes based on changes to the expression', it('should add and remove classes based on changes to the expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="arrExpr"></div>'; var template = '<div [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -235,7 +235,7 @@ export function main() {
it('should add and remove classes when a reference changes', it('should add and remove classes when a reference changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="arrExpr"></div>'; var template = '<div [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -251,7 +251,7 @@ export function main() {
it('should take initial classes into account when a reference changes', it('should take initial classes into account when a reference changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="foo" [ng-class]="arrExpr"></div>'; var template = '<div class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -267,7 +267,7 @@ export function main() {
it('should ignore empty or blank class names', it('should ignore empty or blank class names',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="foo" [ng-class]="arrExpr"></div>'; var template = '<div class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -282,7 +282,7 @@ export function main() {
it('should trim blanks from class names', it('should trim blanks from class names',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="foo" [ng-class]="arrExpr"></div>'; var template = '<div class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -298,7 +298,7 @@ export function main() {
it('should allow multiple classes per item in arrays', it('should allow multiple classes per item in arrays',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="arrExpr"></div>'; var template = '<div [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -320,7 +320,7 @@ export function main() {
it('should add and remove classes if the set instance changed', it('should add and remove classes if the set instance changed',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="setExpr"></div>'; var template = '<div [ngClass]="setExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -343,7 +343,7 @@ export function main() {
it('should add classes specified in a string literal', it('should add classes specified in a string literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="'foo bar foo-bar fooBar'"></div>`; var template = `<div [ngClass]="'foo bar foo-bar fooBar'"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -355,7 +355,7 @@ export function main() {
it('should add and remove classes based on changes to the expression', it('should add and remove classes based on changes to the expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="strExpr"></div>'; var template = '<div [ngClass]="strExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -375,7 +375,7 @@ export function main() {
it('should remove active classes when switching from string to null', it('should remove active classes when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="strExpr"></div>`; var template = `<div [ngClass]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -391,7 +391,7 @@ export function main() {
it('should take initial classes into account when switching from string to null', it('should take initial classes into account when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div class="foo" [ng-class]="strExpr"></div>`; var template = `<div class="foo" [ngClass]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -407,7 +407,7 @@ export function main() {
it('should ignore empty and blank strings', it('should ignore empty and blank strings',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div class="foo" [ng-class]="strExpr"></div>`; var template = `<div class="foo" [ngClass]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -425,7 +425,7 @@ export function main() {
it('should co-operate with the class attribute', it('should co-operate with the class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr" class="init foo"></div>'; var template = '<div [ngClass]="objExpr" class="init foo"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -445,7 +445,7 @@ export function main() {
it('should co-operate with the interpolated class attribute', it('should co-operate with the interpolated class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="objExpr" class="{{'init foo'}}"></div>`; var template = `<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -465,7 +465,7 @@ export function main() {
it('should co-operate with the class attribute and binding to it', it('should co-operate with the class attribute and binding to it',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="objExpr" class="init" [class]="'foo'"></div>`; var template = `<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -486,7 +486,7 @@ export function main() {
it('should co-operate with the class attribute and class.name binding', it('should co-operate with the class attribute and class.name binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>'; '<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -508,7 +508,7 @@ export function main() {
it('should co-operate with initial class and class attribute binding when binding changes', it('should co-operate with initial class and class attribute binding when binding changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init" [ng-class]="objExpr" [class]="strExpr"></div>'; var template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)

34
modules/angular2/test/common/directives/ng_for_spec.ts
View File

@ -19,9 +19,9 @@ import {NgFor} from 'angular2/src/common/directives/ng_for';
export function main() { export function main() {
describe('ng-for', () => { describe('ngFor', () => {
var TEMPLATE = var TEMPLATE =
'<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>'; '<div><copy-me template="ngFor #item of items">{{item.toString()}};</copy-me></div>';
it('should reflect initial elements', it('should reflect initial elements',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
@ -98,7 +98,7 @@ export function main() {
it('should iterate over an array of objects', it('should iterate over an array of objects',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>'; var template = '<ul><li template="ngFor #item of items">{{item["name"]}};</li></ul>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -128,7 +128,7 @@ export function main() {
it('should gracefully handle nulls', it('should gracefully handle nulls',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>'; var template = '<ul><li template="ngFor #item of null">{{item}};</li></ul>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
@ -187,8 +187,8 @@ export function main() {
it('should repeat over nested arrays', it('should repeat over nested arrays',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<div template="ng-for #item of items">' + '<div template="ngFor #item of items">' +
'<div template="ng-for #subitem of item">' + '<div template="ngFor #subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div>|' + '</div>|' +
'</div>' + '</div>' +
@ -213,8 +213,8 @@ export function main() {
it('should repeat over nested arrays with no intermediate element', it('should repeat over nested arrays with no intermediate element',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div><template ng-for #item [ng-for-of]="items">' + var template = '<div><template ngFor #item [ngForOf]="items">' +
'<div template="ng-for #subitem of item">' + '<div template="ngFor #subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div></template></div>'; '</div></template></div>';
@ -235,7 +235,7 @@ export function main() {
it('should display indices correctly', it('should display indices correctly',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -254,7 +254,7 @@ export function main() {
it('should display last item correctly', it('should display last item correctly',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div><copy-me template="ng-for: var item of items; var isLast=last">{{isLast.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: var item of items; var isLast=last">{{isLast.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -273,7 +273,7 @@ export function main() {
it('should display even items correctly', it('should display even items correctly',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div><copy-me template="ng-for: var item of items; var isEven=even">{{isEven.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: var item of items; var isEven=even">{{isEven.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -292,7 +292,7 @@ export function main() {
it('should display odd items correctly', it('should display odd items correctly',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div><copy-me template="ng-for: var item of items; var isOdd=odd">{{isOdd.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: var item of items; var isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -312,7 +312,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideTemplate( tcb.overrideTemplate(
TestComponent, TestComponent,
'<ul><template ng-for [ng-for-of]="items" [ng-for-template]="contentTpl"></template></ul>') '<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>')
.overrideTemplate( .overrideTemplate(
ComponentUsingTestComponent, ComponentUsingTestComponent,
'<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>') '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
@ -329,8 +329,8 @@ export function main() {
it('should use a default template if a custom one is null', it('should use a default template if a custom one is null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideTemplate(TestComponent, `<ul><template ng-for #item [ng-for-of]="items" tcb.overrideTemplate(TestComponent, `<ul><template ngFor #item [ngForOf]="items"
[ng-for-template]="contentTpl" #i="index">{{i}}: {{item}};</template></ul>`) [ngForTemplate]="contentTpl" #i="index">{{i}}: {{item}};</template></ul>`)
.overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>') .overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
.createAsync(ComponentUsingTestComponent) .createAsync(ComponentUsingTestComponent)
.then((fixture) => { .then((fixture) => {
@ -345,8 +345,8 @@ export function main() {
it('should use a custom template when both default and a custom one are present', it('should use a custom template when both default and a custom one are present',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideTemplate(TestComponent, `<ul><template ng-for #item [ng-for-of]="items" tcb.overrideTemplate(TestComponent, `<ul><template ngFor #item [ngForOf]="items"
[ng-for-template]="contentTpl" #i="index">{{i}}=> {{item}};</template></ul>`) [ngForTemplate]="contentTpl" #i="index">{{i}}=> {{item}};</template></ul>`)
.overrideTemplate( .overrideTemplate(
ComponentUsingTestComponent, ComponentUsingTestComponent,
'<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>') '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')

22
modules/angular2/test/common/directives/ng_if_spec.ts
View File

@ -20,10 +20,10 @@ import {NgIf} from 'angular2/common';
import {IS_DART} from 'angular2/src/facade/lang'; import {IS_DART} from 'angular2/src/facade/lang';
export function main() { export function main() {
describe('ng-if directive', () => { describe('ngIf directive', () => {
it('should work in a template attribute', it('should work in a template attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -39,7 +39,7 @@ export function main() {
it('should work in a template element', it('should work in a template element',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = var html =
'<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>'; '<div><template [ngIf]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -54,7 +54,7 @@ export function main() {
it('should toggle node when condition changes', it('should toggle node when condition changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -84,7 +84,7 @@ export function main() {
it('should handle nested if correctly', it('should handle nested if correctly',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = var html =
'<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>'; '<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -127,9 +127,9 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = var html =
'<div>' + '<div>' +
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' + '<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' + '<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' + '<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>'; '</div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
@ -161,7 +161,7 @@ export function main() {
if (!IS_DART) { if (!IS_DART) {
it('should not add the element twice if the condition goes from true to true (JS)', it('should not add the element twice if the condition goes from true to true (JS)',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -183,7 +183,7 @@ export function main() {
it('should not recreate the element if the condition goes from true to true (JS)', it('should not recreate the element if the condition goes from true to true (JS)',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -207,7 +207,7 @@ export function main() {
if (IS_DART) { if (IS_DART) {
it('should not create the element if the condition is not a boolean (DART)', it('should not create the element if the condition is not a boolean (DART)',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent) .createAsync(TestComponent)

10
modules/angular2/test/common/directives/ng_style_spec.ts
View File

@ -26,7 +26,7 @@ export function main() {
it('should add styles specified in an object literal', it('should add styles specified in an object literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-style]="{'max-width': '40px'}"></div>`; var template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -42,7 +42,7 @@ export function main() {
it('should add and change styles specified in an object expression', it('should add and change styles specified in an object expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-style]="expr"></div>`; var template = `<div [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -68,7 +68,7 @@ export function main() {
it('should remove styles when deleting a key in an object expression', it('should remove styles when deleting a key in an object expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-style]="expr"></div>`; var template = `<div [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -91,7 +91,7 @@ export function main() {
it('should co-operate with the style attribute', it('should co-operate with the style attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div style="font-size: 12px" [ng-style]="expr"></div>`; var template = `<div style="font-size: 12px" [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -120,7 +120,7 @@ export function main() {
it('should co-operate with the style.[styleName]="expr" special-case in the compiler', it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [style.font-size.px]="12" [ng-style]="expr"></div>`; var template = `<div [style.font-size.px]="12" [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)

34
modules/angular2/test/common/directives/ng_switch_spec.ts
View File

@ -22,9 +22,9 @@ export function main() {
it('should switch amongst when values', it('should switch amongst when values',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template ng-switch-when="a"><li>when a</li></template>' + '<template ngSwitchWhen="a"><li>when a</li></template>' +
'<template ng-switch-when="b"><li>when b</li></template>' + '<template ngSwitchWhen="b"><li>when b</li></template>' +
'</ul></div>'; '</ul></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -48,9 +48,9 @@ export function main() {
it('should switch amongst when values with fallback to default', it('should switch amongst when values with fallback to default',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<li template="ng-switch-when \'a\'">when a</li>' + '<li template="ngSwitchWhen \'a\'">when a</li>' +
'<li template="ng-switch-default">when default</li>' + '<li template="ngSwitchDefault">when default</li>' +
'</ul></div>'; '</ul></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -74,13 +74,13 @@ export function main() {
it('should support multiple whens with the same value', it('should support multiple whens with the same value',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template ng-switch-when="a"><li>when a1;</li></template>' + '<template ngSwitchWhen="a"><li>when a1;</li></template>' +
'<template ng-switch-when="b"><li>when b1;</li></template>' + '<template ngSwitchWhen="b"><li>when b1;</li></template>' +
'<template ng-switch-when="a"><li>when a2;</li></template>' + '<template ngSwitchWhen="a"><li>when a2;</li></template>' +
'<template ng-switch-when="b"><li>when b2;</li></template>' + '<template ngSwitchWhen="b"><li>when b2;</li></template>' +
'<template ng-switch-default><li>when default1;</li></template>' + '<template ngSwitchDefault><li>when default1;</li></template>' +
'<template ng-switch-default><li>when default2;</li></template>' + '<template ngSwitchDefault><li>when default2;</li></template>' +
'</ul></div>'; '</ul></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -107,10 +107,10 @@ export function main() {
it('should switch amongst when values', it('should switch amongst when values',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' + '<template [ngSwitchWhen]="when1"><li>when 1;</li></template>' +
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' + '<template [ngSwitchWhen]="when2"><li>when 2;</li></template>' +
'<template ng-switch-default><li>when default;</li></template>' + '<template ngSwitchDefault><li>when default;</li></template>' +
'</ul></div>'; '</ul></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)

6
modules/angular2/test/common/directives/non_bindable_spec.ts
View File

@ -19,7 +19,7 @@ export function main() {
describe('non-bindable', () => { describe('non-bindable', () => {
it('should not interpolate children', it('should not interpolate children',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>'; var template = '<div>{{text}}<span ngNonBindable>{{text}}</span></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
@ -31,7 +31,7 @@ export function main() {
it('should ignore directives on child nodes', it('should ignore directives on child nodes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>'; var template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
@ -47,7 +47,7 @@ export function main() {
it('should trigger directives on the same node', it('should trigger directives on the same node',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>'; var template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {

156
modules/angular2/test/common/forms/integration_spec.ts
View File

@ -45,8 +45,8 @@ export function main() {
it("should initialize DOM elements with the given form object", it("should initialize DOM elements with the given form object",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -64,8 +64,8 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var form = new ControlGroup({"login": new Control("oldValue")}); var form = new ControlGroup({"login": new Control("oldValue")});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -85,8 +85,8 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var form = new ControlGroup({"login": new Control("oldValue")}); var form = new ControlGroup({"login": new Control("oldValue")});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -104,11 +104,10 @@ export function main() {
}); });
})); }));
it("should emit ngSubmit event on submit",
it("should emit ng-submit event on submit",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div> var t = `<div>
<form [ng-form-model]="form" (ng-submit)="name='updated'"></form> <form [ngFormModel]="form" (ngSubmit)="name='updated'"></form>
<span>{{name}}</span> <span>{{name}}</span>
</div>`; </div>`;
@ -134,7 +133,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var control = new Control("loginValue"); var control = new Control("loginValue");
var t = `<div><input type="text" [ng-form-control]="form"></div>`; var t = `<div><input type="text" [ngFormControl]="form"></div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
fixture.debugElement.componentInstance.form = control; fixture.debugElement.componentInstance.form = control;
@ -153,8 +152,8 @@ export function main() {
it("should update DOM elements when rebinding the control group", it("should update DOM elements when rebinding the control group",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -177,8 +176,8 @@ export function main() {
var login = new Control("oldValue"); var login = new Control("oldValue");
var form = new ControlGroup({"login": login}); var form = new ControlGroup({"login": login});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -200,8 +199,8 @@ export function main() {
var login = new Control("oldValue"); var login = new Control("oldValue");
var form = new ControlGroup({"login": login}); var form = new ControlGroup({"login": login});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -222,8 +221,8 @@ export function main() {
describe("different control types", () => { describe("different control types", () => {
it("should support <input type=text>", it("should support <input type=text>",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="text"> <input type="text" ngControl="text">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -244,8 +243,8 @@ export function main() {
it("should support <input> without type", it("should support <input> without type",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input ng-control="text"> <input ngControl="text">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -265,8 +264,8 @@ export function main() {
it("should support <textarea>", it("should support <textarea>",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<textarea ng-control="text"></textarea> <textarea ngControl="text"></textarea>
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -287,8 +286,8 @@ export function main() {
it("should support <type=checkbox>", it("should support <type=checkbox>",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="checkbox" ng-control="checkbox"> <input type="checkbox" ngControl="checkbox">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -309,8 +308,8 @@ export function main() {
it("should support <type=number>", it("should support <type=number>",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="number" ng-control="num"> <input type="number" ngControl="num">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -331,8 +330,8 @@ export function main() {
it("should support <select>", it("should support <select>",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<select ng-control="city"> <select ngControl="city">
<option value="SF"></option> <option value="SF"></option>
<option value="NYC"></option> <option value="NYC"></option>
</select> </select>
@ -359,9 +358,9 @@ export function main() {
it("should support <select> with a dynamic list of options", it("should support <select> with a dynamic list of options",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<select ng-control="city"> <select ngControl="city">
<option *ng-for="#c of data" [value]="c"></option> <option *ngFor="#c of data" [value]="c"></option>
</select> </select>
</div>`; </div>`;
@ -382,8 +381,8 @@ export function main() {
it("should support custom value accessors", it("should support custom value accessors",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="name" wrapped-value> <input type="text" ngControl="name" wrapped-value>
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -403,8 +402,8 @@ export function main() {
it("should support custom value accessors on non builtin input elements that fire a change event without a 'target' property", it("should support custom value accessors on non builtin input elements that fire a change event without a 'target' property",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<my-input ng-control="name"></my-input> <my-input ngControl="name"></my-input>
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -431,10 +430,10 @@ export function main() {
var form = new ControlGroup( var form = new ControlGroup(
{"login": new Control(""), "min": new Control(""), "max": new Control("")}); {"login": new Control(""), "min": new Control(""), "max": new Control("")});
var t = `<div [ng-form-model]="form" login-is-empty-validator> var t = `<div [ngFormModel]="form" login-is-empty-validator>
<input type="text" ng-control="login" required> <input type="text" ngControl="login" required>
<input type="text" ng-control="min" minlength="3"> <input type="text" ngControl="min" minlength="3">
<input type="text" ng-control="max" maxlength="3"> <input type="text" ngControl="max" maxlength="3">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -475,8 +474,8 @@ export function main() {
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var form = new ControlGroup({"login": new Control("")}); var form = new ControlGroup({"login": new Control("")});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login" uniq-login-validator="expected"> <input type="text" ngControl="login" uniq-login-validator="expected">
</div>`; </div>`;
var rootTC; var rootTC;
@ -504,8 +503,8 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var form = new ControlGroup({"login": new Control("aa", Validators.required)}); var form = new ControlGroup({"login": new Control("aa", Validators.required)});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -529,8 +528,8 @@ export function main() {
new Control("", Validators.required, uniqLoginAsyncValidator("expected")); new Control("", Validators.required, uniqLoginAsyncValidator("expected"));
var form = new ControlGroup({"login": control}); var form = new ControlGroup({"login": control});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div>`; </div>`;
var fixture; var fixture;
@ -566,9 +565,9 @@ export function main() {
var form = var form =
new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})}); new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<div ng-control-group="nested"> <div ngControlGroup="nested">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div> </div>
</div>`; </div>`;
@ -587,9 +586,9 @@ export function main() {
var form = var form =
new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})}); new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
var t = `<div [ng-form-model]="form"> var t = `<div [ngFormModel]="form">
<div ng-control-group="nested"> <div ngControlGroup="nested">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div> </div>
</div>`; </div>`;
@ -607,13 +606,13 @@ export function main() {
})); }));
}); });
it("should support ng-model for complex forms", it("should support ngModel for complex forms",
inject( inject(
[TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var form = new ControlGroup({"name": new Control("")}); var form = new ControlGroup({"name": new Control("")});
var t = var t =
`<div [ng-form-model]="form"><input type="text" ng-control="name" [(ng-model)]="name"></div>`; `<div [ngFormModel]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@ -634,12 +633,11 @@ export function main() {
expect(fixture.debugElement.componentInstance.name).toEqual("updatedValue"); expect(fixture.debugElement.componentInstance.name).toEqual("updatedValue");
}))); })));
it("should support ng-model for single fields", it("should support ngModel for single fields",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var form = new Control(""); var form = new Control("");
var t = var t = `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
`<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@ -663,8 +661,8 @@ export function main() {
it("should add new controls and control groups", it("should add new controls and control groups",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<form> var t = `<form>
<div ng-control-group="user"> <div ngControlGroup="user">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div> </div>
</form>`; </form>`;
@ -684,9 +682,9 @@ export function main() {
expect(form.controls['user'].controls['login']).toBeDefined(); expect(form.controls['user'].controls['login']).toBeDefined();
}))); })));
it("should emit ng-submit event on submit", it("should emit ngSubmit event on submit",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div><form (ng-submit)="name='updated'"></form></div>`; var t = `<div><form (ngSubmit)="name='updated'"></form></div>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@ -701,9 +699,9 @@ export function main() {
expect(fixture.debugElement.componentInstance.name).toEqual("updated"); expect(fixture.debugElement.componentInstance.name).toEqual("updated");
}))); })));
it("should not create a template-driven form when ng-no-form is used", it("should not create a template-driven form when ngNoForm is used",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<form ng-no-form> var t = `<form ngNoForm>
</form>`; </form>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -718,8 +716,8 @@ export function main() {
it("should remove controls", it("should remove controls",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<form> var t = `<form>
<div *ng-if="name == 'show'"> <div *ngIf="name == 'show'">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div> </div>
</form>`; </form>`;
@ -745,8 +743,8 @@ export function main() {
it("should remove control groups", it("should remove control groups",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<form> var t = `<form>
<div *ng-if="name=='show'" ng-control-group="user"> <div *ngIf="name=='show'" ngControlGroup="user">
<input type="text" ng-control="login"> <input type="text" ngControl="login">
</div> </div>
</form>`; </form>`;
@ -769,10 +767,10 @@ export function main() {
expect(form.controls['user']).not.toBeDefined(); expect(form.controls['user']).not.toBeDefined();
}))); })));
it("should support ng-model for complex forms", it("should support ngModel for complex forms",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<form> var t = `<form>
<input type="text" ng-control="name" [(ng-model)]="name"> <input type="text" ngControl="name" [(ngModel)]="name">
</form>`; </form>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
@ -794,9 +792,9 @@ export function main() {
}))); })));
it("should support ng-model for single fields", it("should support ngModel for single fields",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div><input type="text" [(ng-model)]="name"></div>`; var t = `<div><input type="text" [(ngModel)]="name"></div>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@ -822,7 +820,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var form = new Control("", Validators.required); var form = new Control("", Validators.required);
var t = `<div><input type="text" [ng-form-control]="form"></div>`; var t = `<div><input type="text" [ngFormControl]="form"></div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
fixture.debugElement.componentInstance.form = form; fixture.debugElement.componentInstance.form = form;
@ -849,7 +847,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var form = new ControlGroup({"name": new Control("", Validators.required)}); var form = new ControlGroup({"name": new Control("", Validators.required)});
var t = `<form [ng-form-model]="form"><input type="text" ng-control="name"></form>`; var t = `<form [ngFormModel]="form"><input type="text" ngControl="name"></form>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
fixture.debugElement.componentInstance.form = form; fixture.debugElement.componentInstance.form = form;
@ -872,9 +870,9 @@ export function main() {
}); });
})); }));
it("should work with ng-model", it("should work with ngModel",
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var t = `<div><input [(ng-model)]="name" required></div>`; var t = `<div><input [(ngModel)]="name" required></div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => { tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
fixture.debugElement.componentInstance.name = ""; fixture.debugElement.componentInstance.name = "";
@ -898,13 +896,13 @@ export function main() {
})); }));
}); });
describe("ng-model corner cases", () => { describe("ngModel corner cases", () => {
it("should not update the view when the value initially came from the view", it("should not update the view when the value initially came from the view",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var form = new Control(""); var form = new Control("");
var t = var t =
`<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`; `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
(root) => { fixture = root; }); (root) => { fixture = root; });
@ -933,7 +931,7 @@ export function main() {
it("should update the view when the model is set back to what used to be in the view", it("should update the view when the model is set back to what used to be in the view",
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<input type="text" [(ng-model)]="name">`; var t = `<input type="text" [(ngModel)]="name">`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
(root) => { fixture = root; }); (root) => { fixture = root; });
@ -968,8 +966,8 @@ export function main() {
// {{x.valid}} used to crash because valid() tried to read a property // {{x.valid}} used to crash because valid() tried to read a property
// from form.control before it was set. This test verifies this bug is // from form.control before it was set. This test verifies this bug is
// fixed. // fixed.
var t = `<form><div ng-control-group="x" #x="ngForm"> var t = `<form><div ngControlGroup="x" #x="ngForm">
<input type="text" ng-control="test"></div>{{x.valid}}</form>`; <input type="text" ngControl="test"></div>{{x.valid}}</form>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
(root) => { fixture = root; }); (root) => { fixture = root; });

12
modules/angular2/test/compiler/change_definition_factory_spec.ts
View File

@ -73,7 +73,7 @@ export function main() {
} }
it('should watch element properties', () => { it('should watch element properties', () => {
var changeDetector = createChangeDetector('<div [el-prop]="someProp">', [], 0); var changeDetector = createChangeDetector('<div [elProp]="someProp">', [], 0);
context.someProp = 'someValue'; context.someProp = 'someValue';
changeDetector.detectChanges(); changeDetector.detectChanges();
@ -119,7 +119,7 @@ export function main() {
}); });
it('should watch variables', () => { it('should watch variables', () => {
var changeDetector = createChangeDetector('<div #some-var [el-prop]="someVar">', [], 0); var changeDetector = createChangeDetector('<div #someVar [elProp]="someVar">', [], 0);
locals.set('someVar', 'someValue'); locals.set('someVar', 'someValue');
changeDetector.detectChanges(); changeDetector.detectChanges();
@ -129,11 +129,11 @@ export function main() {
it('should write directive properties', () => { it('should write directive properties', () => {
var dirMeta = CompileDirectiveMetadata.create({ var dirMeta = CompileDirectiveMetadata.create({
type: new CompileTypeMetadata({name: 'SomeDir'}), type: new CompileTypeMetadata({name: 'SomeDir'}),
selector: '[dir-prop]', selector: '[dirProp]',
inputs: ['dirProp'] inputs: ['dirProp']
}); });
var changeDetector = createChangeDetector('<div [dir-prop]="someProp">', [dirMeta], 0); var changeDetector = createChangeDetector('<div [dirProp]="someProp">', [dirMeta], 0);
context.someProp = 'someValue'; context.someProp = 'someValue';
changeDetector.detectChanges(); changeDetector.detectChanges();
@ -143,11 +143,11 @@ export function main() {
it('should write template directive properties', () => { it('should write template directive properties', () => {
var dirMeta = CompileDirectiveMetadata.create({ var dirMeta = CompileDirectiveMetadata.create({
type: new CompileTypeMetadata({name: 'SomeDir'}), type: new CompileTypeMetadata({name: 'SomeDir'}),
selector: '[dir-prop]', selector: '[dirProp]',
inputs: ['dirProp'] inputs: ['dirProp']
}); });
var changeDetector = createChangeDetector('<template [dir-prop]="someProp">', [dirMeta], 0); var changeDetector = createChangeDetector('<template [dirProp]="someProp">', [dirMeta], 0);
context.someProp = 'someValue'; context.someProp = 'someValue';
changeDetector.detectChanges(); changeDetector.detectChanges();

7
modules/angular2/test/compiler/change_detector_compiler_spec.ts
View File

@ -83,7 +83,7 @@ export function main() {
{useValue: new ChangeDetectorGenConfig(true, false, false)}) {useValue: new ChangeDetectorGenConfig(true, false, false)})
]); ]);
it('should watch element properties', () => { it('should watch element properties', () => {
expect(detectChanges(compiler, '<div [el-prop]="someProp">')) expect(detectChanges(compiler, '<div [elProp]="someProp">'))
.toEqual(['elementProperty(elProp)=someValue']); .toEqual(['elementProperty(elProp)=someValue']);
}); });
}); });
@ -94,10 +94,9 @@ export function main() {
{useValue: new ChangeDetectorGenConfig(true, false, true)}) {useValue: new ChangeDetectorGenConfig(true, false, true)})
]); ]);
it('should watch element properties', () => { it('should watch element properties', () => {
expect(detectChanges(compiler, '<div [el-prop]="someProp">')) expect(detectChanges(compiler, '<div [elProp]="someProp">'))
.toEqual(['elementProperty(elProp)=someValue']); .toEqual(['elementProperty(elProp)=someValue']);
}); });
}); });
@ -117,7 +116,7 @@ export function main() {
} }
it('should watch element properties', inject([AsyncTestCompleter], (async) => { it('should watch element properties', inject([AsyncTestCompleter], (async) => {
detectChanges(compiler, '<div [el-prop]="someProp">') detectChanges(compiler, '<div [elProp]="someProp">')
.then((value) => { .then((value) => {
expect(value).toEqual(['elementProperty(elProp)=someValue']); expect(value).toEqual(['elementProperty(elProp)=someValue']);
async.done(); async.done();

8
modules/angular2/test/compiler/command_compiler_spec.ts
View File

@ -173,7 +173,7 @@ export function main() {
it('should create bound element commands', inject([AsyncTestCompleter], (async) => { it('should create bound element commands', inject([AsyncTestCompleter], (async) => {
var rootComp = createComp({ var rootComp = createComp({
type: RootCompTypeMeta, type: RootCompTypeMeta,
template: '<div a="b" #some-var (click)="someHandler" (window:scroll)="scrollTo()">' template: '<div a="b" #someVar (click)="someHandler" (window:scroll)="scrollTo()">'
}); });
run(rootComp, []) run(rootComp, [])
.then((data) => { .then((data) => {
@ -197,7 +197,7 @@ export function main() {
it('should create element commands with directives', it('should create element commands with directives',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
var rootComp = var rootComp =
createComp({type: RootCompTypeMeta, template: '<div a #some-var="someExport">'}); createComp({type: RootCompTypeMeta, template: '<div a #someVar="someExport">'});
var dir = CompileDirectiveMetadata.create({ var dir = CompileDirectiveMetadata.create({
selector: '[a]', selector: '[a]',
exportAs: 'someExport', exportAs: 'someExport',
@ -284,7 +284,7 @@ export function main() {
it('should create component commands', inject([AsyncTestCompleter], (async) => { it('should create component commands', inject([AsyncTestCompleter], (async) => {
var rootComp = createComp( var rootComp = createComp(
{type: RootCompTypeMeta, template: '<a a="b" #some-var (click)="someHandler">'}); {type: RootCompTypeMeta, template: '<a a="b" #someVar (click)="someHandler">'});
var comp = createComp({type: ACompTypeMeta, selector: 'a'}); var comp = createComp({type: ACompTypeMeta, selector: 'a'});
run(rootComp, [comp]) run(rootComp, [comp])
.then((data) => { .then((data) => {
@ -374,7 +374,7 @@ export function main() {
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
var rootComp = createComp({ var rootComp = createComp({
type: RootCompTypeMeta, type: RootCompTypeMeta,
template: '<template #some-var="someValue" #some-empty-var></template>' template: '<template #someVar="someValue" #someEmptyVar></template>'
}); });
var dir = createDirective(SomeDirTypeMeta, '[a]'); var dir = createDirective(SomeDirTypeMeta, '[a]');
run(rootComp, [dir], 1) run(rootComp, [dir], 1)

11
modules/angular2/test/compiler/html_parser_spec.ts
View File

@ -164,9 +164,14 @@ export function main() {
.toEqual([[HtmlElementAst, '@myns:div', 0], [HtmlElementAst, '@myns:p', 1]]); .toEqual([[HtmlElementAst, '@myns:div', 0], [HtmlElementAst, '@myns:p', 1]]);
}); });
it('should match closing tags case insensitive', () => { it('should match closing tags case sensitive', () => {
expect(humanizeDom(parser.parse('<DiV><P></p></dIv>', 'TestComp'))) let errors = parser.parse('<DiV><P></p></dIv>', 'TestComp').errors;
.toEqual([[HtmlElementAst, 'DiV', 0], [HtmlElementAst, 'P', 1]]); expect(errors.length).toEqual(2);
expect(humanizeErrors(errors))
.toEqual([
['p', 'Unexpected closing tag "p"', '0:8'],
['dIv', 'Unexpected closing tag "dIv"', '0:12'],
]);
}); });
it('should support self closing void elements', () => { it('should support self closing void elements', () => {

32
modules/angular2/test/compiler/selector_spec.ts
View File

@ -21,14 +21,17 @@ export function main() {
matcher = new SelectorMatcher(); matcher = new SelectorMatcher();
}); });
it('should select by element name case insensitive', () => { it('should select by element name case sensitive', () => {
matcher.addSelectables(s1 = CssSelector.parse('someTag'), 1); matcher.addSelectables(s1 = CssSelector.parse('someTag'), 1);
expect(matcher.match(CssSelector.parse('SOMEOTHERTAG')[0], selectableCollector)) expect(matcher.match(CssSelector.parse('SOMEOTHERTAG')[0], selectableCollector))
.toEqual(false); .toEqual(false);
expect(matched).toEqual([]); expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('SOMETAG')[0], selectableCollector)).toEqual(true); expect(matcher.match(CssSelector.parse('SOMETAG')[0], selectableCollector)).toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('someTag')[0], selectableCollector)).toEqual(true);
expect(matched).toEqual([s1[0], 1]); expect(matched).toEqual([s1[0], 1]);
}); });
@ -49,7 +52,7 @@ export function main() {
expect(matched).toEqual([s1[0], 1, s2[0], 2]); expect(matched).toEqual([s1[0], 1, s2[0], 2]);
}); });
it('should select by attr name case insensitive independent of the value', () => { it('should select by attr name case sensitive independent of the value', () => {
matcher.addSelectables(s1 = CssSelector.parse('[someAttr]'), 1); matcher.addSelectables(s1 = CssSelector.parse('[someAttr]'), 1);
matcher.addSelectables(s2 = CssSelector.parse('[someAttr][someAttr2]'), 2); matcher.addSelectables(s2 = CssSelector.parse('[someAttr][someAttr2]'), 2);
@ -57,15 +60,13 @@ export function main() {
.toEqual(false); .toEqual(false);
expect(matched).toEqual([]); expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[SOMEATTR]')[0], selectableCollector)).toEqual(true); expect(matcher.match(CssSelector.parse('[SOMEATTR]')[0], selectableCollector)).toEqual(false);
expect(matched).toEqual([s1[0], 1]); expect(matched).toEqual([]);
reset();
expect(matcher.match(CssSelector.parse('[SOMEATTR=someValue]')[0], selectableCollector)) expect(matcher.match(CssSelector.parse('[SOMEATTR=someValue]')[0], selectableCollector))
.toEqual(true); .toEqual(false);
expect(matched).toEqual([s1[0], 1]); expect(matched).toEqual([]);
reset();
expect(matcher.match(CssSelector.parse('[someAttr][someAttr2]')[0], selectableCollector)) expect(matcher.match(CssSelector.parse('[someAttr][someAttr2]')[0], selectableCollector))
.toEqual(true); .toEqual(true);
expect(matched).toEqual([s1[0], 1, s2[0], 2]); expect(matched).toEqual([s1[0], 1, s2[0], 2]);
@ -100,7 +101,7 @@ export function main() {
expect(matched).toEqual([s1[0], 1]); expect(matched).toEqual([s1[0], 1]);
}); });
it('should select by attr name and value case insensitive', () => { it('should select by attr name case sensitive and value case insensitive', () => {
matcher.addSelectables(s1 = CssSelector.parse('[someAttr=someValue]'), 1); matcher.addSelectables(s1 = CssSelector.parse('[someAttr=someValue]'), 1);
expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEOTHERATTR]')[0], selectableCollector)) expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEOTHERATTR]')[0], selectableCollector))
@ -108,6 +109,10 @@ export function main() {
expect(matched).toEqual([]); expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEVALUE]')[0], selectableCollector)) expect(matcher.match(CssSelector.parse('[SOMEATTR=SOMEVALUE]')[0], selectableCollector))
.toEqual(false);
expect(matched).toEqual([]);
expect(matcher.match(CssSelector.parse('[someAttr=SOMEVALUE]')[0], selectableCollector))
.toEqual(true); .toEqual(true);
expect(matched).toEqual([s1[0], 1]); expect(matched).toEqual([s1[0], 1]);
}); });
@ -337,11 +342,12 @@ export function main() {
}); });
describe('CssSelector.getMatchingElementTemplate', () => { describe('CssSelector.getMatchingElementTemplate', () => {
it('should create an element with a tagName, classes, and attributes', () => { it('should create an element with a tagName, classes, and attributes with the correct casing',
let selector = CssSelector.parse('blink.neon.hotpink[sweet][dismissable=false]')[0]; () => {
let selector = CssSelector.parse('Blink.neon.hotpink[Sweet][Dismissable=false]')[0];
let template = selector.getMatchingElementTemplate(); let template = selector.getMatchingElementTemplate();
expect(template).toEqual('<blink class="neon hotpink" sweet dismissable="false"></blink>'); expect(template).toEqual('<Blink class="neon hotpink" Sweet Dismissable="false"></Blink>');
}); });
it('should create an element without a tag name', () => { it('should create an element without a tag name', () => {

8
modules/angular2/test/compiler/template_normalizer_spec.ts
View File

@ -305,22 +305,22 @@ export function main() {
expect(template.encapsulation).toEqual(ViewEncapsulation.None); expect(template.encapsulation).toEqual(ViewEncapsulation.None);
})); }));
it('should ignore ng-content in elements with ng-non-bindable', it('should ignore ng-content in elements with ngNonBindable',
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => { inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
var template = normalizer.normalizeLoadedTemplate( var template = normalizer.normalizeLoadedTemplate(
dirType, dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}), new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<div ng-non-bindable><ng-content select="a"></ng-content></div>', '<div ngNonBindable><ng-content select="a"></ng-content></div>',
'package:some/module/'); 'package:some/module/');
expect(template.ngContentSelectors).toEqual([]); expect(template.ngContentSelectors).toEqual([]);
})); }));
it('should still collect <style> in elements with ng-non-bindable', it('should still collect <style> in elements with ngNonBindable',
inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => { inject([TemplateNormalizer], (normalizer: TemplateNormalizer) => {
var template = normalizer.normalizeLoadedTemplate( var template = normalizer.normalizeLoadedTemplate(
dirType, dirType,
new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}), new CompileTemplateMetadata({encapsulation: null, styles: [], styleUrls: []}),
'<div ng-non-bindable><style>div {color:red}</style></div>', 'package:some/module/'); '<div ngNonBindable><style>div {color:red}</style></div>', 'package:some/module/');
expect(template.styles).toEqual(['div {color:red}']); expect(template.styles).toEqual(['div {color:red}']);
})); }));
}); });

149
modules/angular2/test/compiler/template_parser_spec.ts
View File

@ -66,7 +66,7 @@ export function main() {
beforeEach(inject([TemplateParser], (_parser) => { beforeEach(inject([TemplateParser], (_parser) => {
parser = _parser; parser = _parser;
ngIf = CompileDirectiveMetadata.create( ngIf = CompileDirectiveMetadata.create(
{selector: '[ng-if]', type: new CompileTypeMetadata({name: 'NgIf'}), inputs: ['ngIf']}); {selector: '[ngIf]', type: new CompileTypeMetadata({name: 'NgIf'}), inputs: ['ngIf']});
})); }));
function parse(template: string, directives: CompileDirectiveMetadata[]): TemplateAst[] { function parse(template: string, directives: CompileDirectiveMetadata[]): TemplateAst[] {
@ -120,16 +120,16 @@ export function main() {
]); ]);
}); });
it('should parse and camel case bound properties', () => { it('should parse dash case bound properties', () => {
expect(humanizeTplAst(parse('<div [some-prop]="v">', []))) expect(humanizeTplAst(parse('<div [some-prop]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Property, 'some-prop', 'v', null]
]); ]);
}); });
it('should normalize property names via the element schema', () => { it('should normalize property names via the element schema', () => {
expect(humanizeTplAst(parse('<div [mapped-attr]="v">', []))) expect(humanizeTplAst(parse('<div [mappedAttr]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
@ -144,31 +144,12 @@ export function main() {
]); ]);
}); });
it('should parse and camel case bound attributes', () => {
expect(humanizeTplAst(parse('<div [attr.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
expect(humanizeTplAst(parse('<div [ATTR.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
});
it('should parse and dash case bound classes', () => { it('should parse and dash case bound classes', () => {
expect(humanizeTplAst(parse('<div [class.some-class]="v">', []))) expect(humanizeTplAst(parse('<div [class.some-class]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
]); ]);
expect(humanizeTplAst(parse('<div [CLASS.some-class]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
]);
}); });
it('should parse mixed case bound classes', () => { it('should parse mixed case bound classes', () => {
@ -179,25 +160,27 @@ export function main() {
]); ]);
}); });
it('should parse and camel case bound styles', () => { it('should parse mixed case bound styles', () => {
expect(humanizeTplAst(parse('<div [style.some-style]="v">', []))) expect(humanizeTplAst(parse('<div [style.someStyle]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]);
expect(humanizeTplAst(parse('<div [STYLE.some-style]="v">', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]); ]);
}); });
it('should parse and mixed case bound styles', () => { it('should report invalid prefixes', () => {
expect(humanizeTplAst(parse('<div [style.someStyle]="v">', []))) expect(() => parse('<p [atTr.foo]>', []))
.toEqual([ .toThrowError(
[ElementAst, 'div'], `Template parse errors:\nInvalid property name 'atTr.foo' ("<p [ERROR ->][atTr.foo]>"): TestComp@0:3`);
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null] expect(() => parse('<p [sTyle.foo]>', []))
]); .toThrowError(
`Template parse errors:\nInvalid property name 'sTyle.foo' ("<p [ERROR ->][sTyle.foo]>"): TestComp@0:3`);
expect(() => parse('<p [Class.foo]>', []))
.toThrowError(
`Template parse errors:\nInvalid property name 'Class.foo' ("<p [ERROR ->][Class.foo]>"): TestComp@0:3`);
expect(() => parse('<p [bar.foo]>', []))
.toThrowError(
`Template parse errors:\nInvalid property name 'bar.foo' ("<p [ERROR ->][bar.foo]>"): TestComp@0:3`);
}); });
it('should parse bound properties via [...] and not report them as attributes', () => { it('should parse bound properties via [...] and not report them as attributes', () => {
@ -214,11 +197,6 @@ export function main() {
[ElementAst, 'div'], [ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null] [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
]); ]);
expect(humanizeTplAst(parse('<div BIND-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
]);
}); });
it('should parse bound properties via {{...}} and not report them as attributes', () => { it('should parse bound properties via {{...}} and not report them as attributes', () => {
@ -243,12 +221,9 @@ export function main() {
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
}); });
it('should parse and camel case event names', () => { it('should parse event names case sensitive', () => {
expect(humanizeTplAst(parse('<div (some-event)="v">', []))) expect(humanizeTplAst(parse('<div (some-event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'some-event', null, 'v']]);
});
it('should parse mixed case event names', () => {
expect(humanizeTplAst(parse('<div (someEvent)="v">', []))) expect(humanizeTplAst(parse('<div (someEvent)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
}); });
@ -256,8 +231,6 @@ export function main() {
it('should parse bound events via on- and not report them as attributes', () => { it('should parse bound events via on- and not report them as attributes', () => {
expect(humanizeTplAst(parse('<div on-event="v">', []))) expect(humanizeTplAst(parse('<div on-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]); .toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
expect(humanizeTplAst(parse('<div ON-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
}); });
it('should allow events on explicit embedded templates that are emitted by a directive', it('should allow events on explicit embedded templates that are emitted by a directive',
@ -295,12 +268,6 @@ export function main() {
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null], [BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event'] [BoundEventAst, 'propChange', null, 'v = $event']
]); ]);
expect(humanizeTplAst(parse('<div BINDON-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event']
]);
}); });
}); });
@ -374,7 +341,7 @@ export function main() {
it('should parse directive properties', () => { it('should parse directive properties', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']}); {selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTplAst(parse('<div [a-prop]="expr"></div>', [dirA]))) expect(humanizeTplAst(parse('<div [aProp]="expr"></div>', [dirA])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[DirectiveAst, dirA], [DirectiveAst, dirA],
@ -436,12 +403,10 @@ export function main() {
it('should parse variables via var-... and not report them as attributes', () => { it('should parse variables via var-... and not report them as attributes', () => {
expect(humanizeTplAst(parse('<div var-a>', []))) expect(humanizeTplAst(parse('<div var-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]); .toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
expect(humanizeTplAst(parse('<div VAR-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
}); });
it('should camel case variables', () => { it('should parse camel case variables', () => {
expect(humanizeTplAst(parse('<div var-some-a>', []))) expect(humanizeTplAst(parse('<div var-someA>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]); .toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]);
}); });
@ -467,6 +432,11 @@ export function main() {
There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`); There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`);
}); });
it('should report invalid variable names', () => {
expect(() => parse('<div #a-b></div>', [])).toThrowError(`Template parse errors:
"-" is not allowed in variable names ("<div [ERROR ->]#a-b></div>"): TestComp@0:5`);
});
it('should allow variables with values that dont match a directive on embedded template elements', it('should allow variables with values that dont match a directive on embedded template elements',
() => { () => {
expect(humanizeTplAst(parse('<template #a="b"></template>', []))) expect(humanizeTplAst(parse('<template #a="b"></template>', [])))
@ -515,8 +485,6 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
it('should wrap the element into an EmbeddedTemplateAST', () => { it('should wrap the element into an EmbeddedTemplateAST', () => {
expect(humanizeTplAst(parse('<div template>', []))) expect(humanizeTplAst(parse('<div template>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]); .toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
expect(humanizeTplAst(parse('<div TEMPLATE>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
}); });
it('should parse bound properties', () => { it('should parse bound properties', () => {
@ -575,7 +543,7 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
}); });
it('should work with *... and use the attribute name as property binding name', () => { it('should work with *... and use the attribute name as property binding name', () => {
expect(humanizeTplAst(parse('<div *ng-if="test">', [ngIf]))) expect(humanizeTplAst(parse('<div *ngIf="test">', [ngIf])))
.toEqual([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[DirectiveAst, ngIf], [DirectiveAst, ngIf],
@ -585,7 +553,7 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
}); });
it('should work with *... and empty value', () => { it('should work with *... and empty value', () => {
expect(humanizeTplAst(parse('<div *ng-if>', [ngIf]))) expect(humanizeTplAst(parse('<div *ngIf>', [ngIf])))
.toEqual([ .toEqual([
[EmbeddedTemplateAst], [EmbeddedTemplateAst],
[DirectiveAst, ngIf], [DirectiveAst, ngIf],
@ -682,8 +650,8 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
.toEqual([['a', null], ['b', 0], ['#text(hello)', 0]]); .toEqual([['a', null], ['b', 0], ['#text(hello)', 0]]);
}); });
it('should project children of components with ng-non-bindable', () => { it('should project children of components with ngNonBindable', () => {
expect(humanizeContentProjection(parse('<div ng-non-bindable>{{hello}}<span></span></div>', expect(humanizeContentProjection(parse('<div ngNonBindable>{{hello}}<span></span></div>',
[createComp('div', ['*'])]))) [createComp('div', ['*'])])))
.toEqual([['div', null], ['#text({{hello}})', 0], ['span', 0]]); .toEqual([['div', null], ['#text({{hello}})', 0], ['span', 0]]);
}); });
@ -705,8 +673,8 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
}); });
it('should report invalid property names', () => { it('should report invalid property names', () => {
expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors: expect(() => parse('<div [invalidProp]></div>', [])).toThrowError(`Template parse errors:
Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalid-prop]></div>"): TestComp@0:5`); Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalidProp]></div>"): TestComp@0:5`);
}); });
it('should report errors in expressions', () => { it('should report errors in expressions', () => {
@ -813,46 +781,43 @@ Property binding a not used by any directive on an embedded template ("[ERROR ->
}); });
it('should ignore bindings on children of elements with ng-non-bindable', () => { it('should ignore bindings on children of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable>{{b}}</div>', []))) expect(humanizeTplAst(parse('<div ngNonBindable>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, '{{b}}']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, '{{b}}']]);
expect(humanizeTplAst(parse('<div NG-NON-BINDABLE>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'NG-NON-BINDABLE', ''], [TextAst, '{{b}}']]);
}); });
it('should keep nested children of elements with ng-non-bindable', () => { it('should keep nested children of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><span>{{b}}</span></div>', []))) expect(humanizeTplAst(parse('<div ngNonBindable><span>{{b}}</span></div>', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''], [AttrAst, 'ngNonBindable', ''],
[ElementAst, 'span'], [ElementAst, 'span'],
[TextAst, '{{b}}'] [TextAst, '{{b}}']
]); ]);
}); });
it('should ignore <script> elements inside of elements with ng-non-bindable', () => { it('should ignore <script> elements inside of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><script></script>a</div>', []))) expect(humanizeTplAst(parse('<div ngNonBindable><script></script>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
}); });
it('should ignore <style> elements inside of elements with ng-non-bindable', () => { it('should ignore <style> elements inside of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><style></style>a</div>', []))) expect(humanizeTplAst(parse('<div ngNonBindable><style></style>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
}); });
it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable', it('should ignore <link rel="stylesheet"> elements inside of elements with ngNonBindable',
() => { () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><link rel="stylesheet">a</div>', []))) expect(humanizeTplAst(parse('<div ngNonBindable><link rel="stylesheet">a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]); .toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
}); });
it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable', it('should convert <ng-content> elements into regular elements inside of elements with ngNonBindable',
() => { () => {
expect( expect(humanizeTplAst(parse('<div ngNonBindable><ng-content></ng-content>a</div>', [])))
humanizeTplAst(parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
.toEqual([ .toEqual([
[ElementAst, 'div'], [ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''], [AttrAst, 'ngNonBindable', ''],
[ElementAst, 'ng-content'], [ElementAst, 'ng-content'],
[TextAst, 'a'] [TextAst, 'a']
]); ]);
@ -946,11 +911,11 @@ Property binding a not used by any directive on an embedded template ("[ERROR ->
it('should support directive property', () => { it('should support directive property', () => {
var dirA = CompileDirectiveMetadata.create( var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']}); {selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTplAstSourceSpans(parse('<div [a-prop]="foo | bar"></div>', [dirA]))) expect(humanizeTplAstSourceSpans(parse('<div [aProp]="foo | bar"></div>', [dirA])))
.toEqual([ .toEqual([
[ElementAst, 'div', '<div [a-prop]="foo | bar">'], [ElementAst, 'div', '<div [aProp]="foo | bar">'],
[DirectiveAst, dirA, '<div [a-prop]="foo | bar">'], [DirectiveAst, dirA, '<div [aProp]="foo | bar">'],
[BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[a-prop]="foo | bar"'] [BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[aProp]="foo | bar"']
]); ]);
}); });

4
modules/angular2/test/core/change_detection/parser/parser_spec.ts
View File

@ -343,7 +343,7 @@ export function main() {
it('should allow multiple pairs', () => { it('should allow multiple pairs', () => {
var bindings = parseTemplateBindings("a 1 b 2"); var bindings = parseTemplateBindings("a 1 b 2");
expect(keys(bindings)).toEqual(['a', 'a-b']); expect(keys(bindings)).toEqual(['a', 'aB']);
expect(exprSources(bindings)).toEqual(['1 ', '2']); expect(exprSources(bindings)).toEqual(['1 ', '2']);
}); });
@ -382,7 +382,7 @@ export function main() {
bindings = parseTemplateBindings("directive: var item in expr; var a = b", 'location'); bindings = parseTemplateBindings("directive: var item in expr; var a = b", 'location');
expect(keyValues(bindings)) expect(keyValues(bindings))
.toEqual(['directive', '#item=\$implicit', 'directive-in=expr in location', '#a=b']); .toEqual(['directive', '#item=\$implicit', 'directiveIn=expr in location', '#a=b']);
}); });
it('should parse pipes', () => { it('should parse pipes', () => {

10
modules/angular2/test/core/debug/debug_element_spec.ts
View File

@ -53,7 +53,7 @@ class MessageDir {
template: `<div class="child" message="child"> template: `<div class="child" message="child">
<span class="childnested" message="nestedchild">Child</span> <span class="childnested" message="nestedchild">Child</span>
</div> </div>
<span class="child" [inner-html]="childBinding"></span>`, <span class="child" [innerHtml]="childBinding"></span>`,
directives: [MessageDir], directives: [MessageDir],
}) })
@Injectable() @Injectable()
@ -65,7 +65,7 @@ class ChildComp {
@Component({selector: 'cond-content-comp', viewProviders: [Logger]}) @Component({selector: 'cond-content-comp', viewProviders: [Logger]})
@View({ @View({
template: `<div class="child" message="child" *ng-if="false"><ng-content></ng-content></div>`, template: `<div class="child" message="child" *ngIf="false"><ng-content></ng-content></div>`,
directives: [NgIf, MessageDir], directives: [NgIf, MessageDir],
}) })
@Injectable() @Injectable()
@ -77,7 +77,7 @@ class ConditionalContentComp {
template: `<div class="parent" message="parent"> template: `<div class="parent" message="parent">
<span class="parentnested" message="nestedparent">Parent</span> <span class="parentnested" message="nestedparent">Parent</span>
</div> </div>
<span class="parent" [inner-html]="parentBinding"></span> <span class="parent" [innerHtml]="parentBinding"></span>
<child-comp class="child-comp-class"></child-comp> <child-comp class="child-comp-class"></child-comp>
<cond-content-comp class="cond-content-comp-class"></cond-content-comp>`, <cond-content-comp class="cond-content-comp-class"></cond-content-comp>`,
directives: [ChildComp, MessageDir, ConditionalContentComp], directives: [ChildComp, MessageDir, ConditionalContentComp],
@ -119,9 +119,9 @@ class EventsComp {
@Component({selector: 'using-for', viewProviders: [Logger]}) @Component({selector: 'using-for', viewProviders: [Logger]})
@View({ @View({
template: `<span *ng-for="#thing of stuff" [inner-html]="thing"></span> template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
<ul message="list"> <ul message="list">
<li *ng-for="#item of stuff" [inner-html]="item"></li> <li *ngFor="#item of stuff" [innerHtml]="item"></li>
</ul>`, </ul>`,
directives: [NgFor, MessageDir], directives: [NgFor, MessageDir],
}) })

4
modules/angular2/test/core/forward_ref_integration_spec.ts
View File

@ -48,10 +48,10 @@ export function main() {
class App { class App {
} }
@Component({selector: 'Lock'}) @Component({selector: 'lock'})
@View({ @View({
directives: [NgFor], directives: [NgFor],
template: `{{frame.name}}(<span *ng-for="var lock of locks">{{lock.name}}</span>)`, template: `{{frame.name}}(<span *ngFor="var lock of locks">{{lock.name}}</span>)`,
}) })
class Door { class Door {
locks: QueryList<Lock>; locks: QueryList<Lock>;

2
modules/angular2/test/core/linker/dynamic_component_loader_spec.ts
View File

@ -74,7 +74,7 @@ export function main() {
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter], inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => { (loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({ tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ng-if="ctxBoolProp"></child-cmp>', template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp] directives: [NgIf, ChildComp]
})) }))
.overrideView( .overrideView(

2
modules/angular2/test/core/linker/integration_dart_spec.dart
View File

@ -293,7 +293,7 @@ class OnChangeComponent implements OnChanges {
]) ])
@View( @View(
template: template:
'<span *ng-for="#item of list">{{item}}</span><directive-logging-checks></directive-logging-checks>', '<span *ngFor="#item of list">{{item}}</span><directive-logging-checks></directive-logging-checks>',
directives: const [NgFor, DirectiveLoggingChecks]) directives: const [NgFor, DirectiveLoggingChecks])
class ComponentWithObservableList { class ComponentWithObservableList {
Iterable list; Iterable list;

52
modules/angular2/test/core/linker/integration_spec.ts
View File

@ -239,10 +239,10 @@ export function main() {
}); });
})); }));
it('should consume binding to camel-cased properties using dash-cased syntax in templates', it('should consume binding to camel-cased properties',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, tcb.overrideView(MyComp,
new ViewMetadata({template: '<input [read-only]="ctxBoolProp">'})) new ViewMetadata({template: '<input [readOnly]="ctxBoolProp">'}))
.createAsync(MyComp) .createAsync(MyComp)
.then((fixture) => { .then((fixture) => {
@ -260,10 +260,10 @@ export function main() {
}); });
})); }));
it('should consume binding to inner-html', it('should consume binding to innerHtml',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, tcb.overrideView(MyComp,
new ViewMetadata({template: '<div inner-html="{{ctxProp}}"></div>'})) new ViewMetadata({template: '<div innerHtml="{{ctxProp}}"></div>'}))
.createAsync(MyComp) .createAsync(MyComp)
.then((fixture) => { .then((fixture) => {
@ -503,7 +503,7 @@ export function main() {
tcb.overrideView( tcb.overrideView(
MyComp, new ViewMetadata({ MyComp, new ViewMetadata({
template: template:
'<some-directive><toolbar><template toolbarpart var-toolbar-prop="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></template></toolbar></some-directive>', '<some-directive><toolbar><template toolbarpart var-toolbarProp="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-host></cmp-with-host></template></toolbar></some-directive>',
directives: [SomeDirective, CompWithHost, ToolbarComponent, ToolbarPart] directives: [SomeDirective, CompWithHost, ToolbarComponent, ToolbarPart]
})) }))
.createAsync(MyComp) .createAsync(MyComp)
@ -634,11 +634,11 @@ export function main() {
async.done(); async.done();
})})); })}));
it('should change dash-case to camel-case', it('should preserve case',
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { [TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({ tcb.overrideView(MyComp, new ViewMetadata({
template: '<p><child-cmp var-super-alice></child-cmp></p>', template: '<p><child-cmp var-superAlice></child-cmp></p>',
directives: [ChildComp] directives: [ChildComp]
})) }))
@ -657,7 +657,7 @@ export function main() {
tcb.overrideView( tcb.overrideView(
MyComp, new ViewMetadata({ MyComp, new ViewMetadata({
template: template:
'<template ng-for [ng-for-of]="[1]" var-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</template>', '<template ngFor [ngForOf]="[1]" var-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</template>',
directives: [ChildCompNoTemplate, NgFor] directives: [ChildCompNoTemplate, NgFor]
})) }))
@ -810,7 +810,7 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({ tcb.overrideView(MyComp, new ViewMetadata({
template: ` template: `
<some-directive> <some-directive>
<p *ng-if="true"> <p *ngIf="true">
<cmp-with-host #child></cmp-with-host> <cmp-with-host #child></cmp-with-host>
</p> </p>
</some-directive>`, </some-directive>`,
@ -1041,7 +1041,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView( tcb.overrideView(
MyComp, new ViewMetadata({ MyComp, new ViewMetadata({
template: '<div *ng-if="ctxBoolProp" listener listenerother></div>', template: '<div *ngIf="ctxBoolProp" listener listenerother></div>',
directives: directives:
[NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther] [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
})) }))
@ -1231,7 +1231,7 @@ export function main() {
MyComp, new ViewMetadata({ MyComp, new ViewMetadata({
template: ` template: `
<component-providing-logging-injectable #providing> <component-providing-logging-injectable #providing>
<directive-consuming-injectable *ng-if="ctxBoolProp"> <directive-consuming-injectable *ngIf="ctxBoolProp">
</directive-consuming-injectable> </directive-consuming-injectable>
</component-providing-logging-injectable> </component-providing-logging-injectable>
`, `,
@ -1482,10 +1482,10 @@ export function main() {
})); }));
it('should support moving embedded views around', it('should support moving embedded views around',
inject([TestComponentBuilder, AsyncTestCompleter, ANCHOR_ELEMENT], (tcb, async, inject([TestComponentBuilder, AsyncTestCompleter, ANCHOR_ELEMENT],
anchorElement) => { (tcb, async, anchorElement) => {
tcb.overrideView(MyComp, new ViewMetadata({ tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><div *some-impvp="ctxBoolProp">hello</div></div>', template: '<div><div *someImpvp="ctxBoolProp">hello</div></div>',
directives: [SomeImperativeViewport] directives: [SomeImperativeViewport]
})) }))
.createAsync(MyComp) .createAsync(MyComp)
@ -1658,8 +1658,8 @@ export function main() {
it('should raise an error for missing template directive (2)', it('should raise an error for missing template directive (2)',
inject([TestComponentBuilder, AsyncTestCompleter], inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => { (tcb: TestComponentBuilder, async) => {
expectCompileError(tcb, '<div><template *ng-if="condition"></template></div>', expectCompileError(tcb, '<div><template *ngIf="condition"></template></div>',
'Missing directive to handle: <template *ng-if="condition">', 'Missing directive to handle: <template *ngIf="condition">',
() => async.done()); () => async.done());
})); }));
@ -1667,8 +1667,8 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => { (tcb: TestComponentBuilder, async) => {
expectCompileError( expectCompileError(
tcb, '<div *ng-if="condition"></div>', tcb, '<div *ngIf="condition"></div>',
'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">', 'Missing directive to handle \'if\' in MyComp: <div *ngIf="condition">',
() => async.done()); () => async.done());
})); }));
} }
@ -1679,7 +1679,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView( tcb.overrideView(
MyComp, new ViewMetadata({ MyComp, new ViewMetadata({
template: '<with-prop-decorators el-prop="aaa"></with-prop-decorators>', template: '<with-prop-decorators elProp="aaa"></with-prop-decorators>',
directives: [DirectiveWithPropDecorators] directives: [DirectiveWithPropDecorators]
})) }))
.createAsync(MyComp) .createAsync(MyComp)
@ -1714,11 +1714,11 @@ export function main() {
})); }));
if (DOM.supportsDOMEvents()) { if (DOM.supportsDOMEvents()) {
it('should support events decorators', it('should support event decorators',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
tcb = tcb.overrideView( tcb = tcb.overrideView(
MyComp, new ViewMetadata({ MyComp, new ViewMetadata({
template: `<with-prop-decorators (el-event)="ctxProp='called'">`, template: `<with-prop-decorators (elEvent)="ctxProp='called'">`,
directives: [DirectiveWithPropDecorators] directives: [DirectiveWithPropDecorators]
})); }));
@ -2132,7 +2132,7 @@ class ToolbarPart {
constructor(templateRef: TemplateRef) { this.templateRef = templateRef; } constructor(templateRef: TemplateRef) { this.templateRef = templateRef; }
} }
@Directive({selector: '[toolbar-vc]', inputs: ['toolbarVc']}) @Directive({selector: '[toolbarVc]', inputs: ['toolbarVc']})
@Injectable() @Injectable()
class ToolbarViewContainer { class ToolbarViewContainer {
vc: ViewContainerRef; vc: ViewContainerRef;
@ -2146,7 +2146,7 @@ class ToolbarViewContainer {
@Component({selector: 'toolbar'}) @Component({selector: 'toolbar'})
@View({ @View({
template: 'TOOLBAR(<div *ng-for="var part of query" [toolbar-vc]="part"></div>)', template: 'TOOLBAR(<div *ngFor="var part of query" [toolbarVc]="part"></div>)',
directives: [ToolbarViewContainer, NgFor] directives: [ToolbarViewContainer, NgFor]
}) })
@Injectable() @Injectable()
@ -2299,7 +2299,7 @@ class ChildConsumingEventBus {
constructor(@SkipSelf() bus: EventBus) { this.bus = bus; } constructor(@SkipSelf() bus: EventBus) { this.bus = bus; }
} }
@Directive({selector: '[some-impvp]', inputs: ['someImpvp']}) @Directive({selector: '[someImpvp]', inputs: ['someImpvp']})
@Injectable() @Injectable()
class SomeImperativeViewport { class SomeImperativeViewport {
view: ViewRef; view: ViewRef;
@ -2355,7 +2355,7 @@ class DirectiveThrowingAnError {
@Component({ @Component({
selector: 'component-with-template', selector: 'component-with-template',
directives: [NgFor], directives: [NgFor],
template: `No View Decorator: <div *ng-for="#item of items">{{item}}</div>` template: `No View Decorator: <div *ngFor="#item of items">{{item}}</div>`
}) })
class ComponentWithTemplate { class ComponentWithTemplate {
items = [1, 2, 3]; items = [1, 2, 3];
@ -2365,7 +2365,7 @@ class ComponentWithTemplate {
class DirectiveWithPropDecorators { class DirectiveWithPropDecorators {
target; target;
@Input("elProp") dirProp: string; @Input('elProp') dirProp: string;
@Output('elEvent') event = new EventEmitter(); @Output('elEvent') event = new EventEmitter();
@HostBinding("attr.my-attr") myAttr: string; @HostBinding("attr.my-attr") myAttr: string;

6
modules/angular2/test/core/linker/projection_integration_spec.ts
View File

@ -100,7 +100,7 @@ export function main() {
tcb.overrideView( tcb.overrideView(
Simple, new ViewMetadata({ Simple, new ViewMetadata({
template: template:
'SIMPLE(<div><ng-content></ng-content></div><div [tab-index]="0">EL</div>)', 'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)',
directives: [] directives: []
})) }))
.overrideView( .overrideView(
@ -290,7 +290,7 @@ export function main() {
tcb.overrideView( tcb.overrideView(
MainComp, MainComp,
new ViewMetadata( new ViewMetadata(
{template: '<simple string-prop="text"></simple>', directives: [Simple]})) {template: '<simple stringProp="text"></simple>', directives: [Simple]}))
.overrideTemplate(Simple, '<ng-content></ng-content><p>P,</p>{{stringProp}}') .overrideTemplate(Simple, '<ng-content></ng-content><p>P,</p>{{stringProp}}')
.createAsync(MainComp) .createAsync(MainComp)
.then((main: ComponentFixture) => { .then((main: ComponentFixture) => {
@ -311,7 +311,7 @@ export function main() {
tcb.overrideView( tcb.overrideView(
MainComp, MainComp,
new ViewMetadata( new ViewMetadata(
{template: '<simple string-prop="text"></simple>', directives: [Simple]})) {template: '<simple stringProp="text"></simple>', directives: [Simple]}))
.overrideTemplate(Simple, '<style></style><p>P,</p>{{stringProp}}') .overrideTemplate(Simple, '<style></style><p>P,</p>{{stringProp}}')
.createAsync(MainComp) .createAsync(MainComp)
.then((main: ComponentFixture) => { .then((main: ComponentFixture) => {

51
modules/angular2/test/core/linker/query_integration_spec.ts
View File

@ -84,7 +84,7 @@ export function main() {
it('should contain the first content child', it('should contain the first content child',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<needs-content-child #q><div *ng-if="shouldShow" text="foo"></div></needs-content-child>'; '<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp) .createAsync(MyComp)
@ -178,7 +178,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div text="1"></div>' + '<div text="1"></div>' +
'<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' + '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
'<div text="4"></div>'; '<div text="4"></div>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -201,7 +201,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div text="1"></div>' + '<div text="1"></div>' +
'<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' + '<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
'<div text="4"></div>'; '<div text="4"></div>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -219,7 +219,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div text="1"></div>' + '<div text="1"></div>' +
'<needs-query text="2"><div *ng-for="var i of list" [text]="i"></div></needs-query>' + '<needs-query text="2"><div *ngFor="var i of list" [text]="i"></div></needs-query>' +
'<div text="4"></div>'; '<div text="4"></div>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -264,7 +264,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<needs-query #q>' + var template = '<needs-query #q>' +
'<div text="1"></div>' + '<div text="1"></div>' +
'<div *ng-if="shouldShow" text="2"></div>' + '<div *ngIf="shouldShow" text="2"></div>' +
'</needs-query>'; '</needs-query>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -312,8 +312,7 @@ export function main() {
it('should correctly clean-up when destroyed together with the directives it is querying', it('should correctly clean-up when destroyed together with the directives it is querying',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template = '<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
'<needs-query #q *ng-if="shouldShow"><div text="foo"></div></needs-query>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp) .createAsync(MyComp)
@ -342,9 +341,8 @@ export function main() {
describe("querying by var binding", () => { describe("querying by var binding", () => {
it('should contain all the child directives in the light dom with the given var binding', it('should contain all the child directives in the light dom with the given var binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template = '<needs-query-by-var-binding #q>' +
'<needs-query-by-var-binding #q>' + '<div *ngFor="#item of list" [text]="item" #textLabel="textDir"></div>' +
'<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
'</needs-query-by-var-binding>'; '</needs-query-by-var-binding>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -366,8 +364,8 @@ export function main() {
it('should support querying by multiple var bindings', it('should support querying by multiple var bindings',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<needs-query-by-var-bindings #q>' + var template = '<needs-query-by-var-bindings #q>' +
'<div text="one" #text-label1="textDir"></div>' + '<div text="one" #textLabel1="textDir"></div>' +
'<div text="two" #text-label2="textDir"></div>' + '<div text="two" #textLabel2="textDir"></div>' +
'</needs-query-by-var-bindings>'; '</needs-query-by-var-bindings>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -385,9 +383,8 @@ export function main() {
it('should reflect dynamically inserted directives', it('should reflect dynamically inserted directives',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template = '<needs-query-by-var-binding #q>' +
'<needs-query-by-var-binding #q>' + '<div *ngFor="#item of list" [text]="item" #textLabel="textDir"></div>' +
'<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
'</needs-query-by-var-binding>'; '</needs-query-by-var-binding>';
tcb.overrideTemplate(MyComp, template) tcb.overrideTemplate(MyComp, template)
@ -412,8 +409,8 @@ export function main() {
it('should contain all the elements in the light dom with the given var binding', it('should contain all the elements in the light dom with the given var binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<needs-query-by-var-binding #q>' + var template = '<needs-query-by-var-binding #q>' +
'<div template="ng-for: #item of list">' + '<div template="ngFor: #item of list">' +
'<div #text-label>{{item}}</div>' + '<div #textLabel>{{item}}</div>' +
'</div>' + '</div>' +
'</needs-query-by-var-binding>'; '</needs-query-by-var-binding>';
@ -622,7 +619,7 @@ export function main() {
}); });
})); }));
it('should handle long ng-for cycles', it('should handle long ngFor cycles',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<needs-view-query-order #q></needs-view-query-order>'; var template = '<needs-view-query-order #q></needs-view-query-order>';
@ -716,7 +713,7 @@ class NeedsContentChild implements AfterContentInit, AfterContentChecked {
@Component({selector: 'needs-view-child'}) @Component({selector: 'needs-view-child'})
@View({ @View({
template: ` template: `
<div *ng-if="shouldShow" text="foo"></div> <div *ngIf="shouldShow" text="foo"></div>
`, `,
directives: [NgIf, TextDirective] directives: [NgIf, TextDirective]
}) })
@ -749,7 +746,7 @@ class InertDirective {
@Component({selector: 'needs-query'}) @Component({selector: 'needs-query'})
@View({ @View({
directives: [NgFor, TextDirective], directives: [NgFor, TextDirective],
template: '<div text="ignoreme"></div><b *ng-for="var dir of query">{{dir.text}}|</b>' template: '<div text="ignoreme"></div><b *ngFor="var dir of query">{{dir.text}}|</b>'
}) })
@Injectable() @Injectable()
class NeedsQuery { class NeedsQuery {
@ -767,7 +764,7 @@ class NeedsFourQueries {
} }
@Component({selector: 'needs-query-desc'}) @Component({selector: 'needs-query-desc'})
@View({directives: [NgFor], template: '<div *ng-for="var dir of query">{{dir.text}}|</div>'}) @View({directives: [NgFor], template: '<div *ngFor="var dir of query">{{dir.text}}|</div>'})
@Injectable() @Injectable()
class NeedsQueryDesc { class NeedsQueryDesc {
query: QueryList<TextDirective>; query: QueryList<TextDirective>;
@ -787,7 +784,7 @@ class NeedsQueryByLabel {
} }
@Component({selector: 'needs-view-query-by-var-binding'}) @Component({selector: 'needs-view-query-by-var-binding'})
@View({directives: [], template: '<div #text-label>text</div>'}) @View({directives: [], template: '<div #textLabel>text</div>'})
@Injectable() @Injectable()
class NeedsViewQueryByLabel { class NeedsViewQueryByLabel {
query: QueryList<any>; query: QueryList<any>;
@ -807,7 +804,7 @@ class NeedsQueryByTwoLabels {
@Component({selector: 'needs-query-and-project'}) @Component({selector: 'needs-query-and-project'})
@View({ @View({
directives: [NgFor], directives: [NgFor],
template: '<div *ng-for="var dir of query">{{dir.text}}|</div><ng-content></ng-content>' template: '<div *ngFor="var dir of query">{{dir.text}}|</div><ng-content></ng-content>'
}) })
@Injectable() @Injectable()
class NeedsQueryAndProject { class NeedsQueryAndProject {
@ -828,7 +825,7 @@ class NeedsViewQuery {
} }
@Component({selector: 'needs-view-query-if'}) @Component({selector: 'needs-view-query-if'})
@View({directives: [NgIf, TextDirective], template: '<div *ng-if="show" text="1"></div>'}) @View({directives: [NgIf, TextDirective], template: '<div *ngIf="show" text="1"></div>'})
@Injectable() @Injectable()
class NeedsViewQueryIf { class NeedsViewQueryIf {
show: boolean; show: boolean;
@ -843,7 +840,7 @@ class NeedsViewQueryIf {
@Component({selector: 'needs-view-query-nested-if'}) @Component({selector: 'needs-view-query-nested-if'})
@View({ @View({
directives: [NgIf, InertDirective, TextDirective], directives: [NgIf, InertDirective, TextDirective],
template: '<div text="1"><div *ng-if="show"><div dir></div></div></div>' template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
}) })
@Injectable() @Injectable()
class NeedsViewQueryNestedIf { class NeedsViewQueryNestedIf {
@ -859,7 +856,7 @@ class NeedsViewQueryNestedIf {
@View({ @View({
directives: [NgFor, TextDirective, InertDirective], directives: [NgFor, TextDirective, InertDirective],
template: '<div text="1"></div>' + template: '<div text="1"></div>' +
'<div *ng-for="var i of list" [text]="i"></div>' + '<div *ngFor="var i of list" [text]="i"></div>' +
'<div text="4"></div>' '<div text="4"></div>'
}) })
@Injectable() @Injectable()
@ -876,7 +873,7 @@ class NeedsViewQueryOrder {
@View({ @View({
directives: [NgFor, TextDirective, InertDirective], directives: [NgFor, TextDirective, InertDirective],
template: '<div dir><div text="1"></div>' + template: '<div dir><div text="1"></div>' +
'<div *ng-for="var i of list" [text]="i"></div>' + '<div *ngFor="var i of list" [text]="i"></div>' +
'<div text="4"></div></div>' '<div text="4"></div></div>'
}) })
@Injectable() @Injectable()

4
modules/angular2/test/router/integration/auxiliary_route_spec.ts
View File

@ -78,7 +78,7 @@ export function main() {
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile( compile(
tcb, tcb,
`<a [router-link]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`) `<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}), new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
@ -95,7 +95,7 @@ export function main() {
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile( compile(
tcb, tcb,
`<a [router-link]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`) `<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}), new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),

28
modules/angular2/test/router/integration/impl/async_route_spec_impl.ts
View File

@ -117,7 +117,7 @@ function asyncRoutesWithoutChildrenWithoutParams() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new AsyncRoute({path: '/test', loader: helloCmpLoader, name: 'Hello'})])) [new AsyncRoute({path: '/test', loader: helloCmpLoader, name: 'Hello'})]))
@ -130,7 +130,7 @@ function asyncRoutesWithoutChildrenWithoutParams() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new AsyncRoute({path: '/test', loader: helloCmpLoader, name: 'Hello'})])) [new AsyncRoute({path: '/test', loader: helloCmpLoader, name: 'Hello'})]))
@ -190,7 +190,7 @@ function asyncRoutesWithoutChildrenWithParams() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})])) [new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})]))
@ -203,7 +203,7 @@ function asyncRoutesWithoutChildrenWithParams() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})])) [new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})]))
@ -282,7 +282,7 @@ function asyncRoutesWithSyncChildrenWithoutDefaultRoutes() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new AsyncRoute({path: '/a/...', loader: parentCmpLoader, name: 'Parent'})])) [new AsyncRoute({path: '/a/...', loader: parentCmpLoader, name: 'Parent'})]))
@ -295,7 +295,7 @@ function asyncRoutesWithSyncChildrenWithoutDefaultRoutes() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new AsyncRoute({path: '/a/...', loader: parentCmpLoader, name: 'Parent'})])) [new AsyncRoute({path: '/a/...', loader: parentCmpLoader, name: 'Parent'})]))
@ -358,7 +358,7 @@ function asyncRoutesWithSyncChildrenWithDefaultRoutes() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute({path: '/a/...', loader: parentWithDefaultCmpLoader, name: 'Parent'}) new AsyncRoute({path: '/a/...', loader: parentWithDefaultCmpLoader, name: 'Parent'})
@ -372,7 +372,7 @@ function asyncRoutesWithSyncChildrenWithDefaultRoutes() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute({path: '/a/...', loader: parentWithDefaultCmpLoader, name: 'Parent'}) new AsyncRoute({path: '/a/...', loader: parentWithDefaultCmpLoader, name: 'Parent'})
@ -436,7 +436,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithoutDefaultRoutes() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {rootTC = rtc}) .then((rtc) => {rootTC = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute({path: '/a/...', loader: asyncParentCmpLoader, name: 'Parent'}) new AsyncRoute({path: '/a/...', loader: asyncParentCmpLoader, name: 'Parent'})
@ -450,7 +450,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithoutDefaultRoutes() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {rootTC = rtc}) .then((rtc) => {rootTC = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute({path: '/a/...', loader: asyncParentCmpLoader, name: 'Parent'}) new AsyncRoute({path: '/a/...', loader: asyncParentCmpLoader, name: 'Parent'})
@ -516,7 +516,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithDefaultRoutes() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {rootTC = rtc}) .then((rtc) => {rootTC = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute( new AsyncRoute(
@ -531,7 +531,7 @@ function asyncRoutesWithAsyncChildrenWithoutParamsWithDefaultRoutes() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {rootTC = rtc}) .then((rtc) => {rootTC = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute( new AsyncRoute(
@ -600,7 +600,7 @@ function asyncRoutesWithAsyncChildrenWithParamsWithoutDefaultRoutes() {
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile( compile(
tcb, tcb,
`<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`) `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute({path: '/team/:id/...', loader: asyncTeamLoader, name: 'Team'}) new AsyncRoute({path: '/team/:id/...', loader: asyncTeamLoader, name: 'Team'})
@ -616,7 +616,7 @@ function asyncRoutesWithAsyncChildrenWithParamsWithoutDefaultRoutes() {
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile( compile(
tcb, tcb,
`<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`) `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config([ .then((_) => rtr.config([
new AsyncRoute({path: '/team/:id/...', loader: asyncTeamLoader, name: 'Team'}) new AsyncRoute({path: '/team/:id/...', loader: asyncTeamLoader, name: 'Team'})

20
modules/angular2/test/router/integration/impl/sync_route_spec_impl.ts
View File

@ -62,7 +62,7 @@ function syncRoutesWithoutChildrenWithoutParams() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => .then((_) =>
rtr.config([new Route({path: '/test', component: HelloCmp, name: 'Hello'})])) rtr.config([new Route({path: '/test', component: HelloCmp, name: 'Hello'})]))
@ -75,7 +75,7 @@ function syncRoutesWithoutChildrenWithoutParams() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['Hello']">go to hello</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => .then((_) =>
rtr.config([new Route({path: '/test', component: HelloCmp, name: 'Hello'})])) rtr.config([new Route({path: '/test', component: HelloCmp, name: 'Hello'})]))
@ -135,7 +135,7 @@ function syncRoutesWithoutChildrenWithParams() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new Route({path: '/user/:name', component: UserCmp, name: 'User'})])) [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
@ -148,7 +148,7 @@ function syncRoutesWithoutChildrenWithParams() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`) compile(tcb, `<a [routerLink]="['User', {name: 'naomi'}]">greet naomi</a> | <router-outlet></router-outlet>`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new Route({path: '/user/:name', component: UserCmp, name: 'User'})])) [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
@ -227,7 +227,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithoutParams() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new Route({path: '/a/...', component: ParentCmp, name: 'Parent'})])) [new Route({path: '/a/...', component: ParentCmp, name: 'Parent'})]))
@ -240,7 +240,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithoutParams() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['Parent', 'Child']">nav to child</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new Route({path: '/a/...', component: ParentCmp, name: 'Parent'})])) [new Route({path: '/a/...', component: ParentCmp, name: 'Parent'})]))
@ -305,7 +305,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithParams() {
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile( compile(
tcb, tcb,
`<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`) `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new Route({path: '/team/:id/...', component: TeamCmp, name: 'Team'})])) [new Route({path: '/team/:id/...', component: TeamCmp, name: 'Team'})]))
@ -320,7 +320,7 @@ function syncRoutesWithSyncChildrenWithoutDefaultRoutesWithParams() {
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile( compile(
tcb, tcb,
`<a [router-link]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`) `<a [routerLink]="['/Team', {id: 'angular'}, 'User', {name: 'matias'}]">nav to matias</a> { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then((_) => rtr.config( .then((_) => rtr.config(
[new Route({path: '/team/:id/...', component: TeamCmp, name: 'Team'})])) [new Route({path: '/team/:id/...', component: TeamCmp, name: 'Team'})]))
@ -383,7 +383,7 @@ function syncRoutesWithSyncChildrenWithDefaultRoutesWithoutParams() {
})); }));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => { it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then( .then(
(_) => rtr.config( (_) => rtr.config(
@ -397,7 +397,7 @@ function syncRoutesWithSyncChildrenWithDefaultRoutesWithoutParams() {
it('should navigate from a link click', it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => { inject([AsyncTestCompleter, Location], (async, location) => {
compile(tcb, `<a [router-link]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`) compile(tcb, `<a [routerLink]="['/Parent']">link to inner</a> | outer { <router-outlet></router-outlet> }`)
.then((rtc) => {fixture = rtc}) .then((rtc) => {fixture = rtc})
.then( .then(
(_) => rtr.config( (_) => rtr.config(

38
modules/angular2/test/router/integration/router_link_spec.ts
View File

@ -45,7 +45,7 @@ import {TEMPLATE_TRANSFORMS} from 'angular2/compiler';
import {RouterLinkTransform} from 'angular2/src/router/router_link_transform'; import {RouterLinkTransform} from 'angular2/src/router/router_link_transform';
export function main() { export function main() {
describe('router-link directive', function() { describe('routerLink directive', function() {
var tcb: TestComponentBuilder; var tcb: TestComponentBuilder;
var fixture: ComponentFixture; var fixture: ComponentFixture;
var router, location; var router, location;
@ -77,7 +77,7 @@ export function main() {
it('should generate absolute hrefs that include the base href', it('should generate absolute hrefs that include the base href',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
location.setBaseHref('/my/base'); location.setBaseHref('/my/base');
compile('<a href="hello" [router-link]="[\'./User\']"></a>') compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
.then((_) => router.config( .then((_) => router.config(
[new Route({path: '/user', component: UserCmp, name: 'User'})])) [new Route({path: '/user', component: UserCmp, name: 'User'})]))
.then((_) => router.navigateByUrl('/a/b')) .then((_) => router.navigateByUrl('/a/b'))
@ -90,7 +90,7 @@ export function main() {
it('should generate link hrefs without params', inject([AsyncTestCompleter], (async) => { it('should generate link hrefs without params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" [router-link]="[\'./User\']"></a>') compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
.then((_) => router.config( .then((_) => router.config(
[new Route({path: '/user', component: UserCmp, name: 'User'})])) [new Route({path: '/user', component: UserCmp, name: 'User'})]))
.then((_) => router.navigateByUrl('/a/b')) .then((_) => router.navigateByUrl('/a/b'))
@ -103,7 +103,7 @@ export function main() {
it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => { it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" [router-link]="[\'./User\', {name: name}]">{{name}}</a>') compile('<a href="hello" [routerLink]="[\'./User\', {name: name}]">{{name}}</a>')
.then((_) => router.config( .then((_) => router.config(
[new Route({path: '/user/:name', component: UserCmp, name: 'User'})])) [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
.then((_) => router.navigateByUrl('/a/b')) .then((_) => router.navigateByUrl('/a/b'))
@ -257,8 +257,8 @@ export function main() {
new Route({path: '/child', component: HelloCmp, name: 'Child'}), new Route({path: '/child', component: HelloCmp, name: 'Child'}),
new Route({path: '/better-child', component: Hello2Cmp, name: 'BetterChild'}) new Route({path: '/better-child', component: Hello2Cmp, name: 'BetterChild'})
]) ])
.then((_) => compile(`<a [router-link]="['./Child']" class="child-link">Child</a> .then((_) => compile(`<a [routerLink]="['./Child']" class="child-link">Child</a>
<a [router-link]="['./BetterChild']" class="better-child-link">Better Child</a> <a [routerLink]="['./BetterChild']" class="better-child-link">Better Child</a>
<router-outlet></router-outlet>`)) <router-outlet></router-outlet>`))
.then((_) => { .then((_) => {
var element = fixture.debugElement.nativeElement; var element = fixture.debugElement.nativeElement;
@ -292,8 +292,8 @@ export function main() {
name: 'ChildWithGrandchild' name: 'ChildWithGrandchild'
}) })
]) ])
.then((_) => compile(`<a [router-link]="['./Child']" class="child-link">Child</a> .then((_) => compile(`<a [routerLink]="['./Child']" class="child-link">Child</a>
<a [router-link]="['./ChildWithGrandchild/Grandchild']" class="child-with-grandchild-link">Better Child</a> <a [routerLink]="['./ChildWithGrandchild/Grandchild']" class="child-with-grandchild-link">Better Child</a>
<router-outlet></router-outlet>`)) <router-outlet></router-outlet>`))
.then((_) => { .then((_) => {
var element = fixture.debugElement.nativeElement; var element = fixture.debugElement.nativeElement;
@ -327,7 +327,7 @@ export function main() {
describe("router link dsl", () => { describe("router link dsl", () => {
it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => { it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" [router-link]="route:./User(name: name)">{{name}}</a>') compile('<a href="hello" [routerLink]="route:./User(name: name)">{{name}}</a>')
.then((_) => router.config( .then((_) => router.config(
[new Route({path: '/user/:name', component: UserCmp, name: 'User'})])) [new Route({path: '/user/:name', component: UserCmp, name: 'User'})]))
.then((_) => router.navigateByUrl('/a/b')) .then((_) => router.navigateByUrl('/a/b'))
@ -354,7 +354,7 @@ export function main() {
}; };
it('should navigate to link hrefs without params', inject([AsyncTestCompleter], (async) => { it('should navigate to link hrefs without params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" [router-link]="[\'./User\']"></a>') compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
.then((_) => router.config( .then((_) => router.config(
[new Route({path: '/user', component: UserCmp, name: 'User'})])) [new Route({path: '/user', component: UserCmp, name: 'User'})]))
.then((_) => router.navigateByUrl('/a/b')) .then((_) => router.navigateByUrl('/a/b'))
@ -375,7 +375,7 @@ export function main() {
it('should navigate to link hrefs in presence of base href', it('should navigate to link hrefs in presence of base href',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
location.setBaseHref('/base'); location.setBaseHref('/base');
compile('<a href="hello" [router-link]="[\'./User\']"></a>') compile('<a href="hello" [routerLink]="[\'./User\']"></a>')
.then((_) => router.config( .then((_) => router.config(
[new Route({path: '/user', component: UserCmp, name: 'User'})])) [new Route({path: '/user', component: UserCmp, name: 'User'})]))
.then((_) => router.navigateByUrl('/a/b')) .then((_) => router.navigateByUrl('/a/b'))
@ -415,7 +415,7 @@ class UserCmp {
@Component({ @Component({
selector: 'page-cmp', selector: 'page-cmp',
template: template:
`page #{{pageNumber}} | <a href="hello" [router-link]="[\'../Page\', {number: nextPage}]">next</a>`, `page #{{pageNumber}} | <a href="hello" [routerLink]="[\'../Page\', {number: nextPage}]">next</a>`,
directives: [RouterLink] directives: [RouterLink]
}) })
class SiblingPageCmp { class SiblingPageCmp {
@ -430,7 +430,7 @@ class SiblingPageCmp {
@Component({ @Component({
selector: 'page-cmp', selector: 'page-cmp',
template: template:
`page #{{pageNumber}} | <a href="hello" [router-link]="[\'Page\', {number: nextPage}]">next</a>`, `page #{{pageNumber}} | <a href="hello" [routerLink]="[\'Page\', {number: nextPage}]">next</a>`,
directives: [RouterLink] directives: [RouterLink]
}) })
class NoPrefixSiblingPageCmp { class NoPrefixSiblingPageCmp {
@ -456,8 +456,8 @@ function parentCmpLoader() {
@Component({ @Component({
selector: 'parent-cmp', selector: 'parent-cmp',
template: `{ <a [router-link]="['./Grandchild']" class="grandchild-link">Grandchild</a> template: `{ <a [routerLink]="['./Grandchild']" class="grandchild-link">Grandchild</a>
<a [router-link]="['./BetterGrandchild']" class="better-grandchild-link">Better Grandchild</a> <a [routerLink]="['./BetterGrandchild']" class="better-grandchild-link">Better Grandchild</a>
<router-outlet></router-outlet> }`, <router-outlet></router-outlet> }`,
directives: ROUTER_DIRECTIVES directives: ROUTER_DIRECTIVES
}) })
@ -470,7 +470,7 @@ class ParentCmp {
@Component({ @Component({
selector: 'book-cmp', selector: 'book-cmp',
template: `<a href="hello" [router-link]="[\'./Page\', {number: 100}]">{{title}}</a> | template: `<a href="hello" [routerLink]="[\'./Page\', {number: 100}]">{{title}}</a> |
<router-outlet></router-outlet>`, <router-outlet></router-outlet>`,
directives: ROUTER_DIRECTIVES directives: ROUTER_DIRECTIVES
}) })
@ -482,7 +482,7 @@ class BookCmp {
@Component({ @Component({
selector: 'book-cmp', selector: 'book-cmp',
template: `<a href="hello" [router-link]="[\'Page\', {number: 100}]">{{title}}</a> | template: `<a href="hello" [routerLink]="[\'Page\', {number: 100}]">{{title}}</a> |
<router-outlet></router-outlet>`, <router-outlet></router-outlet>`,
directives: ROUTER_DIRECTIVES directives: ROUTER_DIRECTIVES
}) })
@ -494,7 +494,7 @@ class NoPrefixBookCmp {
@Component({ @Component({
selector: 'book-cmp', selector: 'book-cmp',
template: `<a href="hello" [router-link]="[\'Book\', {number: 100}]">{{title}}</a> | template: `<a href="hello" [routerLink]="[\'Book\', {number: 100}]">{{title}}</a> |
<router-outlet></router-outlet>`, <router-outlet></router-outlet>`,
directives: ROUTER_DIRECTIVES directives: ROUTER_DIRECTIVES
}) })
@ -507,7 +507,7 @@ class AmbiguousBookCmp {
@Component({ @Component({
selector: 'aux-cmp', selector: 'aux-cmp',
template: template:
`<a [router-link]="[\'./Hello\', [ \'Aside\' ] ]">aside</a> | `<a [routerLink]="[\'./Hello\', [ \'Aside\' ] ]">aside</a> |
<router-outlet></router-outlet> | aside <router-outlet name="aside"></router-outlet>`, <router-outlet></router-outlet> | aside <router-outlet name="aside"></router-outlet>`,
directives: ROUTER_DIRECTIVES directives: ROUTER_DIRECTIVES
}) })

8
modules/angular2/test/router/router_link_spec.ts
View File

@ -37,7 +37,7 @@ let dummyInstruction =
new ResolvedInstruction(new ComponentInstruction('detail', [], null, null, true, 0), null, {}); new ResolvedInstruction(new ComponentInstruction('detail', [], null, null, true, 0), null, {});
export function main() { export function main() {
describe('router-link directive', function() { describe('routerLink directive', function() {
var tcb: TestComponentBuilder; var tcb: TestComponentBuilder;
beforeEachProviders(() => [ beforeEachProviders(() => [
@ -113,16 +113,16 @@ class UserCmp {
@View({ @View({
template: ` template: `
<div> <div>
<a [router-link]="['/Detail']" <a [routerLink]="['/Detail']"
class="detail-view"> class="detail-view">
detail view detail view
</a> </a>
<a [router-link]="['/Detail']" <a [routerLink]="['/Detail']"
class="detail-view-self" class="detail-view-self"
target="_self"> target="_self">
detail view with _self target detail view with _self target
</a> </a>
<a [router-link]="['/Detail']" <a [routerLink]="['/Detail']"
class="detail-view-blank" class="detail-view-blank"
target="_blank"> target="_blank">
detail view with _blank target detail view with _blank target

2
modules/angular2/test/testing/test_component_builder_spec.ts
View File

@ -39,7 +39,7 @@ class ParentComp {
} }
@Component({selector: 'my-if-comp'}) @Component({selector: 'my-if-comp'})
@View({template: `MyIf(<span *ng-if="showMore">More</span>)`, directives: [NgIf]}) @View({template: `MyIf(<span *ngIf="showMore">More</span>)`, directives: [NgIf]})
@Injectable() @Injectable()
class MyIfComp { class MyIfComp {
showMore: boolean = false; showMore: boolean = false;

2
modules/angular2/test/testing/testing_public_spec.ts
View File

@ -43,7 +43,7 @@ class ParentComp {
} }
@Component({selector: 'my-if-comp'}) @Component({selector: 'my-if-comp'})
@View({template: `MyIf(<span *ng-if="showMore">More</span>)`, directives: [NgIf]}) @View({template: `MyIf(<span *ngIf="showMore">More</span>)`, directives: [NgIf]})
@Injectable() @Injectable()
class MyIfComp { class MyIfComp {
showMore: boolean = false; showMore: boolean = false;

4
modules/angular2/test/upgrade/upgrade_spec.ts
View File

@ -251,9 +251,9 @@ export function main() {
Component({ Component({
selector: 'ng2', selector: 'ng2',
template: template:
'<ng1 full-name="{{last}}, {{first}}" [model-a]="first" [(model-b)]="last" ' + '<ng1 fullName="{{last}}, {{first}}" [modelA]="first" [(modelB)]="last" ' +
'(event)="event=$event"></ng1>' + '(event)="event=$event"></ng1>' +
'<ng1 full-name="{{\'TEST\'}}" model-a="First" model-b="Last"></ng1>' + '<ng1 fullName="{{\'TEST\'}}" modelA="First" modelB="Last"></ng1>' +
'{{event}}-{{last}}, {{first}}', '{{event}}-{{last}}, {{first}}',
directives: [adapter.upgradeNg1Component('ng1')] directives: [adapter.upgradeNg1Component('ng1')]
}) })

6
modules/angular2/test/web_workers/worker/renderer_integration_spec.ts
View File

@ -170,8 +170,8 @@ export function main() {
renderer.setElementStyle(elr, 'width', null); renderer.setElementStyle(elr, 'width', null);
expect(DOM.getStyle(el, 'width')).toEqual(''); expect(DOM.getStyle(el, 'width')).toEqual('');
renderer.setElementAttribute(elr, 'someAttr', 'someValue'); renderer.setElementAttribute(elr, 'someattr', 'someValue');
expect(DOM.getAttribute(el, 'some-attr')).toEqual('someValue'); expect(DOM.getAttribute(el, 'someattr')).toEqual('someValue');
}; };
// root element // root element
@ -186,7 +186,7 @@ export function main() {
it('should add and remove fragments', it('should add and remove fragments',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({ tcb.overrideView(MyComp, new ViewMetadata({
template: '<template [ng-if]="ctxBoolProp">hello</template>', template: '<template [ngIf]="ctxBoolProp">hello</template>',
directives: [NgIf] directives: [NgIf]
})) }))
.createAsync(MyComp) .createAsync(MyComp)

8
modules/angular2_material/src/components/button/button.scss
View File

@ -150,18 +150,18 @@ $md-fab-mini-line-height: rem(4.00) !default;
} }
[md-button] { [mdButton] {
@include md-button-base(); @include md-button-base();
} }
[md-raised-button] { [mdRaisedButton] {
@include md-raised-button(); @include md-raised-button();
color: md-color($md-background, default-contrast); color: md-color($md-background, default-contrast);
background-color: md-color($md-background, 50); background-color: md-color($md-background, 50);
} }
[md-fab] { [mdFab] {
@include md-raised-button(); @include md-raised-button();
z-index: $z-index-fab; z-index: $z-index-fab;
@ -183,7 +183,7 @@ $md-fab-mini-line-height: rem(4.00) !default;
// Styles for high contrast mode. // Styles for high contrast mode.
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
[md-raised], [md-raised],
[md-fab] { [mdFab] {
border: 1px solid #fff; border: 1px solid #fff;
} }
} }

4
modules/angular2_material/src/components/button/button.ts
View File

@ -8,7 +8,7 @@ import {isPresent} from 'angular2/src/facade/lang';
// TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener. // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
@Component({ @Component({
selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)', selector: '[mdButton]:not(a), [mdFab]:not(a), [mdRaisedButton]:not(a)',
host: { host: {
'(mousedown)': 'onMousedown()', '(mousedown)': 'onMousedown()',
'(focus)': 'onFocus()', '(focus)': 'onFocus()',
@ -48,7 +48,7 @@ export class MdButton {
@Component({ @Component({
selector: 'a[md-button], a[md-raised-button], a[md-fab]', selector: 'a[mdButton], a[mdRaisedButton], a[mdFab]',
inputs: ['disabled'], inputs: ['disabled'],
host: { host: {
'(click)': 'onClick($event)', '(click)': 'onClick($event)',

8
modules/angular2_material/test/button_spec.ts
View File

@ -34,7 +34,7 @@ export function main() {
beforeEach(inject([TestComponentBuilder], (tcb) => { builder = tcb; })); beforeEach(inject([TestComponentBuilder], (tcb) => { builder = tcb; }));
describe('button[md-button]', () => { describe('button[mdButton]', () => {
it('should handle a click on the button', inject([AsyncTestCompleter], (async) => { it('should handle a click on the button', inject([AsyncTestCompleter], (async) => {
builder.createAsync(TestApp).then(fixture => { builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance; let testComponent = fixture.debugElement.componentInstance;
@ -71,8 +71,8 @@ export function main() {
}), 10000); }), 10000);
}); });
describe('a[md-button]', () => { describe('a[mdButton]', () => {
const anchorTemplate = `<a md-button href="http://google.com" [disabled]="isDisabled">Go</a>`; const anchorTemplate = `<a mdButton href="http://google.com" [disabled]="isDisabled">Go</a>`;
beforeEach(() => { beforeEach(() => {
builder = builder.overrideView( builder = builder.overrideView(
@ -118,7 +118,7 @@ function getChildDebugElement(parent: DebugElement, tagName: string): DebugEleme
@View({ @View({
directives: [MdButton], directives: [MdButton],
template: template:
`<button md-button type="button" (click)="increment()" [disabled]="isDisabled">Go</button>` `<button mdButton type="button" (click)="increment()" [disabled]="isDisabled">Go</button>`
}) })
class TestApp { class TestApp {
clickCount: number = 0; clickCount: number = 0;

12
modules/benchmarks/src/costs/index.ts
View File

@ -63,16 +63,16 @@ class DynamicDummy {
@View({ @View({
directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy], directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy],
template: ` template: `
<div *ng-if="testingPlainComponents"> <div *ngIf="testingPlainComponents">
<dummy *ng-for="#i of list"></dummy> <dummy *ngFor="#i of list"></dummy>
</div> </div>
<div *ng-if="testingWithDirectives"> <div *ngIf="testingWithDirectives">
<dummy dummy-decorator *ng-for="#i of list"></dummy> <dummy dummy-decorator *ngFor="#i of list"></dummy>
</div> </div>
<div *ng-if="testingDynamicComponents"> <div *ngIf="testingDynamicComponents">
<dynamic-dummy *ng-for="#i of list"></dynamic-dummy> <dynamic-dummy *ngFor="#i of list"></dynamic-dummy>
</div> </div>
` `
}) })

24
modules/benchmarks/src/largetable/largetable_benchmark.ts
View File

@ -214,29 +214,29 @@ class CellData {
@View({ @View({
directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault], directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],
template: ` template: `
<table [ng-switch]="benchmarkType"> <table [ngSwitch]="benchmarkType">
<tbody template="ng-switch-when 'interpolation'"> <tbody template="ngSwitchWhen 'interpolation'">
<tr template="ng-for #row of data"> <tr template="ngFor #row of data">
<td template="ng-for #column of row"> <td template="ngFor #column of row">
{{column.i}}:{{column.j}}| {{column.i}}:{{column.j}}|
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody template="ng-switch-when 'interpolationAttr'"> <tbody template="ngSwitchWhen 'interpolationAttr'">
<tr template="ng-for #row of data"> <tr template="ngFor #row of data">
<td template="ng-for #column of row" attr.i="{{column.i}}" attr.j="{{column.j}}"> <td template="ngFor #column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
i,j attrs i,j attrs
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody template="ng-switch-when 'interpolationFn'"> <tbody template="ngSwitchWhen 'interpolationFn'">
<tr template="ng-for #row of data"> <tr template="ngFor #row of data">
<td template="ng-for #column of row"> <td template="ngFor #column of row">
{{column.iFn()}}:{{column.jFn()}}| {{column.iFn()}}:{{column.jFn()}}|
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody template="ng-switch-default"> <tbody template="ngSwitchDefault">
<tr> <tr>
<td> <td>
<em>{{benchmarkType}} not yet implemented</em> <em>{{benchmarkType}} not yet implemented</em>
@ -261,7 +261,7 @@ class LargetableComponent {
@Component({selector: 'app'}) @Component({selector: 'app'})
@View({ @View({
directives: [LargetableComponent], directives: [LargetableComponent],
template: `<largetable [data]='data' [benchmark-type]='benchmarkType'></largetable>` template: `<largetable [data]='data' [benchmarkType]='benchmarkType'></largetable>`
}) })
class AppComponent { class AppComponent {
data; data;

4
modules/benchmarks/src/naive_infinite_scroll/app.ts
View File

@ -17,9 +17,9 @@ import {Component, Directive, View} from 'angular2/angular2';
<div style="display: flex"> <div style="display: flex">
<scroll-area id="testArea"></scroll-area> <scroll-area id="testArea"></scroll-area>
</div> </div>
<div template="ng-if scrollAreas.length > 0"> <div template="ngIf scrollAreas.length > 0">
<p>Following tables are only here to add weight to the UI:</p> <p>Following tables are only here to add weight to the UI:</p>
<scroll-area template="ng-for #scrollArea of scrollAreas"></scroll-area> <scroll-area template="ngFor #scrollArea of scrollAreas"></scroll-area>
</div> </div>
</div>` </div>`
}) })

2
modules/benchmarks/src/naive_infinite_scroll/cells.ts
View File

@ -42,7 +42,7 @@ export class Stage {
directives: [NgFor], directives: [NgFor],
template: ` template: `
<div [style.width.px]="cellWidth"> <div [style.width.px]="cellWidth">
<button template="ng-for #stage of stages" <button template="ngFor #stage of stages"
[disabled]="stage.isDisabled" [disabled]="stage.isDisabled"
[style.background-color]="stage.backgroundColor" [style.background-color]="stage.backgroundColor"
on-click="setStage(stage)"> on-click="setStage(stage)">

2
modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts
View File

@ -30,7 +30,7 @@ import {NgFor} from 'angular2/common';
<div id="padding"></div> <div id="padding"></div>
<div id="inner"> <div id="inner">
<scroll-item <scroll-item
template="ng-for #item of visibleItems" template="ngFor #item of visibleItems"
[offering]="item"> [offering]="item">
</scroll-item> </scroll-item>
</div> </div>

2
modules/benchmarks/src/static_tree/tree_benchmark.ts
View File

@ -308,7 +308,7 @@ class StaticTreeComponent9 extends StaticTreeComponentBase {
@Component({selector: 'app'}) @Component({selector: 'app'})
@View({ @View({
directives: [StaticTreeComponent9, NgIf], directives: [StaticTreeComponent9, NgIf],
template: `<tree *ng-if="initData != null" [data]='initData'></tree>` template: `<tree *ngIf="initData != null" [data]='initData'></tree>`
}) })
class AppComponentWithStaticTree { class AppComponentWithStaticTree {
initData: TreeNode; initData: TreeNode;

2
modules/benchmarks/src/tree/tree_benchmark.ts
View File

@ -223,7 +223,7 @@ class BaseLineIf {
@View({ @View({
directives: [TreeComponent, NgIf], directives: [TreeComponent, NgIf],
template: template:
`<span> {{data.value}} <span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>` `<span> {{data.value}} <span template='ngIf data.right != null'><tree [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree [data]='data.left'></tree></span></span>`
}) })
class TreeComponent { class TreeComponent {
data: TreeNode; data: TreeNode;

2
modules/playground/e2e_test/material/button_spec.ts
View File

@ -1,6 +1,6 @@
import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util'; import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
describe('md-button', function() { describe('mdButton', function() {
var url = 'playground/src/material/button/index.html'; var url = 'playground/src/material/button/index.html';
beforeEach(() => { browser.get(url); }); beforeEach(() => { browser.get(url); });

2
modules/playground/src/animate/animate-app.ts
View File

@ -5,7 +5,7 @@ import {Component, View, NgIf} from 'angular2/angular2';
directives: [NgIf], directives: [NgIf],
template: ` template: `
<h1>The box is {{visible ? 'visible' : 'hidden'}}</h1> <h1>The box is {{visible ? 'visible' : 'hidden'}}</h1>
<div class="ng-animate box" *ng-if="visible"></div> <div class="ng-animate box" *ngIf="visible"></div>
<button (click)="visible = !visible">Animate</button> <button (click)="visible = !visible">Animate</button>
` `
}) })

6
modules/playground/src/async/index.ts
View File

@ -13,17 +13,17 @@ import {TimerWrapper} from 'angular2/src/facade/async';
<div id='delayedIncrement'> <div id='delayedIncrement'>
<span class='val'>{{val2}}</span> <span class='val'>{{val2}}</span>
<button class='action' (click)="delayedIncrement()">Delayed Increment</button> <button class='action' (click)="delayedIncrement()">Delayed Increment</button>
<button class='cancel' *ng-if="timeoutId != null" (click)="cancelDelayedIncrement()">Cancel</button> <button class='cancel' *ngIf="timeoutId != null" (click)="cancelDelayedIncrement()">Cancel</button>
</div> </div>
<div id='multiDelayedIncrements'> <div id='multiDelayedIncrements'>
<span class='val'>{{val3}}</span> <span class='val'>{{val3}}</span>
<button class='action' (click)="multiDelayedIncrements(10)">10 Delayed Increments</button> <button class='action' (click)="multiDelayedIncrements(10)">10 Delayed Increments</button>
<button class='cancel' *ng-if="multiTimeoutId != null" (click)="cancelMultiDelayedIncrements()">Cancel</button> <button class='cancel' *ngIf="multiTimeoutId != null" (click)="cancelMultiDelayedIncrements()">Cancel</button>
</div> </div>
<div id='periodicIncrement'> <div id='periodicIncrement'>
<span class='val'>{{val4}}</span> <span class='val'>{{val4}}</span>
<button class='action' (click)="periodicIncrement()">Periodic Increment</button> <button class='action' (click)="periodicIncrement()">Periodic Increment</button>
<button class='cancel' *ng-if="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button> <button class='cancel' *ngIf="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button>
</div> </div>
`, `,
directives: [NgIf] directives: [NgIf]

4
modules/playground/src/hash_routing/index.ts
View File

@ -28,8 +28,8 @@ class GoodByeCmp {
<h1>My App</h1> <h1>My App</h1>
<nav> <nav>
<a href="#/" id="hello-link">Navigate via href</a> | <a href="#/" id="hello-link">Navigate via href</a> |
<a [router-link]="['/GoodbyeCmp']" id="goodbye-link">Navigate with Link DSL</a> <a [routerLink]="['/GoodbyeCmp']" id="goodbye-link">Navigate with Link DSL</a>
<a [router-link]="['/GoodbyeCmp']" id="goodbye-link-blank" target="_blank"> <a [routerLink]="['/GoodbyeCmp']" id="goodbye-link-blank" target="_blank">
Navigate with Link DSL _blank target Navigate with Link DSL _blank target
</a> </a>
</nav> </nav>

2
modules/playground/src/http/http_comp.ts
View File

@ -8,7 +8,7 @@ import 'rxjs/add/operator/map';
template: ` template: `
<h1>people</h1> <h1>people</h1>
<ul class="people"> <ul class="people">
<li *ng-for="#person of people"> <li *ngFor="#person of people">
hello, {{person['name']}} hello, {{person['name']}}
</li> </li>
</ul> </ul>

2
modules/playground/src/jsonp/jsonp_comp.ts
View File

@ -8,7 +8,7 @@ import {ObservableWrapper} from 'angular2/src/facade/async';
template: ` template: `
<h1>people</h1> <h1>people</h1>
<ul class="people"> <ul class="people">
<li *ng-for="#person of people"> <li *ngFor="#person of people">
hello, {{person['name']}} hello, {{person['name']}}
</li> </li>
</ul> </ul>

50
modules/playground/src/material/button/demo_app.html
View File

@ -35,7 +35,7 @@
<section> <section>
<form (submit)="submit('form submit')"> <form (submit)="submit('form submit')">
<button md-button>SUBMIT</button> <button mdButton>SUBMIT</button>
<button>Native button</button> <button>Native button</button>
</form> </form>
@ -45,44 +45,44 @@
<section> <section>
<span class="label">Regular button</span> <span class="label">Regular button</span>
<button md-button (click)="click('button')">BUTTON</button> <button mdButton (click)="click('button')">BUTTON</button>
<button md-button class="md-primary" (click)="click('primary')">PRIMARY</button> <button mdButton class="md-primary" (click)="click('primary')">PRIMARY</button>
<button md-button disabled="disabled" (click)="click('disabled')">DISABLED</button> <button mdButton disabled="disabled" (click)="click('disabled')">DISABLED</button>
<button md-button class="md-accent" (click)="click('accent')">ACCENT</button> <button mdButton class="md-accent" (click)="click('accent')">ACCENT</button>
<button md-button class="md-warn" (click)="click('warn')">WARN</button> <button mdButton class="md-warn" (click)="click('warn')">WARN</button>
<button md-button class="custom" (click)="click('custom')">CUSTOM</button> <button mdButton class="custom" (click)="click('custom')">CUSTOM</button>
</section> </section>
<section> <section>
<span class="label">Raised button</span> <span class="label">Raised button</span>
<button md-raised-button (click)="click('raised')">BUTTON</button> <button mdRaisedButton (click)="click('raised')">BUTTON</button>
<button md-raised-button class="md-primary" (click)="click('raised primary')">PRIMARY</button> <button mdRaisedButton class="md-primary" (click)="click('raised primary')">PRIMARY</button>
<button md-raised-button disabled="disabled" (click)="click('raised disabled')">DISABLED</button> <button mdRaisedButton disabled="disabled" (click)="click('raised disabled')">DISABLED</button>
<button md-raised-button class="md-accent" (click)="click('raised accent')">ACCENT</button> <button mdRaisedButton class="md-accent" (click)="click('raised accent')">ACCENT</button>
<button md-raised-button class="md-warn" (click)="click('raised warn')">WARN</button> <button mdRaisedButton class="md-warn" (click)="click('raised warn')">WARN</button>
<button md-raised-button class="custom" (click)="click('custom raised')">CUSTOM</button> <button mdRaisedButton class="custom" (click)="click('custom raised')">CUSTOM</button>
</section> </section>
<section> <section>
<span class="label">Fab button</span> <span class="label">Fab button</span>
<button md-fab (click)="click('fab')">BTN</button> <button mdFab (click)="click('fab')">BTN</button>
<button md-fab class="md-primary" (click)="click('fab primary')">PRMY</button> <button mdFab class="md-primary" (click)="click('fab primary')">PRMY</button>
<button md-fab disabled="disabled" (click)="click('fab disabled')">DIS</button> <button mdFab disabled="disabled" (click)="click('fab disabled')">DIS</button>
<button md-fab class="md-accent" (click)="click('fab accent')">ACC</button> <button mdFab class="md-accent" (click)="click('fab accent')">ACC</button>
<button md-fab class="md-warn" (click)="click('fab warn')">WRN</button> <button mdFab class="md-warn" (click)="click('fab warn')">WRN</button>
<button md-fab class="custom" (click)="click('custom fab')">CSTM</button> <button mdFab class="custom" (click)="click('custom fab')">CSTM</button>
</section> </section>
<section> <section>
<span class="label">Anchor / hyperlink</span> <span class="label">Anchor / hyperlink</span>
<a md-button href="http://google.com" target="_blank">HREF</a> <a mdButton href="http://google.com" target="_blank">HREF</a>
<a md-button href="http://google.com" disabled>DISABLED HREF</a> <a mdButton href="http://google.com" disabled>DISABLED HREF</a>
<a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a> <a mdRaisedButton target="_blank" href="http://google.com">RAISED HREF</a>
</section> </section>
<section dir="rtl"> <section dir="rtl">
<span class="label" dir="ltr">Right-to-left</span> <span class="label" dir="ltr">Right-to-left</span>
<button md-button (click)="click('Hebrew button')">לחצן</button> <button mdButton (click)="click('Hebrew button')">לחצן</button>
<button md-raised-button (click)="click('Hebrew raised button')">העלה</button> <button mdRaisedButton (click)="click('Hebrew raised button')">העלה</button>
<a md-button href="http://translate.google.com">עוגן</a> <a mdButton href="http://translate.google.com">עוגן</a>
</section> </section>

22
modules/playground/src/model_driven_forms/index.ts
View File

@ -42,7 +42,7 @@ function creditCardValidator(c): {[key: string]: boolean} {
@Component({selector: 'show-error', inputs: ['controlPath: control', 'errorTypes: errors']}) @Component({selector: 'show-error', inputs: ['controlPath: control', 'errorTypes: errors']})
@View({ @View({
template: ` template: `
<span *ng-if="errorMessage !== null">{{errorMessage}}</span> <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
`, `,
directives: [NgIf] directives: [NgIf]
}) })
@ -78,52 +78,52 @@ class ShowError {
template: ` template: `
<h1>Checkout Form (Model Driven)</h1> <h1>Checkout Form (Model Driven)</h1>
<form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="ngForm"> <form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm">
<p> <p>
<label for="firstName">First Name</label> <label for="firstName">First Name</label>
<input type="text" id="firstName" ng-control="firstName"> <input type="text" id="firstName" ngControl="firstName">
<show-error control="firstName" [errors]="['required']"></show-error> <show-error control="firstName" [errors]="['required']"></show-error>
</p> </p>
<p> <p>
<label for="middleName">Middle Name</label> <label for="middleName">Middle Name</label>
<input type="text" id="middleName" ng-control="middleName"> <input type="text" id="middleName" ngControl="middleName">
</p> </p>
<p> <p>
<label for="lastName">Last Name</label> <label for="lastName">Last Name</label>
<input type="text" id="lastName" ng-control="lastName"> <input type="text" id="lastName" ngControl="lastName">
<show-error control="lastName" [errors]="['required']"></show-error> <show-error control="lastName" [errors]="['required']"></show-error>
</p> </p>
<p> <p>
<label for="country">Country</label> <label for="country">Country</label>
<select id="country" ng-control="country"> <select id="country" ngControl="country">
<option *ng-for="#c of countries" [value]="c">{{c}}</option> <option *ngFor="#c of countries" [value]="c">{{c}}</option>
</select> </select>
</p> </p>
<p> <p>
<label for="creditCard">Credit Card</label> <label for="creditCard">Credit Card</label>
<input type="text" id="creditCard" ng-control="creditCard"> <input type="text" id="creditCard" ngControl="creditCard">
<show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error> <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
</p> </p>
<p> <p>
<label for="amount">Amount</label> <label for="amount">Amount</label>
<input type="number" id="amount" ng-control="amount"> <input type="number" id="amount" ngControl="amount">
<show-error control="amount" [errors]="['required']"></show-error> <show-error control="amount" [errors]="['required']"></show-error>
</p> </p>
<p> <p>
<label for="email">Email</label> <label for="email">Email</label>
<input type="email" id="email" ng-control="email"> <input type="email" id="email" ngControl="email">
<show-error control="email" [errors]="['required']"></show-error> <show-error control="email" [errors]="['required']"></show-error>
</p> </p>
<p> <p>
<label for="comments">Comments</label> <label for="comments">Comments</label>
<textarea id="comments" ng-control="comments"> <textarea id="comments" ngControl="comments">
</textarea> </textarea>
</p> </p>

4
modules/playground/src/observable_models/app.dart
View File

@ -22,9 +22,9 @@ const binding = const Binding(IterableDiffers,
<div style="display: flex"> <div style="display: flex">
<scroll-area id="testArea"></scroll-area> <scroll-area id="testArea"></scroll-area>
</div> </div>
<div template="ng-if scrollAreas.length > 0"> <div template="ngIf scrollAreas.length > 0">
<p>Following tables are only here to add weight to the UI:</p> <p>Following tables are only here to add weight to the UI:</p>
<scroll-area template="ng-for #scrollArea of scrollAreas"></scroll-area> <scroll-area template="ngFor #scrollArea of scrollAreas"></scroll-area>
</div> </div>
</div>''') </div>''')
class App { class App {

Some files were not shown because too many files have changed in this diff Show More