docs(cb-a1-a2): fixes suggested by Georgios Kalpakas + add newlines
closes #885
This commit is contained in:
parent
524ff05373
commit
5a5122a7e7
@ -12,4 +12,4 @@ img {height: 100px;}
|
|||||||
table td {
|
table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
}
|
}
|
||||||
|
@ -37,4 +37,4 @@ export class AppComponent {
|
|||||||
this.movies = movieService.getMovies();
|
this.movies = movieService.getMovies();
|
||||||
this.movie = this.movies[0];
|
this.movie = this.movies[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,4 +11,4 @@ export class StringSafeDatePipe extends DatePipe {
|
|||||||
return super.transform(value, args);
|
return super.transform(value, args);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// #enddocregion date-pipe
|
// #enddocregion date-pipe
|
||||||
|
@ -54,4 +54,4 @@ table tr:last-child td:last-child {
|
|||||||
-moz-border-radius-bottomright:3px;
|
-moz-border-radius-bottomright:3px;
|
||||||
-webkit-border-bottom-right-radius:3px;
|
-webkit-border-bottom-right-radius:3px;
|
||||||
border-bottom-right-radius:3px;
|
border-bottom-right-radius:3px;
|
||||||
}
|
}
|
||||||
|
@ -75,4 +75,4 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -45,4 +45,4 @@ export class MovieListComponent {
|
|||||||
}
|
}
|
||||||
// #docregion class
|
// #docregion class
|
||||||
}
|
}
|
||||||
// #enddocregion class
|
// #enddocregion class
|
||||||
|
@ -40,4 +40,4 @@ export class MovieService {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,4 +9,4 @@ export interface IMovie {
|
|||||||
releaseDate: string;
|
releaseDate: string;
|
||||||
starRating: number;
|
starRating: number;
|
||||||
title: string;
|
title: string;
|
||||||
}
|
}
|
||||||
|
@ -6,4 +6,4 @@
|
|||||||
"!**/*.[1].*"
|
"!**/*.[1].*"
|
||||||
],
|
],
|
||||||
"tags":["cookbook"]
|
"tags":["cookbook"]
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ a(id="top")
|
|||||||
This chapter covers
|
This chapter covers
|
||||||
* [Template Basics](#template-basics) - binding and local variables
|
* [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
|
* [Filters/Pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2
|
||||||
|
|
||||||
@ -71,7 +71,7 @@ table(width="100%")
|
|||||||
:marked
|
:marked
|
||||||
To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters.
|
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
|
td
|
||||||
:marked
|
:marked
|
||||||
### Pipes
|
### Pipes
|
||||||
@ -170,7 +170,7 @@ table(width="100%")
|
|||||||
|
|
||||||
We can specify multiple classes as shown in the second example.
|
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.
|
as shown in the third example.
|
||||||
|
|
||||||
For more information see [Template Syntax](../guide/template-syntax.html#other-bindings).
|
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
|
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.
|
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
|
td
|
||||||
:marked
|
:marked
|
||||||
### *ngIf
|
### *ngIf
|
||||||
@ -515,7 +515,6 @@ table(width="100%")
|
|||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
### none
|
### none
|
||||||
:marked
|
|
||||||
There is no comparable pipe in Angular 2 for performance reasons.
|
There is no comparable pipe in Angular 2 for performance reasons.
|
||||||
Filtering should be coded in the component.
|
Filtering should be coded in the component.
|
||||||
Consider building a custom pipe if the same filtering code
|
Consider building a custom pipe if the same filtering code
|
||||||
@ -540,16 +539,19 @@ table(width="100%")
|
|||||||
:marked
|
:marked
|
||||||
### limitTo
|
### limitTo
|
||||||
code-example.
|
code-example.
|
||||||
<tr ng-repeat="movie in movieList | limitTo: 2">
|
<tr ng-repeat="movie in movieList | limitTo:2:0">
|
||||||
:marked
|
: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
|
td
|
||||||
:marked
|
:marked
|
||||||
### slice
|
### slice
|
||||||
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'slice')(format=".")
|
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'slice')(format=".")
|
||||||
:marked
|
:marked
|
||||||
The first parameter of the `SlicePipe` is the starting index; the second is the limit.
|
The `SlicePipe` does the same thing but the *order of the parameters is reversed* in keeping
|
||||||
As in Angular 1, performance may improve if this operation is coded in the component.
|
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)
|
tr(style=top)
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
@ -624,6 +626,7 @@ table(width="100%")
|
|||||||
### IIFE
|
### IIFE
|
||||||
code-example.
|
code-example.
|
||||||
(function () {
|
(function () {
|
||||||
|
...
|
||||||
}());
|
}());
|
||||||
:marked
|
:marked
|
||||||
In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code.
|
In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user