diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css index a556b81138..4c72bf954d 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css @@ -12,4 +12,4 @@ img {height: 100px;} table td { padding: 4px; border: 1px solid #e0e0e0; -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts index d15652f5c9..6c19c4c4d6 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts @@ -37,4 +37,4 @@ export class AppComponent { this.movies = movieService.getMovies(); this.movie = this.movies[0]; } -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts index d95d797ee2..f9746ceef9 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts @@ -11,4 +11,4 @@ export class StringSafeDatePipe extends DatePipe { return super.transform(value, args); } } -// #enddocregion date-pipe \ No newline at end of file +// #enddocregion date-pipe diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css index 70b0405200..8476635e12 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css @@ -54,4 +54,4 @@ table tr:last-child td:last-child { -moz-border-radius-bottomright:3px; -webkit-border-bottom-right-radius:3px; border-bottom-right-radius:3px; -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html index d89cc0e3fb..59edc28556 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html @@ -75,4 +75,4 @@

- \ No newline at end of file + diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts index a4a9c69e41..73b55af51f 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts @@ -45,4 +45,4 @@ export class MovieListComponent { } // #docregion class } -// #enddocregion class \ No newline at end of file +// #enddocregion class diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts index 2b6538d985..b601d9274f 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts @@ -40,4 +40,4 @@ export class MovieService { } ]; } -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts index f7e8c0a7db..0e6f321520 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts @@ -9,4 +9,4 @@ export interface IMovie { releaseDate: string; starRating: number; title: string; -} \ No newline at end of file +} diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json b/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json index ad554ad166..4f3ebce61d 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json @@ -6,4 +6,4 @@ "!**/*.[1].*" ], "tags":["cookbook"] -} \ No newline at end of file +} diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade index 9643d0cf6e..85a8cf1749 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -12,7 +12,7 @@ a(id="top") This chapter covers * [Template Basics](#template-basics) - binding and local variables - * [Template Directives](#template-directives) - built-in directives `ngIf` and ` `ngClass` + * [Template Directives](#template-directives) - built-in directives `ngIf` and `ngClass` * [Filters/Pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2 @@ -71,7 +71,7 @@ table(width="100%") :marked To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters. - In this example, we filter the `mpaa` property to uppercase. + In this example, we filter the `title` property to uppercase. td :marked ### Pipes @@ -170,7 +170,7 @@ table(width="100%") We can specify multiple classes as shown in the second example. - Angular 2 also has **class binding**, which is good way to add or remove a single class + Angular 2 also has **class binding**, which is a good way to add or remove a single class as shown in the third example. For more information see [Template Syntax](../guide/template-syntax.html#other-bindings). @@ -283,7 +283,7 @@ table(width="100%") In Angular 1, the `ng-if` directive removes or recreates a portion of the DOM based on an expression. If the expression is false, the element is removed from the DOM. - In this example, the `table` element is removed from the DOM unless the `movies` array has a length. + In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero. td :marked ### *ngIf @@ -515,7 +515,6 @@ table(width="100%") td :marked ### none - :marked There is no comparable pipe in Angular 2 for performance reasons. Filtering should be coded in the component. Consider building a custom pipe if the same filtering code @@ -540,16 +539,19 @@ table(width="100%") :marked ### limitTo code-example. - <tr ng-repeat="movie in movieList | limitTo: 2"> + <tr ng-repeat="movie in movieList | limitTo:2:0"> :marked - Selects the defined number of items from the collection. + Selects up to the first parameter (2) number of items from the collection + starting (optionally) at the beginning index (0). td :marked ### slice +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'slice')(format=".") :marked - The first parameter of the `SlicePipe` is the starting index; the second is the limit. - As in Angular 1, performance may improve if this operation is coded in the component. + The `SlicePipe` does the same thing but the *order of the parameters is reversed* in keeping + with the JavaScript `Slice` method. + The first parameter is the starting index; the second is the limit. + As in Angular 1, performance may improve if we code this operation within the component instead. tr(style=top) td :marked @@ -624,6 +626,7 @@ table(width="100%") ### IIFE code-example. (function () { + ... }()); :marked In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code.