cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(kebab-case.md): fix indentation, add links and other small changes

Browse Source
This commit is contained in:
Igor Minar 2015-12-10 00:47:54 -08:00
parent 4724cc664e
commit b3d10af89a
1 changed files with 113 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
modules/angular2/docs/migration/kebab-case.md
View File

@ -4,7 +4,9 @@ Angular2 templates are now case-sensitive and use camelCase in many places where
Where you used to write: Where you used to write:
<my-cmp (some-event)="someAction()" [some-property]="expression" #some-var> ```
<my-cmp (some-event)="someAction()" [some-property]="expression" #some-var>
```
in order to: in order to:
- bind to the `someEvent` event, - bind to the `someEvent` event,
@ -13,7 +15,9 @@ in order to:
You should now write: You should now write:
<my-cmp (someEvent)="someAction()" [someProperty]="expression" #someVar> ```
<my-cmp (someEvent)="someAction()" [someProperty]="expression" #someVar>
```
Notes: Notes:
- while tag name are case sensitive, the best practice is to use dash case for component elements so that the browser - while tag name are case sensitive, the best practice is to use dash case for component elements so that the browser
@ -28,135 +32,158 @@ Notes:
1. Directives selectors, property bindings, event bindings, template variables and template element attributes should be changed to camel case: 1. Directives selectors, property bindings, event bindings, template variables and template element attributes should be changed to camel case:
Examples: Examples:
- `<p *ng-if="cond">` should be changed to `<p *ngIf="cond">`, - `<p *ng-if="cond">` should be changed to `<p *ngIf="cond">`,
- `<my-cmp [my-prop]="exp">` should be changed to `<my-cmp [myProp]="exp">`, - `<my-cmp [my-prop]="exp">` should be changed to `<my-cmp [myProp]="exp">`,
- `<my-cmp (my-event)="action()">` should be changed to `<my-cmp (myEvent)="action()">`, - `<my-cmp (my-event)="action()">` should be changed to `<my-cmp (myEvent)="action()">`,
- `<my-cmp [(my-prop)]="prop">` should be changed to `<my-cmp [(myProp)]="prop">`, - `<my-cmp [(my-prop)]="prop">` should be changed to `<my-cmp [(myProp)]="prop">`,
- `<input #my-input>` should be changed to `<input #myInput>`, - `<input #my-input>` should be changed to `<input #myInput>`,
- `<template ng-for #my-item [ng-for-of]=items #my-index="index">` should be changed to `<template ngFor="#my-item" [ngForOf]=items #myIndex="index">`, - `<template ng-for #my-item [ng-for-of]=items #my-index="index">` should be changed to `<template ngFor="#my-item" [ngForOf]=items #myIndex="index">`,
Note: while the tag names are now case sensitive the best practice is to keep them lower dash cased so that the browser Note: while the tag names are now case-sensitive the best practice is to keep them lower-dash-cased so that the browser
treat them as custom elements. This explains why the `<router-outlet>` component is left unchanged. treat them as custom elements. Using dashes in custom element names is required by the [Custom Element HTML Spec](http://www.w3.org/TR/custom-elements/#concepts).
This explains why the `<router-outlet>` component is left unchanged.
`on-`, `bindon-`, `bind-` and `var-` prefixes are still part of the canonical syntax and should remain unchanged (lower cased): `on-`, `bindon-`, `bind-` and `var-` prefixes are still part of the canonical syntax and should remain unchanged (lower cased):
- `on-some-event` should be changed to `on-someEvent`, - `on-some-event` should be changed to `on-someEvent`,
- `bind-my-prop` should be changed to `bind-myProp`, - `bind-my-prop` should be changed to `bind-myProp`,
- `bindon-my-prop` should be changed to `bindon-myProp`, - `bindon-my-prop` should be changed to `bindon-myProp`,
- `var-my-var` should be changed to `var-myVar`. - `var-my-var` should be changed to `var-myVar`.
2. Update variable binding 2. Update variable binding
- `<p #var1="a-b" var-var2="c-d">` should be changed to `<p #var1="aB" var-var2="cD">` - `<p #var1="a-b" var-var2="c-d">` should be changed to `<p #var1="aB" var-var2="cD">`
3. The `template` attribute values should also be updated in the same way 3. The `template` attribute values should also be updated in the same way
`<p template="ng-for #my-item of items #my-index = index">` should be changed to `<p template="ngFor #myItem of items #myIndex = index">`. `<p template="ng-for #my-item of items #my-index = index">` should be changed to `<p template="ngFor #myItem of items #myIndex = index">`.
Note that both angular directives and your own directives must be updated in the same way. Note that both angular directives and your own directives must be updated in the same way.
#### Directives and Components #### Directives and Components
Take the following steps to upgrade your directives and components: Take the following steps to upgrade your directives and components:
1. Update the selector: 1. Update the selector:
```
@Directive({selector: 'tag[attr][name=value]'})
@Component({selector: 'tag[attr][name=value]'})
```
@Directive({selector: 'tag[attr][name=value]'}) Tag and attributes names are case sensitive:
@Component({selector: 'tag[attr][name=value]'}) - For tag names, the best practice is to keep them lower dash cased, do not update them,
- For attribute names, the best practice is to convert them from lower dash case to camel case.
Tag and attributes names are case sensitive: Examples:
- For tag names, the best practice is to keep them lower dash cased, do not update them, - `custom-tag` should stay `custom-tag` (do not update tag names),
- For attribute names, the best practice is to convert them from lower dash case to camel case. - `[attr-name]` should be updated to `[attrName]`,
- `[attr-name=someValue]` should be updated to `[attrName=someValue]`,
- `custom-tag[attr-name=someValue]` should be updated to `custom-tag[attrName=someValue]`
Examples: Note: attribute values and classes are still matched case insensitive.
- `custom-tag` should stay `custom-tag` (do not update tag names),
- `[attr-name]` should be updated to `[attrName]`,
- `[attr-name=someValue]` should be updated to `[attrName=someValue]`,
- `custom-tag[attr-name=someValue]` should be updated to `custom-tag[attrName=someValue]`
Note: attribute values and classes are still matched case insensitive.
2. Update the inputs 2. Update the inputs
```
@Directive({inputs: ['myProp', 'myOtherProp: my-attr-name']})
```
@Directive({inputs: ['myProp', 'myOtherProp: my-attr-name']}) As attribute names are now case sensitive, they should be converted from dash to camel case where they are specified.
The previous decorator becomes:
As attribute names are now case sensitive, they should be converted from dash to camel case where they are specified. ```
The previous decorator becomes: @Directive({inputs: ['myProp', 'myOtherProp: myAttrName']})
```
@Directive({inputs: ['myProp', 'myOtherProp: myAttrName']}) Notes:
- only the long syntax (with ":") needs not be updated,
- `properties` is the legacy name for `inputs` and should be updated in the same way - it is a good idea to replace
`properties` with `inputs` at the same time as support for the former will be removed soon.
Notes: The same applies for the `@Input` decorator:
- only the long syntax (with ":") needs not be updated,
- `properties` is the legacy name for `inputs` and should be updated in the same way - it is a good idea to replace
`properties` with `inputs` at the same time as support for the former will be removed soon.
The same applies for the `@Input` decorator: ```
@Input() myProp;
@Input('my-attr-name') myProp;
```
@Input() myProp; That is they only need to be updated when the attribute name is specified:
@Input('my-attr-name') myProp;
That is they only need to be updated when the attribute name is specified: ```
@Input() myProp; // Nothing to update
@Input() myProp; // Nothing to update @Input('myAttrName') myProp; // Convert the attribute name to camel case
@Input('myAttrName') myProp; // Convert the attribute name to camel case ```
3. Update the outputs 3. Update the outputs
Update the outputs in the same way the inputs are updated: Update the outputs in the same way the inputs are updated:
@Directive({outputs: ['myEvent', 'myOtherEvent: my-event-name']}) ```
@Directive({outputs: ['myEvent', 'myOtherEvent: my-event-name']})
```
should be updated to should be updated to:
@Directive({outputs: ['myEvent', 'myOtherEvent: myEventName']}) ```
@Directive({outputs: ['myEvent', 'myOtherEvent: myEventName']})
```
If you use `events` instead of `outputs` you should update in the same way and switch to `outputs` as `events` is deprecated. If you use `events` instead of `outputs` you should update in the same way and switch to `outputs` as `events` is deprecated.
@Output() myEvent; ```
@Output('my-event-name') myEvent; @Output() myEvent;
@Output('my-event-name') myEvent;
```
should be changed to should be changed to:
@Output() myEvent; ```
@Output('myEventName') myEvent; @Output() myEvent;
@Output('myEventName') myEvent;
```
4. Update the host bindings 4. Update the host bindings
@Directive({ ```
host: { @Directive({
'[some-prop]': 'exp', host: {
'[style.background-color]': 'exp', '[some-prop]': 'exp',
'[class.some-class]': 'exp', '[style.background-color]': 'exp',
'(some-event)': 'action()', '[class.some-class]': 'exp',
'some-attr': 'value' '(some-event)': 'action()',
} 'some-attr': 'value'
}) }
})
```
should be changed to: should be changed to:
@Directive({ ```
host: { @Directive({
'[someProp]': 'exp', host: {
'[style.background-color]': 'exp', '[someProp]': 'exp',
'[class.some-class]': 'exp', '[style.background-color]': 'exp',
'(someEvent)': 'action()', '[class.some-class]': 'exp',
'some-attr': 'value' '(someEvent)': 'action()',
} 'some-attr': 'value'
}) }
})
```
The property bindings (`[...]`) and event bindings (`(...)`) must be updated in the same way as they are updated in a The property bindings (`[...]`) and event bindings (`(...)`) must be updated in the same way as they are updated in a
template (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case). template (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).
5. Update export name 5. Update export name
@Directive({ ```
exportAs: 'some-name' @Directive({
}) exportAs: 'some-name'
})
should be changed to ```
@Directive({
exportAs: 'someName'
})
should be changed to:
```
@Directive({
exportAs: 'someName'
})
```