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/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>