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

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

View File

@ -4,7 +4,9 @@ Angular2 templates are now case-sensitive and use camelCase in many places where
Where you used to write:
```
<my-cmp (some-event)="someAction()" [some-property]="expression" #some-var>
```
in order to:
- bind to the `someEvent` event,
@ -13,7 +15,9 @@ in order to:
You should now write:
```
<my-cmp (someEvent)="someAction()" [someProperty]="expression" #someVar>
```
Notes:
- while tag name are case sensitive, the best practice is to use dash case for component elements so that the browser
@ -36,8 +40,9 @@ Examples:
- `<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">`,
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.
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. 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-some-event` should be changed to `on-someEvent`,
@ -60,9 +65,10 @@ Note that both angular directives and your own directives must be updated in the
Take the following steps to upgrade your directives and components:
1. Update the selector:
```
@Directive({selector: 'tag[attr][name=value]'})
@Component({selector: 'tag[attr][name=value]'})
```
Tag and attributes names are case sensitive:
- For tag names, the best practice is to keep them lower dash cased, do not update them,
@ -77,13 +83,16 @@ Examples:
Note: attribute values and classes are still matched case insensitive.
2. Update the inputs
```
@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:
```
@Directive({inputs: ['myProp', 'myOtherProp: myAttrName']})
```
Notes:
- only the long syntax (with ":") needs not be updated,
@ -92,36 +101,49 @@ Notes:
The same applies for the `@Input` decorator:
```
@Input() myProp;
@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('myAttrName') myProp; // Convert the attribute name to camel case
```
3. Update the outputs
Update the outputs in the same way the inputs are updated:
```
@Directive({outputs: ['myEvent', 'myOtherEvent: my-event-name']})
```
should be updated to
should be updated to:
```
@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.
```
@Output() myEvent;
@Output('my-event-name') myEvent;
```
should be changed to
should be changed to:
```
@Output() myEvent;
@Output('myEventName') myEvent;
```
4. Update the host bindings
```
@Directive({
host: {
'[some-prop]': 'exp',
@ -131,9 +153,11 @@ should be changed to
'some-attr': 'value'
}
})
```
should be changed to:
```
@Directive({
host: {
'[someProp]': 'exp',
@ -143,20 +167,23 @@ should be changed to:
'some-attr': 'value'
}
})
```
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).
5. Update export name
```
@Directive({
exportAs: 'some-name'
})
```
should be changed to
should be changed to:
```
@Directive({
exportAs: 'someName'
})
```