iSharkFly-Docs/angular-docs-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
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/src/common/directives/ng_class.ts
+2 -2
View File
@@ -37,7 +37,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
* selector: 'toggle-button',
* inputs: ['isDisabled'],
* template: `
* <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
* <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
* (click)="toggle(!isOn)">
* Click me!
* </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 {
private _differ: any;
private _mode: string;
modules/angular2/src/common/directives/ng_for.ts
+4 -4
View File
@@ -50,16 +50,16 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
*
* # Syntax
*
* - `<li *ng-for="#item of items; #i = index">...</li>`
* - `<li template="ng-for #item of items; #i = index">...</li>`
* - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
* - `<li *ngFor="#item of items; #i = index">...</li>`
* - `<li template="ngFor #item of items; #i = index">...</li>`
* - `<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>`
*
* ### Example
*
* See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
* example.
*/
@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf', 'ngForTemplate']})
@Directive({selector: '[ngFor][ngForOf]', inputs: ['ngForOf', 'ngForTemplate']})
export class NgFor implements DoCheck {
/** @internal */
_ngForOf: any;
modules/angular2/src/common/directives/ng_if.ts
+6 -6
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}.
*
* 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.
*
* ### 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
* than 0. -->
* {{errorCount}} errors detected
@@ -19,11 +19,11 @@ import {isBlank} from 'angular2/src/facade/lang';
*
* ### Syntax
*
* - `<div *ng-if="condition">...</div>`
* - `<div template="ng-if condition">...</div>`
* - `<template [ng-if]="condition"><div>...</div></template>`
* - `<div *ngIf="condition">...</div>`
* - `<div template="ngIf condition">...</div>`
* - `<template [ngIf]="condition"><div>...</div></template>`
*/
@Directive({selector: '[ng-if]', inputs: ['ngIf']})
@Directive({selector: '[ngIf]', inputs: ['ngIf']})
export class NgIf {
private _prevCondition: boolean = null;
modules/angular2/src/common/directives/ng_style.ts
+6 -6
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.
*
* 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
* are taken from the object's keys, and values - from the corresponding object's values.
*
* ### Syntax
*
* - `<div [ng-style]="{'font-style': style}"></div>`
* - `<div [ng-style]="styleExp"></div>` - here the `styleExp` must evaluate to an object
* - `<div [ngStyle]="{'font-style': style}"></div>`
* - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object
*
* ### 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';
*
* @Component({
* selector: 'ng-style-example',
* selector: 'ngStyle-example',
* 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!
* </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
* 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 {
/** @internal */
_rawStyle;
modules/angular2/src/common/directives/ng_switch.ts
+21 -21
View File
@@ -21,12 +21,12 @@ class SwitchView {
* `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
* (where you place the directive with a switch expression on the
* **`[ng-switch]="..."` attribute**), define any inner elements inside of the directive and
* place a `[ng-switch-when]` attribute per element.
* **`[ngSwitch]="..."` attribute**), define any inner elements inside of the directive and
* place a `[ngSwitchWhen]` attribute per element.
*
* The `ng-switch-when` 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
* then an element with the `ng-switch-default` attribute is displayed.
* 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 `ngSwitchWhen` property
* then an element with the `ngSwitchDefault` attribute is displayed.
*
* ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
*
@@ -37,22 +37,22 @@ class SwitchView {
* <p>Value = {{value}}</p>
* <button (click)="inc()">Increment</button>
*
* <div [ng-switch]="value">
* <p *ng-switch-when="'init'">increment to start</p>
* <p *ng-switch-when="0">0, increment again</p>
* <p *ng-switch-when="1">1, increment again</p>
* <p *ng-switch-when="2">2, stop incrementing</p>
* <p *ng-switch-default>&gt; 2, STOP!</p>
* <div [ngSwitch]="value">
* <p *ngSwitchWhen="'init'">increment to start</p>
* <p *ngSwitchWhen="0">0, increment again</p>
* <p *ngSwitchWhen="1">1, increment again</p>
* <p *ngSwitchWhen="2">2, stop incrementing</p>
* <p *ngSwitchDefault>&gt; 2, STOP!</p>
* </div>
*
* <!-- alternate syntax -->
*
* <p [ng-switch]="value">
* <template ng-switch-when="init">increment to start</template>
* <template [ng-switch-when]="0">0, increment again</template>
* <template [ng-switch-when]="1">1, increment again</template>
* <template [ng-switch-when]="2">2, stop incrementing</template>
* <template ng-switch-default>&gt; 2, STOP!</template>
* <p [ngSwitch]="value">
* <template ngSwitchWhen="init">increment to start</template>
* <template [ngSwitchWhen]="0">0, increment again</template>
* <template [ngSwitchWhen]="1">1, increment again</template>
* <template [ngSwitchWhen]="2">2, stop incrementing</template>
* <template ngSwitchDefault>&gt; 2, STOP!</template>
* </p>
* `,
* directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
@@ -68,7 +68,7 @@ class SwitchView {
* bootstrap(App).catch(err => console.error(err));
* ```
*/
@Directive({selector: '[ng-switch]', inputs: ['ngSwitch']})
@Directive({selector: '[ngSwitch]', inputs: ['ngSwitch']})
export class NgSwitch {
private _switchValue: any;
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.
*
* If multiple match expression match the switch expression value, all of them are displayed.
*
* See {@link NgSwitch} for more details and example.
*/
@Directive({selector: '[ng-switch-when]', inputs: ['ngSwitchWhen']})
@Directive({selector: '[ngSwitchWhen]', inputs: ['ngSwitchWhen']})
export class NgSwitchWhen {
// `_WHEN_DEFAULT` is used as a marker for a not yet initialized value
/** @internal */
@@ -193,7 +193,7 @@ export class NgSwitchWhen {
*
* See {@link NgSwitch} for more details and example.
*/
@Directive({selector: '[ng-switch-default]'})
@Directive({selector: '[ngSwitchDefault]'})
export class NgSwitchDefault {
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef,
@Host() sswitch: NgSwitch) {
modules/angular2/src/common/forms/directives/checkbox_value_accessor.ts
+2 -2
View File
@@ -11,12 +11,12 @@ const CHECKBOX_VALUE_ACCESSOR = CONST_EXPR(new Provider(
*
* ### Example
* ```
* <input type="checkbox" ng-control="rememberLogin">
* <input type="checkbox" ngControl="rememberLogin">
* ```
*/
@Directive({
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()'},
bindings: [CHECKBOX_VALUE_ACCESSOR]
})
modules/angular2/src/common/forms/directives/default_value_accessor.ts
+3 -3
View File
@@ -11,15 +11,15 @@ const DEFAULT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
*
* ### Example
* ```
* <input type="text" ng-control="searchQuery">
* <input type="text" ngControl="searchQuery">
* ```
*/
@Directive({
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
// 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()'},
bindings: [DEFAULT_VALUE_ACCESSOR]
})
modules/angular2/src/common/forms/directives/ng_control_group.ts
+7 -7
View File
@@ -38,17 +38,17 @@ const controlGroupProvider =
* <div>
* <h2>Angular2 Control &amp; ControlGroup Example</h2>
* <form #f="ngForm">
* <div ng-control-group="name" #cg-name="ngForm">
* <div ngControlGroup="name" #cg-name="form">
* <h3>Enter your name:</h3>
* <p>First: <input ng-control="first" required></p>
* <p>Middle: <input ng-control="middle"></p>
* <p>Last: <input ng-control="last" required></p>
* <p>First: <input ngControl="first" required></p>
* <p>Middle: <input ngControl="middle"></p>
* <p>Last: <input ngControl="last" required></p>
* </div>
* <h3>Name value:</h3>
* <pre>{{valueOf(cgName)}}</pre>
* <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p>
* <h3>What's your favorite food?</h3>
* <p><input ng-control="food"></p>
* <p><input ngControl="food"></p>
* <h3>Form value</h3>
* <pre>{{valueOf(f)}}</pre>
* </form>
@@ -70,9 +70,9 @@ const controlGroupProvider =
* this group can be accessed separately from the overall form.
*/
@Directive({
selector: '[ng-control-group]',
selector: '[ngControlGroup]',
providers: [controlGroupProvider],
inputs: ['name: ng-control-group'],
inputs: ['name: ngControlGroup'],
exportAs: 'ngForm'
})
export class NgControlGroup extends ControlContainer implements OnInit,
modules/angular2/src/common/forms/directives/ng_control_name.ts
+8 -8
View File
@@ -50,10 +50,10 @@ const controlNameBinding =
* directives: [FORM_DIRECTIVES],
* template: `
* <form #f="ngForm" (submit)='onLogIn(f.value)'>
* Login <input type='text' ng-control='login' #l="ngForm">
* <div *ng-if="!l.valid">Login is invalid</div>
* Login <input type='text' ngControl='login' #l="form">
* <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>
* </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({
@@ -72,9 +72,9 @@ const controlNameBinding =
* directives: [FORM_DIRECTIVES],
* template: `
* <form (submit)='onLogIn()'>
* Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
* Password <input type='password' ng-control='password'
* [(ng-model)]="credentials.password">
* Login <input type='text' ngControl='login' [(ngModel)]="credentials.login">
* Password <input type='password' ngControl='password'
* [(ngModel)]="credentials.password">
* <button type='submit'>Log in!</button>
* </form>
* `})
@@ -89,7 +89,7 @@ const controlNameBinding =
* ```
*/
@Directive({
selector: '[ng-control]',
selector: '[ngControl]',
bindings: [controlNameBinding],
inputs: ['name: ngControl', 'model: ngModel'],
outputs: ['update: ngModelChange'],
modules/angular2/src/common/forms/directives/ng_control_status.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import {NgControl} from './ng_control';
import {isBlank, isPresent} from 'angular2/src/facade/lang';
@Directive({
selector: '[ng-control],[ng-model],[ng-form-control]',
selector: '[ngControl],[ngModel],[ngFormControl]',
host: {
'[class.ng-untouched]': 'ngClassUntouched',
'[class.ng-touched]': 'ngClassTouched',
modules/angular2/src/common/forms/directives/ng_form.ts
+9 -9
View File
@@ -36,7 +36,7 @@ const formDirectiveProvider =
*
* ### 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))
*
@@ -47,16 +47,16 @@ const formDirectiveProvider =
* <div>
* <p>Submit the form to see the data object Angular builds</p>
* <h2>NgForm demo</h2>
* <form #f="ngForm" (ng-submit)="onSubmit(f.value)">
* <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
* <h3>Control group: credentials</h3>
* <div ng-control-group="credentials">
* <p>Login: <input type="text" ng-control="login"></p>
* <p>Password: <input type="password" ng-control="password"></p>
* <div ngControlGroup="credentials">
* <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ngControl="password"></p>
* </div>
* <h3>Control group: person</h3>
* <div ng-control-group="person">
* <p>First name: <input type="text" ng-control="firstName"></p>
* <p>Last name: <input type="text" ng-control="lastName"></p>
* <div ngControlGroup="person">
* <p>First name: <input type="text" ngControl="firstName"></p>
* <p>Last name: <input type="text" ngControl="lastName"></p>
* </div>
* <button type="submit">Submit Form</button>
* <p>Form data submitted:</p>
@@ -78,7 +78,7 @@ const formDirectiveProvider =
* ```
*/
@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],
host: {
'(submit)': 'onSubmit()',
modules/angular2/src/common/forms/directives/ng_form_control.ts
+5 -5
View File
@@ -44,7 +44,7 @@ const formControlBinding =
* <h2>NgFormControl Example</h2>
* <form>
* <p>Element with existing control: <input type="text"
* [ng-form-control]="loginControl"></p>
* [ngFormControl]="loginControl"></p>
* <p>Value of existing control: {{loginControl.value}}</p>
* </form>
* </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))
*
@@ -66,7 +66,7 @@ const formControlBinding =
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
* template: "<input type='text' [ngFormControl]='loginControl' [(ngModel)]='login'>"
* })
* class LoginComp {
* loginControl: Control = new Control('');
@@ -75,7 +75,7 @@ const formControlBinding =
* ```
*/
@Directive({
selector: '[ng-form-control]',
selector: '[ngFormControl]',
bindings: [formControlBinding],
inputs: ['form: ngFormControl', 'model: ngModel'],
outputs: ['update: ngModelChange'],
modules/angular2/src/common/forms/directives/ng_form_model.ts
+10 -10
View File
@@ -36,9 +36,9 @@ const formDirectiveProvider =
* template: `
* <div>
* <h2>NgFormModel Example</h2>
* <form [ng-form-model]="loginForm">
* <p>Login: <input type="text" ng-control="login"></p>
* <p>Password: <input type="password" ng-control="password"></p>
* <form [ngFormModel]="loginForm">
* <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ngControl="password"></p>
* </form>
* <p>Value:</p>
* <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
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* template: `
* <form [ng-form-model]='loginForm'>
* Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
* Password <input type='password' ng-control='password'
* [(ng-model)]='credentials.password'>
* <form [ngFormModel]='loginForm'>
* Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
* Password <input type='password' ngControl='password'
* [(ngModel)]='credentials.password'>
* <button (click)="onLogin()">Login</button>
* </form>`
* })
@@ -95,9 +95,9 @@ const formDirectiveProvider =
* ```
*/
@Directive({
selector: '[ng-form-model]',
selector: '[ngFormModel]',
bindings: [formDirectiveProvider],
inputs: ['form: ng-form-model'],
inputs: ['form: ngFormModel'],
host: {'(submit)': 'onSubmit()'},
outputs: ['ngSubmit'],
exportAs: 'ngForm'
modules/angular2/src/common/forms/directives/ng_model.ts
+4 -4
View File
@@ -31,8 +31,8 @@ const formControlBinding =
*
* ### Usage
*
* `ng-model` binds an existing domain model to a form control. For a
* two-way binding, use `[(ng-model)]` to ensure the model updates in
* `ngModel` binds an existing domain model to a form control. For a
* two-way binding, use `[(ngModel)]` to ensure the model updates in
* both directions.
*
* ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
@@ -40,7 +40,7 @@ const formControlBinding =
* @Component({
* selector: "search-comp",
* directives: [FORM_DIRECTIVES],
* template: `<input type='text' [(ng-model)]="searchQuery">`
* template: `<input type='text' [(ngModel)]="searchQuery">`
* })
* class SearchComp {
* searchQuery: string;
@@ -48,7 +48,7 @@ const formControlBinding =
* ```
*/
@Directive({
selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
selector: '[ngModel]:not([ngControl]):not([ngFormControl])',
bindings: [formControlBinding],
inputs: ['model: ngModel'],
outputs: ['update: ngModelChange'],
modules/angular2/src/common/forms/directives/number_value_accessor.ts
+2 -2
View File
@@ -11,12 +11,12 @@ const NUMBER_VALUE_ACCESSOR = CONST_EXPR(new Provider(
*
* ### Example
* ```
* <input type="number" [(ng-model)]="age">
* <input type="number" [(ngModel)]="age">
* ```
*/
@Directive({
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: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',
modules/angular2/src/common/forms/directives/select_control_value_accessor.ts
+3 -3
View File
@@ -22,8 +22,8 @@ const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
* ### Example
*
* ```
* <select ng-control="city">
* <option *ng-for="#c of cities" [value]="c"></option>
* <select ngControl="city">
* <option *ngFor="#c of cities" [value]="c"></option>
* </select>
* ```
*/
@@ -35,7 +35,7 @@ export class NgSelectOption {
* The accessor for writing a value and listening to changes on a select element.
*/
@Directive({
selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
selector: 'select[ngControl],select[ngFormControl],select[ngModel]',
host: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',
modules/angular2/src/common/forms/directives/validators.ts
+4 -4
View File
@@ -35,11 +35,11 @@ const REQUIRED_VALIDATOR =
* ### Example
*
* ```
* <input ng-control="fullName" required>
* <input ngControl="fullName" required>
* ```
*/
@Directive({
selector: '[required][ng-control],[required][ng-form-control],[required][ng-model]',
selector: '[required][ngControl],[required][ngFormControl],[required][ngModel]',
providers: [REQUIRED_VALIDATOR]
})
export class RequiredValidator {
@@ -48,7 +48,7 @@ export class RequiredValidator {
const MIN_LENGTH_VALIDATOR = CONST_EXPR(
new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MinLengthValidator), multi: true}));
@Directive({
selector: '[minlength][ng-control],[minlength][ng-form-control],[minlength][ng-model]',
selector: '[minlength][ngControl],[minlength][ngFormControl],[minlength][ngModel]',
providers: [MIN_LENGTH_VALIDATOR]
})
export class MinLengthValidator implements Validator {
@@ -64,7 +64,7 @@ export class MinLengthValidator implements Validator {
const MAX_LENGTH_VALIDATOR = CONST_EXPR(
new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MaxLengthValidator), multi: true}));
@Directive({
selector: '[maxlength][ng-control],[maxlength][ng-form-control],[maxlength][ng-model]',
selector: '[maxlength][ngControl],[maxlength][ngFormControl],[maxlength][ngModel]',
providers: [MAX_LENGTH_VALIDATOR]
})
export class MaxLengthValidator implements Validator {
modules/angular2/src/common/forms/form_builder.ts
+5 -5
View File
@@ -14,11 +14,11 @@ import * as modelModule from './model';
* selector: 'my-app',
* viewBindings: [FORM_BINDINGS]
* template: `
* <form [ng-form-model]="loginForm">
* <p>Login <input ng-control="login"></p>
* <div ng-control-group="passwordRetry">
* <p>Password <input type="password" ng-control="password"></p>
* <p>Confirm password <input type="password" ng-control="passwordConfirmation"></p>
* <form [ngFormModel]="loginForm">
* <p>Login <input ngControl="login"></p>
* <div ngControlGroup="passwordRetry">
* <p>Password <input type="password" ngControl="password"></p>
* <p>Confirm password <input type="password" ngControl="passwordConfirmation"></p>
* </div>
* </form>
* <h3>Form value:</h3>
modules/angular2/src/common/pipes/slice_pipe.ts
+1 -1
View File
@@ -42,7 +42,7 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
*
* ## List Example
*
* This `ng-for` example:
* This `ngFor` example:
*
* {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'}
*
modules/angular2/src/compiler/html_parser.ts
+1 -1
View File
@@ -200,7 +200,7 @@ class TreeBuilder {
private _popElement(fullName: string): boolean {
for (let stackIndex = this.elementStack.length - 1; stackIndex >= 0; 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);
return true;
}
modules/angular2/src/compiler/selector.ts
+2 -7
View File
@@ -84,12 +84,7 @@ export class CssSelector {
ListWrapper.isEmpty(this.attrs) && this.notSelectors.length === 0;
}
setElement(element: string = null) {
if (isPresent(element)) {
element = element.toLowerCase();
}
this.element = element;
}
setElement(element: string = null) { this.element = element; }
/** Gets a template string for an element that matches the selector. */
getMatchingElementTemplate(): string {
@@ -107,7 +102,7 @@ export class CssSelector {
}
addAttribute(name: string, value: string = _EMPTY_ATTR_VALUE) {
this.attrs.push(name.toLowerCase());
this.attrs.push(name);
if (isPresent(value)) {
value = value.toLowerCase();
} else {
modules/angular2/src/compiler/template_parser.ts
+25 -29
View File
@@ -44,7 +44,7 @@ import {
htmlVisitAll
} from './html_ast';
import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
import {splitAtColon} from './util';
// Group 1 = "bind-"
// Group 2 = "var-" or "#"
@@ -55,7 +55,7 @@ import {dashCaseToCamelCase, camelCaseToDashCase, splitAtColon} from './util';
// Group 7 = idenitifer inside []
// Group 8 = identifier inside ()
var BIND_NAME_REGEXP =
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/ig;
/^(?:(?:(?:(bind-)|(var-|#)|(on-)|(bindon-))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/g;
const TEMPLATE_ELEMENT = 'template';
const TEMPLATE_ATTR = 'template';
@@ -270,7 +270,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
targetProps: BoundElementOrDirectiveProperty[],
targetVars: VariableAst[]): boolean {
var templateBindingsSource = null;
if (attr.name.toLowerCase() == TEMPLATE_ATTR) {
if (attr.name == TEMPLATE_ATTR) {
templateBindingsSource = attr.value;
} else if (attr.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
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);
for (var i = 0; i < bindings.length; i++) {
var binding = bindings[i];
var dashCaseKey = camelCaseToDashCase(binding.key);
if (binding.keyIsVar) {
targetVars.push(
new VariableAst(dashCaseToCamelCase(binding.key), binding.name, attr.sourceSpan));
targetMatchableAttrs.push([dashCaseKey, binding.name]);
targetVars.push(new VariableAst(binding.key, binding.name, attr.sourceSpan));
targetMatchableAttrs.push([binding.key, binding.name]);
} else if (isPresent(binding.expression)) {
this._parsePropertyAst(dashCaseKey, binding.expression, attr.sourceSpan,
this._parsePropertyAst(binding.key, binding.expression, attr.sourceSpan,
targetMatchableAttrs, targetProps);
} else {
targetMatchableAttrs.push([dashCaseKey, '']);
this._parseLiteralAttr(dashCaseKey, null, attr.sourceSpan, targetProps);
targetMatchableAttrs.push([binding.key, '']);
this._parseLiteralAttr(binding.key, null, attr.sourceSpan, targetProps);
}
}
return true;
@@ -356,7 +354,10 @@ class TemplateParseVisitor implements HtmlAstVisitor {
private _parseVariable(identifier: string, value: string, sourceSpan: ParseSourceSpan,
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,
@@ -386,7 +387,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
private _parseAssignmentEvent(name: string, expression: string, sourceSpan: ParseSourceSpan,
targetMatchableAttrs: string[][], targetEvents: BoundEventAst[]) {
this._parseEvent(`${name}-change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs,
this._parseEvent(`${name}Change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs,
targetEvents);
}
@@ -396,7 +397,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
var parts = splitAtColon(name, [null, name]);
var target = parts[0];
var eventName = parts[1];
targetEvents.push(new BoundEventAst(dashCaseToCamelCase(eventName), target,
targetEvents.push(new BoundEventAst(eventName, target,
this._parseAction(expression, sourceSpan), sourceSpan));
// Don't detect directives for event names for now,
// 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,
targetProps: BoundElementOrDirectiveProperty[]) {
targetProps.push(new BoundElementOrDirectiveProperty(
dashCaseToCamelCase(name), this._exprParser.wrapLiteralPrimitive(value, ''), true,
sourceSpan));
name, this._exprParser.wrapLiteralPrimitive(value, ''), true, sourceSpan));
}
private _parseDirectives(selectorMatcher: SelectorMatcher,
@@ -493,16 +493,14 @@ class TemplateParseVisitor implements HtmlAstVisitor {
if (isPresent(directiveProperties)) {
var boundPropsByName = new Map<string, BoundElementOrDirectiveProperty>();
boundProps.forEach(boundProp => {
var key = dashCaseToCamelCase(boundProp.name);
var prevValue = boundPropsByName.get(boundProp.name);
if (isBlank(prevValue) || prevValue.isLiteral) {
// give [a]="b" a higher precedence thatn a="b" on the same element
boundPropsByName.set(key, boundProp);
// give [a]="b" a higher precedence than a="b" on the same element
boundPropsByName.set(boundProp.name, boundProp);
}
});
StringMapWrapper.forEach(directiveProperties, (elProp: string, dirProp: string) => {
elProp = dashCaseToCamelCase(elProp);
var boundProp = boundPropsByName.get(elProp);
// 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 parts = name.split(PROPERTY_PARTS_SEPARATOR);
if (parts.length === 1) {
boundPropertyName = this._schemaRegistry.getMappedPropName(dashCaseToCamelCase(parts[0]));
boundPropertyName = this._schemaRegistry.getMappedPropName(parts[0]);
bindingType = PropertyBindingType.Property;
if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName)) {
this._reportError(
@@ -547,20 +545,18 @@ class TemplateParseVisitor implements HtmlAstVisitor {
sourceSpan);
}
} else {
let lcPrefix = parts[0].toLowerCase();
if (lcPrefix == ATTRIBUTE_PREFIX) {
boundPropertyName = dashCaseToCamelCase(parts[1]);
if (parts[0] == ATTRIBUTE_PREFIX) {
boundPropertyName = parts[1];
bindingType = PropertyBindingType.Attribute;
} else if (lcPrefix == CLASS_PREFIX) {
// keep original case!
} else if (parts[0] == CLASS_PREFIX) {
boundPropertyName = parts[1];
bindingType = PropertyBindingType.Class;
} else if (lcPrefix == STYLE_PREFIX) {
} else if (parts[0] == STYLE_PREFIX) {
unit = parts.length > 2 ? parts[2] : null;
boundPropertyName = dashCaseToCamelCase(parts[1]);
boundPropertyName = parts[1];
bindingType = PropertyBindingType.Style;
} else {
this._reportError(`Invalid property name ${name}`, sourceSpan);
this._reportError(`Invalid property name '${name}'`, sourceSpan);
bindingType = null;
}
}
@@ -694,7 +690,7 @@ function createElementCssSelector(elementName: string, matchableAttrs: string[][
cssSelector.setElement(elementName);
for (var i = 0; i < matchableAttrs.length; i++) {
var attrName = matchableAttrs[i][0].toLowerCase();
var attrName = matchableAttrs[i][0];
var attrValue = matchableAttrs[i][1];
cssSelector.addAttribute(attrName, attrValue);
if (attrName == CLASS_ATTR) {
modules/angular2/src/compiler/template_preparser.ts
+6 -6
View File
@@ -9,7 +9,7 @@ const LINK_STYLE_HREF_ATTR = 'href';
const LINK_STYLE_REL_VALUE = 'stylesheet';
const STYLE_ELEMENT = 'style';
const SCRIPT_ELEMENT = 'script';
const NG_NON_BINDABLE_ATTR = 'ng-non-bindable';
const NG_NON_BINDABLE_ATTR = 'ngNonBindable';
export function preparseElement(ast: HtmlElementAst): PreparsedElement {
var selectAttr = null;
@@ -17,14 +17,14 @@ export function preparseElement(ast: HtmlElementAst): PreparsedElement {
var relAttr = null;
var nonBindable = false;
ast.attrs.forEach(attr => {
let attrName = attr.name.toLowerCase();
if (attrName == NG_CONTENT_SELECT_ATTR) {
let lcAttrName = attr.name.toLowerCase();
if (lcAttrName == NG_CONTENT_SELECT_ATTR) {
selectAttr = attr.value;
} else if (attrName == LINK_STYLE_HREF_ATTR) {
} else if (lcAttrName == LINK_STYLE_HREF_ATTR) {
hrefAttr = attr.value;
} else if (attrName == LINK_STYLE_REL_ATTR) {
} else if (lcAttrName == LINK_STYLE_REL_ATTR) {
relAttr = attr.value;
} else if (attrName == NG_NON_BINDABLE_ATTR) {
} else if (attr.name == NG_NON_BINDABLE_ATTR) {
nonBindable = true;
}
});
modules/angular2/src/core/change_detection/change_detector_ref.ts
+2 -2
View File
@@ -73,7 +73,7 @@ export abstract class ChangeDetectorRef {
* @Component({
* selector: 'giant-list',
* template: `
* <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
* <li *ngFor="#d of dataProvider.data">Data {{d}}</lig>
* `,
* directives: [NgFor]
* })
@@ -179,7 +179,7 @@ export abstract class ChangeDetectorRef {
* selector: 'app',
* providers: [DataProvider],
* template: `
* Live Update: <input type="checkbox" [(ng-model)]="live">
* Live Update: <input type="checkbox" [(ngModel)]="live">
* <live-data [live]="live"><live-data>
* `,
* directives: [LiveData, FORM_DIRECTIVES]
modules/angular2/src/core/change_detection/parser/parser.ts
+1 -1
View File
@@ -594,7 +594,7 @@ export class _ParseAST {
if (prefix == null) {
prefix = key;
} else {
key = prefix + '-' + key;
key = prefix + key[0].toUpperCase() + key.substring(1);
}
}
this.optionalCharacter($COLON);
modules/angular2/src/core/linker/interfaces.ts
+5 -5
View File
@@ -109,7 +109,7 @@ export interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange})
* <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`,
* <my-cmp *ngIf="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf]
* })
* export class App {
@@ -150,7 +150,7 @@ export interface OnInit { ngOnInit(); }
* template: `
* <p>Changes:</p>
* <ul>
* <li *ng-for="#line of logs">{{line}}</li>
* <li *ngFor="#line of logs">{{line}}</li>
* </ul>`,
* directives: [NgFor]
* })
@@ -217,7 +217,7 @@ export interface DoCheck { ngDoCheck(); }
* <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`,
* <my-cmp *ngIf="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf]
* })
* export class App {
@@ -367,7 +367,7 @@ export interface AfterContentInit { ngAfterContentInit(); }
* template: `
* <parent-cmp>
* <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>`,
* directives: [NgIf, ParentComponent, ChildComponent]
* })
@@ -442,7 +442,7 @@ export interface AfterViewInit { ngAfterViewInit(); }
* selector: 'parent-cmp',
* template: `
* <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]
* })
* class ParentComponent implements AfterViewChecked {
modules/angular2/src/core/linker/query_list.ts
+1 -1
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
* 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`.
*
modules/angular2/src/core/linker/view_ref.ts
+4 -4
View File
@@ -50,7 +50,7 @@ export interface HostViewRef {
* ```
* Count: {{items.length}}
* <ul>
* <li *ng-for="var item of items">{{item}}</li>
* <li *ngFor="var item of items">{{item}}</li>
* </ul>
* ```
*
@@ -60,7 +60,7 @@ export interface HostViewRef {
* ```
* Count: {{items.length}}
* <ul>
* <template ng-for var-item [ng-for-of]="items"></template>
* <template ngFor var-item [ngForOf]="items"></template>
* </ul>
* ```
*
@@ -146,7 +146,7 @@ export class ViewRef_ extends ViewRef {
* ```
* Count: {{items.length}}
* <ul>
* <li *ng-for="var item of items">{{item}}</li>
* <li *ngFor="var item of items">{{item}}</li>
* </ul>
* ```
*
@@ -156,7 +156,7 @@ export class ViewRef_ extends ViewRef {
* ```
* Count: {{items.length}}
* <ul>
* <template ng-for var-item [ng-for-of]="items"></template>
* <template ngFor var-item [ngForOf]="items"></template>
* </ul>
* ```
*
modules/angular2/src/core/metadata.ts
+7 -7
View File
@@ -732,8 +732,8 @@ export var Component: ComponentFactory =
* A directive can also query for other child directives. Since parent directives are instantiated
* before child directives, a directive can't simply inject the list of child directives. Instead,
* the directive injects a {@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
* `ng-if`, or an `ng-switch`.
* removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an
* `ngIf`, or an `ngSwitch`.
*
* ```
* @Directive({ selector: '[my-directive]' })
@@ -1007,7 +1007,7 @@ export var Attribute: AttributeFactory = makeParamDecorator(AttributeMetadata);
* ```html
* <tabs>
* <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>
* ```
*
@@ -1026,7 +1026,7 @@ export var Attribute: AttributeFactory = makeParamDecorator(AttributeMetadata);
* selector: 'tabs',
* template: `
* <ul>
* <li *ng-for="#pane of panes">{{pane.title}}</li>
* <li *ngFor="#pane of panes">{{pane.title}}</li>
* </ul>
* <content></content>
* `
@@ -1357,10 +1357,10 @@ export var Output: OutputFactory = makePropDecorator(OutputMetadata);
* ### Example
*
* 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
* @Directive({selector: '[ng-model]'})
* @Directive({selector: '[ngModel]'})
* class NgModelStatus {
* constructor(public control:NgModel) {}
* @HostBinding('[class.valid]') get valid { return this.control.valid; }
@@ -1369,7 +1369,7 @@ export var Output: OutputFactory = makePropDecorator(OutputMetadata);
*
* @Component({
* selector: 'app',
* template: `<input [(ng-model)]="prop">`,
* template: `<input [(ngModel)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus]
* })
* class App {
modules/angular2/src/core/metadata/di.ts
+2 -2
View File
@@ -55,7 +55,7 @@ export class AttributeMetadata extends DependencyMetadata {
* ```html
* <tabs>
* <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>
* ```
*
@@ -74,7 +74,7 @@ export class AttributeMetadata extends DependencyMetadata {
* selector: 'tabs',
* template: `
* <ul>
* <li *ng-for="#pane of panes">{{pane.title}}</li>
* <li *ngFor="#pane of panes">{{pane.title}}</li>
* </ul>
* <content></content>
* `
modules/angular2/src/core/metadata/directives.ts
+8 -8
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
* 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,
* removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an
* `ng-if`, or an `ng-switch`.
* removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an
* `ngIf`, or an `ngSwitch`.
*
* ```
* @Directive({ selector: '[my-directive]' })
@@ -582,11 +582,11 @@ export class DirectiveMetadata extends InjectableMetadata {
* ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))
*
* 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
* @Directive({
* selector: '[ng-model]',
* selector: '[ngModel]',
* host: {
* '[class.valid]': 'valid',
* '[class.invalid]': 'invalid'
@@ -600,7 +600,7 @@ export class DirectiveMetadata extends InjectableMetadata {
*
* @Component({
* selector: 'app',
* template: `<input [(ng-model)]="prop">`,
* template: `<input [(ngModel)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus]
* })
* class App {
@@ -1085,10 +1085,10 @@ export class OutputMetadata {
* ### Example
*
* 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
* @Directive({selector: '[ng-model]'})
* @Directive({selector: '[ngModel]'})
* class NgModelStatus {
* constructor(public control:NgModel) {}
* @HostBinding('[class.valid]') get valid { return this.control.valid; }
@@ -1097,7 +1097,7 @@ export class OutputMetadata {
*
* @Component({
* selector: 'app',
* template: `<input [(ng-model)]="prop">`,
* template: `<input [(ngModel)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus]
* })
* class App {
modules/angular2/src/core/metadata/view.ts
+1 -1
View File
@@ -104,7 +104,7 @@ export class ViewMetadata {
* directives: [NgFor]
* template: '
* <ul>
* <li *ng-for="#item of items">{{item}}</li>
* <li *ngFor="#item of items">{{item}}</li>
* </ul>'
* })
* class MyComponent {
modules/angular2/src/core/render/api.ts
+3 -3
View File
@@ -33,7 +33,7 @@ export class RenderProtoViewRef {}
<div>foo</div> -> view 1 / fragment 1
<ul>
<template ng-for>
<template ngFor>
<li>{{fg}}</li> -> view 2 / fragment 1
</template>
</ul>
@@ -42,10 +42,10 @@ export class RenderProtoViewRef {}
<div>foo</div> -> view 1 / fragment 1
<ul>
<template ng-if>
<template ngIf>
<li><ng-content></></li> -> view 1 / fragment 2
</template>
<template ng-for>
<template ngFor>
<li><ng-content></></li> ->
<li></li> -> view 1 / fragment 2 + view 2 / fragment 1..n-1
</template>
modules/angular2/src/core/zone/ng_zone.ts
+1 -1
View File
@@ -42,7 +42,7 @@ export class NgZoneError {
* <h2>Demo: NgZone</h2>
*
* <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)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
modules/angular2/src/platform/dom/dom_renderer.ts
+4 -7
View File
@@ -39,7 +39,6 @@ import {
DefaultRenderFragmentRef,
DefaultProtoViewRef
} from 'angular2/src/core/render/view';
import {camelCaseToDashCase} from './util';
import {ViewEncapsulation} from 'angular2/src/core/metadata';
// TODO move it once DomAdapter is moved
@@ -139,11 +138,10 @@ export abstract class DomRenderer extends Renderer implements NodeFactory<Node>
attributeValue: string): void {
var view = resolveInternalDomView(location.renderView);
var element = view.boundElements[location.boundElementIndex];
var dashCasedAttributeName = camelCaseToDashCase(attributeName);
if (isPresent(attributeValue)) {
DOM.setAttribute(element, dashCasedAttributeName, stringify(attributeValue));
DOM.setAttribute(element, attributeName, stringify(attributeValue));
} 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 {
var view = resolveInternalDomView(location.renderView);
var element = view.boundElements[location.boundElementIndex];
var dashCasedStyleName = camelCaseToDashCase(styleName);
if (isPresent(styleValue)) {
DOM.setStyle(element, dashCasedStyleName, stringify(styleValue));
DOM.setStyle(element, styleName, stringify(styleValue));
} else {
DOM.removeStyle(element, dashCasedStyleName);
DOM.removeStyle(element, styleName);
}
}
modules/angular2/src/router/router_link.ts
+2 -2
View File
@@ -20,7 +20,7 @@ import {Instruction} from './instruction';
* 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
@@ -35,7 +35,7 @@ import {Instruction} from './instruction';
* current component's parent.
*/
@Directive({
selector: '[router-link]',
selector: '[routerLink]',
inputs: ['routeParams: routerLink', 'target: target'],
host: {
'(click)': 'onClick()',