closes #1538 This is a major reorganization of the Upgrade guide. * Compatible with the new version of the AngularJS 1 PhoneCat tutorial. * No longer switching Angular 1 code to SystemJS for PhoneCat, to allow beginning Angular 2 migration with fewer preparation steps. SystemJS switch now happens simultaneously with upgrade. (This is based on input from @joeeames) * Testing moved to an appendix to make the main narrative shorter and easier to follow. * Use component methods to do phone filtering and ordering instead of introducing pipes to replace filterFilter and orderByFilter. * Cover issue with camelCase inputs on downgraded components. For authors: * All examples now fully integrated with the example boilerplate. Uses the same Angular 2 version as all other guides. E2E tests are executed along with all the others. * Reduced number of PhoneCat versions from five to three. * Each directory has a README explaining how to run it and what might be peculiar about it. Closes angular/angular#8622 Relates to angular/angular.js#14416 Relates to angular/angular-phonecat#326
41 lines
1.0 KiB
HTML
41 lines
1.0 KiB
HTML
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<!--Sidebar content-->
|
|
|
|
<!-- #docregion controls -->
|
|
<p>
|
|
Search:
|
|
<input [(ngModel)]="query" />
|
|
</p>
|
|
|
|
<p>
|
|
Sort by:
|
|
<select [(ngModel)]="orderProp">
|
|
<option value="name">Alphabetical</option>
|
|
<option value="age">Newest</option>
|
|
</select>
|
|
</p>
|
|
<!-- #enddocregion controls -->
|
|
|
|
</div>
|
|
<div class="col-md-10">
|
|
<!--Body content-->
|
|
|
|
<!-- #docregion list -->
|
|
<ul class="phones">
|
|
<li *ngFor="let phone of getPhones()"
|
|
class="thumbnail phone-list-item">
|
|
<a [routerLink]="['/Phone', {phoneId: phone.id}]" class="thumb">
|
|
<img [src]="phone.imageUrl" [alt]="phone.name" />
|
|
</a>
|
|
<a [routerLink]="['/Phone', {phoneId: phone.id}]" class="name">{{phone.name}}</a>
|
|
<p>{{phone.snippet}}</p>
|
|
</li>
|
|
</ul>
|
|
<!-- #enddocregion list -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|