Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
BREAKING CASE
  • Loading branch information
vicb committed Nov 24, 2015
1 parent cee67e6 commit e04d33b
Show file tree
Hide file tree
Showing 110 changed files with 702 additions and 744 deletions.
16 changes: 8 additions & 8 deletions modules/angular2/docs/cheatsheet/built-in-directives.md
Expand Up @@ -5,21 +5,21 @@ Built-in directives
`import {NgIf, ...} from 'angular2/angular2';`

@cheatsheetItem
`<section *ng-if="showSection">`|`*ng-if`
`<section *ngIf="showSection">`|`*ngIf`
Removes or recreates a portion of the DOM tree based on the showSection expression.

@cheatsheetItem
`<li *ng-for="#item of list">`|`*ng-for`
`<li *ngFor="#item of list">`|`*ngFor`
Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

@cheatsheetItem
`<div [ng-switch]="conditionExpression">
<template [ng-switch-when]="case1Exp">...</template>
<template ng-switch-when="case2LiteralString">...</template>
<template ng-switch-default>...</template>
</div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default`
`<div [ngSwitch]="conditionExpression">
<template [ngSwitchWhen]="case1Exp">...</template>
<template ngSwitchWhen="case2LiteralString">...</template>
<template ngSwitchDefault>...</template>
</div>`|`[ngSwitch]`|`[ngSwitchWhen]`|`ngSwitchWhen`|`ngSwitchDefault`
Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

@cheatsheetItem
`<div [ng-class]="{active: isActive, disabled: isDisabled}">`|`[ng-class]`
`<div [ngClass]="{active: isActive, disabled: isDisabled}">`|`[ngClass]`
Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.
2 changes: 1 addition & 1 deletion modules/angular2/docs/cheatsheet/forms.md
Expand Up @@ -5,5 +5,5 @@ Forms
`import {FORM_DIRECTIVES} from 'angular2/angular2';`

@cheatsheetItem
`<input [(ng-model)]="userName">`|`[(ng-model)]`
`<input [(ngModel)]="userName">`|`[(ngModel)]`
Provides two-way data-binding, parsing and validation for form controls.
2 changes: 1 addition & 1 deletion modules/angular2/docs/cheatsheet/routing.md
Expand Up @@ -21,7 +21,7 @@ Marks the location to load the component of the active route.


@cheatsheetItem
`<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">`|`[router-link]`
`<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">`|`[routerLink]`
Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route.


Expand Down
2 changes: 1 addition & 1 deletion modules/angular2/docs/cheatsheet/template-syntax.md
Expand Up @@ -34,7 +34,7 @@ Binds text content to an interpolated string, e.g. "Hello Seabiscuit".

@cheatsheetItem
`<my-cmp [(title)]="name">`|`[(title)]`
Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (title-change)="name=$event">`
Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">`

@cheatsheetItem
`<video #movieplayer ...>
Expand Down
32 changes: 16 additions & 16 deletions modules/angular2/docs/core/01_templates.md
Expand Up @@ -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>
Expand All @@ -383,30 +383,30 @@ 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
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>
```

Expand All @@ -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>
```

Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion modules/angular2/docs/core/02_directives.md
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion modules/angular2/docs/core/10_view.md
Expand Up @@ -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>
```

Expand Down
Expand Up @@ -22,7 +22,7 @@ export class SlicePipeStringExample {
@Component({
selector: 'slice-list-example',
template: `<div>
<li *ng-for="var i of collection | slice:1:3">{{i}}</li>
<li *ngFor="var i of collection | slice:1:3">{{i}}</li>
</div>`
})
export class SlicePipeListExample {
Expand All @@ -33,7 +33,7 @@ export class SlicePipeListExample {
@Component({
selector: 'example-app',
directives: [SlicePipeListExample, SlicePipeStringExample],
template: `
template: `
<h1>SlicePipe Examples</h1>
<slice-list-example></slice-list-example>
<slice-string-example></slice-string-example>
Expand Down
Expand Up @@ -24,8 +24,8 @@ class ControlPanelCmp {
template: `
<h1>Welcome Home!</h1>
<div>
Edit <a [router-link]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
Edit <a [router-link]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
Edit <a [routerLink]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
Edit <a [routerLink]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
</div>
`,
directives: [ROUTER_DIRECTIVES]
Expand Down
Expand Up @@ -34,8 +34,8 @@ class NoteCmp implements CanDeactivate {
template: `
<h1>Your Notes</h1>
<div>
Edit <a [router-link]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
Edit <a [router-link]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
Edit <a [routerLink]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
Edit <a [routerLink]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
</div>
`,
directives: [ROUTER_DIRECTIVES]
Expand Down
Expand Up @@ -25,8 +25,8 @@ class MyCmp implements OnActivate {
template: `
<h1>My App</h1>
<nav>
<a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
<a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
</nav>
<router-outlet></router-outlet>
`,
Expand Down
Expand Up @@ -34,13 +34,13 @@ class MyCmp implements OnDeactivate {
template: `
<h1>My App</h1>
<nav>
<a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
<a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
</nav>
<router-outlet></router-outlet>
<div id="log">
<h2>Log:</h2>
<p *ng-for="#logItem of logService.logs">{{ logItem }}</p>
<p *ngFor="#logItem of logService.logs">{{ logItem }}</p>
</div>
`,
directives: [ROUTER_DIRECTIVES, NgFor]
Expand Down
4 changes: 2 additions & 2 deletions modules/angular2/examples/router/ts/reuse/reuse_example.ts
Expand Up @@ -37,8 +37,8 @@ class MyCmp implements CanReuse,
selector: 'example-app',
template: `
<h1>Say hi to...</h1>
<a [router-link]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
<a [router-link]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
<a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
<a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
Expand Down
4 changes: 2 additions & 2 deletions modules/angular2/http.ts
Expand Up @@ -56,7 +56,7 @@ export {URLSearchParams} from './src/http/url_search_params';
* <div>
* <h1>People</h1>
* <ul>
* <li *ng-for="#person of people">
* <li *ngFor="#person of people">
* {{person.name}}
* </li>
* </ul>
Expand Down Expand Up @@ -186,7 +186,7 @@ export const HTTP_BINDINGS = HTTP_PROVIDERS;
* <div>
* <h1>People</h1>
* <ul>
* <li *ng-for="#person of people">
* <li *ngFor="#person of people">
* {{person.name}}
* </li>
* </ul>
Expand Down
4 changes: 2 additions & 2 deletions modules/angular2/src/common/directives/ng_class.ts
Expand Up @@ -37,7 +37,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
* selector: 'toggle-button',
* inputs: ['isDisabled'],
* template: `
* <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
* <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
* (click)="toggle(!isOn)">
* Click me!
* </div>`,
Expand Down Expand Up @@ -70,7 +70,7 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collecti
* }
* ```
*/
@Directive({selector: '[ng-class]', inputs: ['rawClass: ng-class', 'initialClasses: class']})
@Directive({selector: '[ngClass]', inputs: ['rawClass: ngClass', 'initialClasses: class']})
export class NgClass implements DoCheck, OnDestroy {
private _differ: any;
private _mode: string;
Expand Down
8 changes: 4 additions & 4 deletions modules/angular2/src/common/directives/ng_for.ts
Expand Up @@ -50,16 +50,16 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
*
* # Syntax
*
* - `<li *ng-for="#item of items; #i = index">...</li>`
* - `<li template="ng-for #item of items; #i = index">...</li>`
* - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
* - `<li *ngFor="#item of items; #i = index">...</li>`
* - `<li template="ngFor #item of items; #i = index">...</li>`
* - `<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>`
*
* ### Example
*
* See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
* example.
*/
@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf', 'ngForTemplate']})
@Directive({selector: '[ngFor][ngForOf]', inputs: ['ngForOf', 'ngForTemplate']})
export class NgFor implements DoCheck {
/** @internal */
_ngForOf: any;
Expand Down
12 changes: 6 additions & 6 deletions modules/angular2/src/common/directives/ng_if.ts
Expand Up @@ -4,13 +4,13 @@ import {isBlank} from 'angular2/src/facade/lang';
/**
* Removes or recreates a portion of the DOM tree based on an {expression}.
*
* If the expression assigned to `ng-if` evaluates to a false value then the element
* If the expression assigned to `ngIf` evaluates to a false value then the element
* is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
*
* ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
*
* ```
* <div *ng-if="errorCount > 0" class="error">
* <div *ngIf="errorCount > 0" class="error">
* <!-- Error message displayed when the errorCount property on the current context is greater
* than 0. -->
* {{errorCount}} errors detected
Expand All @@ -19,11 +19,11 @@ import {isBlank} from 'angular2/src/facade/lang';
*
* ### Syntax
*
* - `<div *ng-if="condition">...</div>`
* - `<div template="ng-if condition">...</div>`
* - `<template [ng-if]="condition"><div>...</div></template>`
* - `<div *ngIf="condition">...</div>`
* - `<div template="ngIf condition">...</div>`
* - `<template [ngIf]="condition"><div>...</div></template>`
*/
@Directive({selector: '[ng-if]', inputs: ['ngIf']})
@Directive({selector: '[ngIf]', inputs: ['ngIf']})
export class NgIf {
private _prevCondition: boolean = null;

Expand Down
12 changes: 6 additions & 6 deletions modules/angular2/src/common/directives/ng_style.ts
Expand Up @@ -11,24 +11,24 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
/**
* The `NgStyle` directive changes styles based on a result of expression evaluation.
*
* An expression assigned to the `ng-style` property must evaluate to an object and the
* An expression assigned to the `ngStyle` property must evaluate to an object and the
* corresponding element styles are updated based on changes to this object. Style names to update
* are taken from the object's keys, and values - from the corresponding object's values.
*
* ### Syntax
*
* - `<div [ng-style]="{'font-style': style}"></div>`
* - `<div [ng-style]="styleExp"></div>` - here the `styleExp` must evaluate to an object
* - `<div [ngStyle]="{'font-style': style}"></div>`
* - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object
*
* ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
*
* ```
* import {Component, NgStyle} from 'angular2/angular2';
*
* @Component({
* selector: 'ng-style-example',
* selector: 'ngStyle-example',
* template: `
* <h1 [ng-style]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
* <h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
* Change style of this text!
* </h1>
*
Expand Down Expand Up @@ -58,7 +58,7 @@ import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
* In this example the `font-style`, `font-size` and `font-weight` styles will be updated
* based on the `style` property's value changes.
*/
@Directive({selector: '[ng-style]', inputs: ['rawStyle: ng-style']})
@Directive({selector: '[ngStyle]', inputs: ['rawStyle: ngStyle']})
export class NgStyle implements DoCheck {
/** @internal */
_rawStyle;
Expand Down

0 comments on commit e04d33b

Please sign in to comment.