4acbef19a8
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
121 lines
3.1 KiB
HTML
121 lines
3.1 KiB
HTML
<!-- #docregion -->
|
|
<div *ngIf="phone">
|
|
<div class="phone-images">
|
|
<img [src]="img" class="phone"
|
|
[ngClass]="{selected: img === mainImageUrl}"
|
|
*ngFor="let img of phone.images" />
|
|
</div>
|
|
|
|
<h1>{{phone.name}}</h1>
|
|
|
|
<p>{{phone.description}}</p>
|
|
|
|
<ul class="phone-thumbs">
|
|
<li *ngFor="let img of phone.images">
|
|
<img [src]="img" (click)="setImage(img)" />
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="specs">
|
|
<li>
|
|
<span>Availability and Networks</span>
|
|
<dl>
|
|
<dt>Availability</dt>
|
|
<dd *ngFor="let availability of phone.availability">{{availability}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Battery</span>
|
|
<dl>
|
|
<dt>Type</dt>
|
|
<dd>{{phone.battery?.type}}</dd>
|
|
<dt>Talk Time</dt>
|
|
<dd>{{phone.battery?.talkTime}}</dd>
|
|
<dt>Standby time (max)</dt>
|
|
<dd>{{phone.battery?.standbyTime}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Storage and Memory</span>
|
|
<dl>
|
|
<dt>RAM</dt>
|
|
<dd>{{phone.storage?.ram}}</dd>
|
|
<dt>Internal Storage</dt>
|
|
<dd>{{phone.storage?.flash}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Connectivity</span>
|
|
<dl>
|
|
<dt>Network Support</dt>
|
|
<dd>{{phone.connectivity?.cell}}</dd>
|
|
<dt>WiFi</dt>
|
|
<dd>{{phone.connectivity?.wifi}}</dd>
|
|
<dt>Bluetooth</dt>
|
|
<dd>{{phone.connectivity?.bluetooth}}</dd>
|
|
<dt>Infrared</dt>
|
|
<dd>{{phone.connectivity?.infrared | checkmark}}</dd>
|
|
<dt>GPS</dt>
|
|
<dd>{{phone.connectivity?.gps | checkmark}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Android</span>
|
|
<dl>
|
|
<dt>OS Version</dt>
|
|
<dd>{{phone.android?.os}}</dd>
|
|
<dt>UI</dt>
|
|
<dd>{{phone.android?.ui}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Size and Weight</span>
|
|
<dl>
|
|
<dt>Dimensions</dt>
|
|
<dd *ngFor="let dim of phone.sizeAndWeight?.dimensions">{{dim}}</dd>
|
|
<dt>Weight</dt>
|
|
<dd>{{phone.sizeAndWeight?.weight}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Display</span>
|
|
<dl>
|
|
<dt>Screen size</dt>
|
|
<dd>{{phone.display?.screenSize}}</dd>
|
|
<dt>Screen resolution</dt>
|
|
<dd>{{phone.display?.screenResolution}}</dd>
|
|
<dt>Touch screen</dt>
|
|
<dd>{{phone.display?.touchScreen | checkmark}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Hardware</span>
|
|
<dl>
|
|
<dt>CPU</dt>
|
|
<dd>{{phone.hardware?.cpu}}</dd>
|
|
<dt>USB</dt>
|
|
<dd>{{phone.hardware?.usb}}</dd>
|
|
<dt>Audio / headphone jack</dt>
|
|
<dd>{{phone.hardware?.audioJack}}</dd>
|
|
<dt>FM Radio</dt>
|
|
<dd>{{phone.hardware?.fmRadio | checkmark}}</dd>
|
|
<dt>Accelerometer</dt>
|
|
<dd>{{phone.hardware?.accelerometer | checkmark}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Camera</span>
|
|
<dl>
|
|
<dt>Primary</dt>
|
|
<dd>{{phone.camera?.primary}}</dd>
|
|
<dt>Features</dt>
|
|
<dd>{{phone.camera?.features?.join(', ')}}</dd>
|
|
</dl>
|
|
</li>
|
|
<li>
|
|
<span>Additional Features</span>
|
|
<dd>{{phone.additionalFeatures}}</dd>
|
|
</li>
|
|
</ul>
|
|
</div>
|