cargdev/angular
1
0
Fork 0
Code Issues 17 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

4
modules/angular2/src/core/change_detection/change_detector_ref.ts
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]

2
modules/angular2/src/core/change_detection/parser/parser.ts
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);

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">
* {{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 {

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
* 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`.
*

8
modules/angular2/src/core/linker/view_ref.ts
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>
* ```
*

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
* 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 {

4
modules/angular2/src/core/metadata/di.ts
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>
* `

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
* 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 {

2
modules/angular2/src/core/metadata/view.ts
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 {

6
modules/angular2/src/core/render/api.ts
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>

2
modules/angular2/src/core/zone/ng_zone.ts
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>