feat: camelCase Angular (kebab-case removal)
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:

committed by
Igor Minar

parent
b386d1134a
commit
da9b46a071
@ -359,20 +359,20 @@ Example of conditionally included template:
|
||||
|
||||
```
|
||||
Hello {{user}}!
|
||||
<div template="ng-if: isAdministrator">
|
||||
<div template="ngIf: isAdministrator">
|
||||
...administrator menu here...
|
||||
</div>
|
||||
```
|
||||
|
||||
In the above example the `ng-if` directive determines whether the child view (an instance of the child template) should be
|
||||
inserted into the root view. The `ng-if` makes this decision based on if the `isAdministrator` binding is true.
|
||||
In the above example the `ngIf` directive determines whether the child view (an instance of the child template) should be
|
||||
inserted into the root view. The `ngIf` makes this decision based on if the `isAdministrator` binding is true.
|
||||
|
||||
The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
|
||||
identical.
|
||||
|
||||
```
|
||||
Hello {{user}}!
|
||||
<template [ng-if]="isAdministrator">
|
||||
<template [ngIf]="isAdministrator">
|
||||
<div>
|
||||
...administrator menu here...
|
||||
</div>
|
||||
@ -383,22 +383,22 @@ Hello {{user}}!
|
||||
### Template Microsyntax
|
||||
|
||||
Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
|
||||
of the templates occurs. One such example is `ng-for`.
|
||||
of the templates occurs. One such example is `ngFor`.
|
||||
|
||||
```
|
||||
<form #foo=form>
|
||||
</form>
|
||||
<ul>
|
||||
<template [ng-for] #person [ng-for-of]="people" #i="index">
|
||||
<template [ngFor] #person [ngForOf]="people" #i="index">
|
||||
<li>{{i}}. {{person}}<li>
|
||||
</template>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Where:
|
||||
* `[ng-for]` triggers the for directive.
|
||||
* `#person` exports the implicit `ng-for` item.
|
||||
* `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
|
||||
* `[ngFor]` triggers the for directive.
|
||||
* `#person` exports the implicit `ngFor` item.
|
||||
* `[ngForOf]="people"` binds an iterable object to the `ngFor` controller.
|
||||
* `#i=index` exports item index as `i`.
|
||||
|
||||
The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
|
||||
@ -406,7 +406,7 @@ syntax is preferable.
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
|
||||
<li template="ngFor; #person; of=people; #i=index;">{{i}}. {{person}}<li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
@ -416,24 +416,24 @@ which allows us to further shorten the text.
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li template="ng-for #person of people #i=index">{{i}}. {{person}}<li>
|
||||
<li template="ngFor #person of people #i=index">{{i}}. {{person}}<li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
|
||||
microsyntax for `ng-for`.
|
||||
microsyntax for `ngFor`.
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li>
|
||||
<li template="ngFor: var person of people; var i=index">{{i}}. {{person}}<li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so:
|
||||
Finally, we can move the `ngFor` keyword to the left hand side and prefix it with `*` as so:
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li *ng-for="var person of people; var i=index">{{i}}. {{person}}<li>
|
||||
<li *ngFor="var person of people; var i=index">{{i}}. {{person}}<li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
@ -544,7 +544,7 @@ Angular are:
|
||||
<div title="{{expression}}">{{expression}}</div>
|
||||
<div [title]="expression">...</div>
|
||||
<div bind-title="expression">...</div>
|
||||
<div template="ng-if: expression">...</div>
|
||||
<div template="ngIf: expression">...</div>
|
||||
```
|
||||
|
||||
Expressions are simplified version of expression in the language in which you are writing your application. (i.e.
|
||||
|
@ -161,7 +161,7 @@ Example of usage:
|
||||
|
||||
## Directives that use a ViewContainer
|
||||
|
||||
Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.)
|
||||
Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ngIf` and `ngFor`.)
|
||||
|
||||
* Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
|
||||
* The child views show up as siblings of the directive in the DOM.
|
||||
|
@ -94,7 +94,7 @@ Let's start with a View such as:
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li template="ng-for: #person of people">{{person}}</li>
|
||||
<li template="ngFor: #person of people">{{person}}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
Reference in New Issue
Block a user