docs(upgrade) add PhoneCat upgrade tutorial
This commit is contained in:
Tero Parviainen
Naomi Black
parent
ce0d1c0319
commit
472c9d98c7
|
|
@ -0,0 +1,6 @@
|
|||
Each subdirectory here is a version of the PhoneCat app.
|
||||
|
||||
Each version is fully functional, but omits the JSON data and image
|
||||
files in the interest of keeping things clean. To run each app
|
||||
in its full form, copy the `img` and `phones` directories from
|
||||
https://github.com/angular/angular-phonecat/tree/master/app under `app`.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"directory": "app/bower_components"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
app/**/*.js
|
||||
app/**/*.js.map
|
||||
test/unit/**/*.js
|
||||
test/unit/**/*.js.map
|
||||
test/e2e/**/*.js
|
||||
test/e2e/**/*.js.map
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* animations css stylesheet
|
||||
*/
|
||||
|
||||
/* animate ngRepeat in phone listing */
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-leave,
|
||||
.phone-listing.ng-move {
|
||||
-webkit-transition: 0.5s linear all;
|
||||
-moz-transition: 0.5s linear all;
|
||||
-o-transition: 0.5s linear all;
|
||||
transition: 0.5s linear all;
|
||||
}
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-move {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-move.ng-move-active,
|
||||
.phone-listing.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave {
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* cross fading between routes with ngView */
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter,
|
||||
.view-frame.ng-leave {
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter {
|
||||
-webkit-animation: 0.5s fade-in;
|
||||
-moz-animation: 0.5s fade-in;
|
||||
-o-animation: 0.5s fade-in;
|
||||
animation: 0.5s fade-in;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.view-frame.ng-leave {
|
||||
-webkit-animation: 0.5s fade-out;
|
||||
-moz-animation: 0.5s fade-out;
|
||||
-o-animation: 0.5s fade-out;
|
||||
animation: 0.5s fade-out;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-moz-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-webkit-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/* app css stylesheet */
|
||||
|
||||
body {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.phone-images {
|
||||
background-color: white;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.phones {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
float: left;
|
||||
margin: -0.5em 1em 1.5em 0;
|
||||
padding-bottom: 1em;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.phones li {
|
||||
clear: both;
|
||||
height: 115px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
/** Detail View **/
|
||||
img.phone {
|
||||
float: left;
|
||||
margin-right: 3em;
|
||||
margin-bottom: 2em;
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.phone:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
ul.phone-thumbs {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.phone-thumbs li {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
ul.phone-thumbs img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
ul.phone-thumbs img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
ul.specs {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.specs > li{
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
ul.specs > li > span{
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
ul.specs dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Google Phone Gallery</title>
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
<!-- #docregion scripts -->
|
||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/angular/angular.js"></script>
|
||||
<script src="bower_components/angular-animate/angular-animate.js"></script>
|
||||
<script src="bower_components/angular-route/angular-route.js"></script>
|
||||
<script src="bower_components/angular-resource/angular-resource.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {'js': {defaultExtension: 'js'}}
|
||||
});
|
||||
System.import('js/app.module');
|
||||
</script>
|
||||
<!-- #enddocregion scripts -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="view-container">
|
||||
<div ng-view class="view-frame"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// #docregion pre-bootstrap
|
||||
// #docregion typings
|
||||
/// <reference path="../../typings/angularjs/angular.d.ts" />
|
||||
/// <reference path="../../typings/angularjs/angular-resource.d.ts" />
|
||||
/// <reference path="../../typings/angularjs/angular-route.d.ts" />
|
||||
// #enddocregion
|
||||
|
||||
import core from './core/core.module';
|
||||
import phoneList from './phone_list/phone_list.module';
|
||||
import phoneDetail from './phone_detail/phone_detail.module';
|
||||
|
||||
angular.module('phonecatApp', [
|
||||
'ngRoute',
|
||||
core.name,
|
||||
phoneList.name,
|
||||
phoneDetail.name
|
||||
]).config(configure);
|
||||
|
||||
configure.$inject = ['$routeProvider'];
|
||||
|
||||
function configure($routeProvider) {
|
||||
$routeProvider.
|
||||
when('/phones', {
|
||||
templateUrl: 'js/phone_list/phone_list.html',
|
||||
controller: 'PhoneListCtrl',
|
||||
controllerAs: 'vm'
|
||||
}).
|
||||
when('/phones/:phoneId', {
|
||||
templateUrl: 'js/phone_detail/phone_detail.html',
|
||||
controller: 'PhoneDetailCtrl',
|
||||
controllerAs: 'vm'
|
||||
}).
|
||||
otherwise({
|
||||
redirectTo: '/phones'
|
||||
});
|
||||
}
|
||||
// #enddocregion pre-bootstrap
|
||||
// #docregion bootstrap
|
||||
angular.bootstrap(document.documentElement, ['phonecatApp']);
|
||||
// #enddocregion bootstrap
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// #docregion
|
||||
export default function checkmarkFilter() {
|
||||
return function(input:boolean):string {
|
||||
return input ? '\u2713' : '\u2718';
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion
|
||||
import Phone from './phone.factory';
|
||||
import checkmarkFilter from './checkmark.filter';
|
||||
|
||||
export default angular.module('phonecat.core', [
|
||||
'ngResource'
|
||||
])
|
||||
.factory('Phone', Phone)
|
||||
.filter('checkmark', checkmarkFilter);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// #docregion
|
||||
Phone.$inject = ['$resource'];
|
||||
|
||||
function Phone($resource) {
|
||||
return $resource('phones/:phoneId.json', {}, {
|
||||
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
|
||||
});
|
||||
}
|
||||
|
||||
export default Phone;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// #docregion
|
||||
interface PhoneRouteParams {
|
||||
phoneId: string
|
||||
}
|
||||
|
||||
class PhoneDetailCtrl {
|
||||
phone:any;
|
||||
mainImageUrl:string;
|
||||
constructor($routeParams:PhoneRouteParams, Phone) {
|
||||
this.phone = Phone.get({phoneId: $routeParams.phoneId}, (phone) =>
|
||||
this.mainImageUrl = phone.images[0]
|
||||
);
|
||||
}
|
||||
|
||||
setImage(url:string) {
|
||||
this.mainImageUrl = url;
|
||||
}
|
||||
}
|
||||
|
||||
PhoneDetailCtrl.$inject = ['$routeParams', 'Phone'];
|
||||
|
||||
export default PhoneDetailCtrl;
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<div class="phone-images">
|
||||
<img ng-src="{{img}}"
|
||||
class="phone"
|
||||
ng-repeat="img in vm.phone.images"
|
||||
ng-class="{active: vm.mainImageUrl==img}">
|
||||
</div>
|
||||
|
||||
<h1>{{vm.phone.name}}</h1>
|
||||
|
||||
<p>{{vm.phone.description}}</p>
|
||||
|
||||
<ul class="phone-thumbs">
|
||||
<li ng-repeat="img in vm.phone.images">
|
||||
<img ng-src="{{img}}" ng-click="vm.setImage(img)">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="specs">
|
||||
<li>
|
||||
<span>Availability and Networks</span>
|
||||
<dl>
|
||||
<dt>Availability</dt>
|
||||
<dd ng-repeat="availability in vm.phone.availability">{{availability}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Battery</span>
|
||||
<dl>
|
||||
<dt>Type</dt>
|
||||
<dd>{{vm.phone.battery.type}}</dd>
|
||||
<dt>Talk Time</dt>
|
||||
<dd>{{vm.phone.battery.talkTime}}</dd>
|
||||
<dt>Standby time (max)</dt>
|
||||
<dd>{{vm.phone.battery.standbyTime}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Storage and Memory</span>
|
||||
<dl>
|
||||
<dt>RAM</dt>
|
||||
<dd>{{vm.phone.storage.ram}}</dd>
|
||||
<dt>Internal Storage</dt>
|
||||
<dd>{{vm.phone.storage.flash}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Connectivity</span>
|
||||
<dl>
|
||||
<dt>Network Support</dt>
|
||||
<dd>{{vm.phone.connectivity.cell}}</dd>
|
||||
<dt>WiFi</dt>
|
||||
<dd>{{vm.phone.connectivity.wifi}}</dd>
|
||||
<dt>Bluetooth</dt>
|
||||
<dd>{{vm.phone.connectivity.bluetooth}}</dd>
|
||||
<dt>Infrared</dt>
|
||||
<dd>{{vm.phone.connectivity.infrared | checkmark}}</dd>
|
||||
<dt>GPS</dt>
|
||||
<dd>{{vm.phone.connectivity.gps | checkmark}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Android</span>
|
||||
<dl>
|
||||
<dt>OS Version</dt>
|
||||
<dd>{{vm.phone.android.os}}</dd>
|
||||
<dt>UI</dt>
|
||||
<dd>{{vm.phone.android.ui}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Size and Weight</span>
|
||||
<dl>
|
||||
<dt>Dimensions</dt>
|
||||
<dd ng-repeat="dim in vm.phone.sizeAndWeight.dimensions">{{dim}}</dd>
|
||||
<dt>Weight</dt>
|
||||
<dd>{{vm.phone.sizeAndWeight.weight}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Display</span>
|
||||
<dl>
|
||||
<dt>Screen size</dt>
|
||||
<dd>{{vm.phone.display.screenSize}}</dd>
|
||||
<dt>Screen resolution</dt>
|
||||
<dd>{{vm.phone.display.screenResolution}}</dd>
|
||||
<dt>Touch screen</dt>
|
||||
<dd>{{vm.phone.display.touchScreen | checkmark}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Hardware</span>
|
||||
<dl>
|
||||
<dt>CPU</dt>
|
||||
<dd>{{vm.phone.hardware.cpu}}</dd>
|
||||
<dt>USB</dt>
|
||||
<dd>{{vm.phone.hardware.usb}}</dd>
|
||||
<dt>Audio / headphone jack</dt>
|
||||
<dd>{{vm.phone.hardware.audioJack}}</dd>
|
||||
<dt>FM Radio</dt>
|
||||
<dd>{{vm.phone.hardware.fmRadio | checkmark}}</dd>
|
||||
<dt>Accelerometer</dt>
|
||||
<dd>{{vm.phone.hardware.accelerometer | checkmark}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Camera</span>
|
||||
<dl>
|
||||
<dt>Primary</dt>
|
||||
<dd>{{vm.phone.camera.primary}}</dd>
|
||||
<dt>Features</dt>
|
||||
<dd>{{vm.phone.camera.features.join(', ')}}</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<span>Additional Features</span>
|
||||
<dd>{{vm.phone.additionalFeatures}}</dd>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// #docregion
|
||||
import PhoneDetailCtrl from './phone_detail.controller';
|
||||
|
||||
export default angular.module('phonecat.detail', [
|
||||
'ngRoute',
|
||||
'phonecat.core'
|
||||
])
|
||||
.controller('PhoneDetailCtrl', PhoneDetailCtrl);
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// #docregion
|
||||
class PhoneListCtrl {
|
||||
phones:any[];
|
||||
orderProp:string;
|
||||
query:string;
|
||||
constructor(Phone) {
|
||||
this.phones = Phone.query();
|
||||
this.orderProp = 'age';
|
||||
}
|
||||
}
|
||||
|
||||
PhoneListCtrl.$inject = ['Phone'];
|
||||
|
||||
export default PhoneListCtrl;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<!--Sidebar content-->
|
||||
|
||||
Search: <input ng-model="vm.query">
|
||||
Sort by:
|
||||
<select ng-model="vm.orderProp">
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="age">Newest</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<!--Body content-->
|
||||
|
||||
<ul class="phones">
|
||||
<li ng-repeat="phone in vm.phones | filter:vm.query | orderBy:vm.orderProp"
|
||||
class="thumbnail phone-listing">
|
||||
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
|
||||
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
|
||||
<p>{{phone.snippet}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// #docregion
|
||||
import PhoneListCtrl from './phone_list.controller';
|
||||
|
||||
export default angular.module('phonecat.list', ['phonecat.core'])
|
||||
.controller('PhoneListCtrl', PhoneListCtrl);
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "angular-phonecat",
|
||||
"description": "A starter project for AngularJS",
|
||||
"version": "0.0.0",
|
||||
"homepage": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
'use strict';
|
||||
|
||||
/* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
|
||||
// #docregion declares
|
||||
declare var browser:any, element:any, by:any;
|
||||
// #enddocregion declares
|
||||
|
||||
describe('PhoneCat App', function() {
|
||||
|
||||
it('should redirect index.html to index.html#/phones', function() {
|
||||
browser.get('app/index.html');
|
||||
browser.getLocationAbsUrl().then(function(url) {
|
||||
expect(url).toEqual('/phones');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Phone list view', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
browser.get('app/index.html#/phones');
|
||||
});
|
||||
|
||||
|
||||
it('should filter the phone list as a user types into the search box', function() {
|
||||
var phoneList = element.all(by.repeater('phone in vm.phones'));
|
||||
var query = element(by.model('vm.query'));
|
||||
|
||||
expect(phoneList.count()).toBe(20);
|
||||
|
||||
query.sendKeys('nexus');
|
||||
expect(phoneList.count()).toBe(1);
|
||||
|
||||
query.clear();
|
||||
query.sendKeys('motorola');
|
||||
expect(phoneList.count()).toBe(8);
|
||||
});
|
||||
|
||||
|
||||
it('should be possible to control phone order via the drop down select box', function() {
|
||||
|
||||
var phoneNameColumn = element.all(by.repeater('phone in vm.phones').column('phone.name'));
|
||||
var query = element(by.model('vm.query'));
|
||||
|
||||
function getNames() {
|
||||
return phoneNameColumn.map(function(elm) {
|
||||
return elm.getText();
|
||||
});
|
||||
}
|
||||
|
||||
query.sendKeys('tablet'); //let's narrow the dataset to make the test assertions shorter
|
||||
|
||||
expect(getNames()).toEqual([
|
||||
"Motorola XOOM\u2122 with Wi-Fi",
|
||||
"MOTOROLA XOOM\u2122"
|
||||
]);
|
||||
|
||||
element(by.model('vm.orderProp')).element(by.css('option[value="name"]')).click();
|
||||
|
||||
expect(getNames()).toEqual([
|
||||
"MOTOROLA XOOM\u2122",
|
||||
"Motorola XOOM\u2122 with Wi-Fi"
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
it('should render phone specific links', function() {
|
||||
var query = element(by.model('vm.query'));
|
||||
query.sendKeys('nexus');
|
||||
element.all(by.css('.phones li a')).first().click();
|
||||
browser.getLocationAbsUrl().then(function(url) {
|
||||
expect(url).toEqual('/phones/nexus-s');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Phone detail view', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
browser.get('app/index.html#/phones/nexus-s');
|
||||
});
|
||||
|
||||
|
||||
it('should display nexus-s page', function() {
|
||||
expect(element(by.binding('vm.phone.name')).getText()).toBe('Nexus S');
|
||||
});
|
||||
|
||||
|
||||
it('should display the first phone image as the main phone image', function() {
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
||||
});
|
||||
|
||||
|
||||
it('should swap main image if a thumbnail image is clicked on', function() {
|
||||
element(by.css('.phone-thumbs li:nth-child(3) img')).click();
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
|
||||
|
||||
element(by.css('.phone-thumbs li:nth-child(1) img')).click();
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// #docregion
|
||||
declare module jasmine {
|
||||
interface Matchers {
|
||||
toEqualData(expected: any):boolean;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// #docregion
|
||||
// Cancel Karma's synchronous start,
|
||||
// we will call `__karma__.start()` later, once all the specs are loaded.
|
||||
__karma__.loaded = function() {};
|
||||
|
||||
System.config({
|
||||
packages: {
|
||||
'base/app/js': {
|
||||
defaultExtension: false,
|
||||
format: 'register',
|
||||
map: Object.keys(window.__karma__.files).
|
||||
filter(onlyAppFiles).
|
||||
reduce(function createPathRecords(pathsMapping, appPath) {
|
||||
// creates local module name mapping to global path with karma's fingerprint in path, e.g.:
|
||||
// './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
|
||||
var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
|
||||
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
|
||||
return pathsMapping;
|
||||
}, {})
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all(
|
||||
Object.keys(window.__karma__.files) // All files served by Karma.
|
||||
.filter(onlySpecFiles)
|
||||
.map(function(moduleName) {
|
||||
// loads all spec files via their global module names
|
||||
return System.import(moduleName);
|
||||
}))
|
||||
.then(function() {
|
||||
__karma__.start();
|
||||
}, function(error) {
|
||||
__karma__.error(error.stack || error);
|
||||
});
|
||||
|
||||
function onlyAppFiles(filePath) {
|
||||
return /^\/base\/app\/js\/.*\.js$/.test(filePath)
|
||||
}
|
||||
|
||||
function onlySpecFiles(path) {
|
||||
return /\.spec\.js$/.test(path);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
|
||||
specs: [
|
||||
'e2e/*.js'
|
||||
],
|
||||
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
|
||||
chromeOnly: true,
|
||||
|
||||
baseUrl: 'http://localhost:8000/',
|
||||
|
||||
framework: 'jasmine',
|
||||
|
||||
jasmineNodeOpts: {
|
||||
defaultTimeoutInterval: 30000
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
// #docregion
|
||||
/// <reference path="../typings/jasmine/jasmine.d.ts" />
|
||||
/// <reference path="../typings/angularjs/angular-mocks.d.ts" />
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// #docregion top
|
||||
import '../../app/js/core/core.module';
|
||||
// #enddocregion top
|
||||
|
||||
describe('checkmarkFilter', function() {
|
||||
|
||||
beforeEach(angular.mock.module('phonecat.core'));
|
||||
|
||||
it('should convert boolean values to unicode checkmark or cross',
|
||||
inject(function(checkmarkFilter) {
|
||||
expect(checkmarkFilter(true)).toBe('\u2713');
|
||||
expect(checkmarkFilter(false)).toBe('\u2718');
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// #docregion top
|
||||
import '../../app/js/core/core.module';
|
||||
// #enddocregion top
|
||||
|
||||
describe('phoneFactory', function() {
|
||||
|
||||
// load modules
|
||||
beforeEach(angular.mock.module('phonecat.core'));
|
||||
|
||||
// Test service availability
|
||||
it('check the existence of Phone factory', inject(function(Phone) {
|
||||
expect(Phone).toBeDefined();
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// #docregion top
|
||||
import '../../app/js/phone_detail/phone_detail.module';
|
||||
// #enddocregion top
|
||||
|
||||
describe('PhoneDetailCtrl', function(){
|
||||
var scope, $httpBackend, ctrl,
|
||||
xyzPhoneData = function() {
|
||||
return {
|
||||
name: 'phone xyz',
|
||||
images: ['image/url1.png', 'image/url2.png']
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(angular.mock.module('phonecat.detail'));
|
||||
|
||||
beforeEach(function(){
|
||||
jasmine.addMatchers({
|
||||
toEqualData: function(util, customEqualityTesters) {
|
||||
return {
|
||||
compare: function(actual, expected) {
|
||||
return {pass: angular.equals(actual, expected)};
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
|
||||
$httpBackend = _$httpBackend_;
|
||||
$httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
|
||||
|
||||
$routeParams.phoneId = 'xyz';
|
||||
scope = $rootScope.$new();
|
||||
ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
|
||||
}));
|
||||
|
||||
|
||||
it('should fetch phone detail', function() {
|
||||
expect(ctrl.phone).toEqualData({});
|
||||
$httpBackend.flush();
|
||||
|
||||
expect(ctrl.phone).toEqualData(xyzPhoneData());
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// #docregion top
|
||||
import '../../app/js/phone_list/phone_list.module';
|
||||
// #enddocregion top
|
||||
|
||||
describe('PhoneListCtrl', function(){
|
||||
var scope, ctrl, $httpBackend;
|
||||
|
||||
beforeEach(angular.mock.module('phonecat.list'));
|
||||
|
||||
beforeEach(function(){
|
||||
jasmine.addMatchers({
|
||||
toEqualData: function(util, customEqualityTesters) {
|
||||
return {
|
||||
compare: function(actual, expected) {
|
||||
return {pass: angular.equals(actual, expected)};
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
|
||||
$httpBackend = _$httpBackend_;
|
||||
$httpBackend.expectGET('phones/phones.json').
|
||||
respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
|
||||
|
||||
scope = $rootScope.$new();
|
||||
ctrl = $controller('PhoneListCtrl', {$scope: scope});
|
||||
}));
|
||||
|
||||
|
||||
it('should create "phones" model with 2 phones fetched from xhr', function() {
|
||||
expect(ctrl.phones).toEqualData([]);
|
||||
$httpBackend.flush();
|
||||
|
||||
expect(ctrl.phones).toEqualData(
|
||||
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
|
||||
});
|
||||
|
||||
|
||||
it('should set the default value of orderProp model', function() {
|
||||
expect(ctrl.orderProp).toBe('age');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"directory": "app/bower_components"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
app/**/*.js
|
||||
app/**/*.js.map
|
||||
test/unit/**/*.js
|
||||
test/unit/**/*.js.map
|
||||
test/e2e/**/*.js
|
||||
test/e2e/**/*.js.map
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* animations css stylesheet
|
||||
*/
|
||||
|
||||
/* animate ngRepeat in phone listing */
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-leave,
|
||||
.phone-listing.ng-move {
|
||||
-webkit-transition: 0.5s linear all;
|
||||
-moz-transition: 0.5s linear all;
|
||||
-o-transition: 0.5s linear all;
|
||||
transition: 0.5s linear all;
|
||||
}
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-move {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-move.ng-move-active,
|
||||
.phone-listing.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave {
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* cross fading between routes with ngView */
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter,
|
||||
.view-frame.ng-leave {
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter {
|
||||
-webkit-animation: 0.5s fade-in;
|
||||
-moz-animation: 0.5s fade-in;
|
||||
-o-animation: 0.5s fade-in;
|
||||
animation: 0.5s fade-in;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.view-frame.ng-leave {
|
||||
-webkit-animation: 0.5s fade-out;
|
||||
-moz-animation: 0.5s fade-out;
|
||||
-o-animation: 0.5s fade-out;
|
||||
animation: 0.5s fade-out;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-moz-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-webkit-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/* app css stylesheet */
|
||||
|
||||
body {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.phone-images {
|
||||
background-color: white;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.phones {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
float: left;
|
||||
margin: -0.5em 1em 1.5em 0;
|
||||
padding-bottom: 1em;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.phones li {
|
||||
clear: both;
|
||||
height: 115px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
/** Detail View **/
|
||||
img.phone {
|
||||
float: left;
|
||||
margin-right: 3em;
|
||||
margin-bottom: 2em;
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.phone:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
ul.phone-thumbs {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.phone-thumbs li {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
ul.phone-thumbs img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
ul.phone-thumbs img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
ul.specs {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.specs > li{
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
ul.specs > li > span{
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
ul.specs dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Google Phone Gallery</title>
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/angular/angular.js"></script>
|
||||
<script src="bower_components/angular-animate/angular-animate.js"></script>
|
||||
<script src="bower_components/angular-route/angular-route.js"></script>
|
||||
<script src="bower_components/angular-resource/angular-resource.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
'js': {
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
System.import('js/app.module');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="view-container">
|
||||
<div ng-view class="view-frame"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/// <reference path="../../typings/angularjs/angular.d.ts" />
|
||||
/// <reference path="../../typings/angularjs/angular-resource.d.ts" />
|
||||
/// <reference path="../../typings/angularjs/angular-route.d.ts" />
|
||||
|
||||
// #docregion adapter-import
|
||||
import {UpgradeAdapter} from 'angular2/upgrade';
|
||||
// #enddocregion adapter-import
|
||||
// #docregion adapter-state-import
|
||||
import upgradeAdapter from './core/upgrade_adapter';
|
||||
// #enddocregion adapter-state-import
|
||||
// #docregion http-import
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
// #enddocregion http-import
|
||||
import core from './core/core.module';
|
||||
import phoneList from './phone_list/phone_list.module';
|
||||
import phoneDetail from './phone_detail/phone_detail.module';
|
||||
|
||||
upgradeAdapter.addProvider(HTTP_PROVIDERS);
|
||||
// #docregion upgrade-route-params
|
||||
upgradeAdapter.upgradeNg1Provider('$routeParams');
|
||||
// #enddocregion
|
||||
angular.module('phonecatApp', [
|
||||
'ngRoute',
|
||||
core.name,
|
||||
phoneList.name,
|
||||
phoneDetail.name
|
||||
]).config(configure);
|
||||
|
||||
configure.$inject = ['$routeProvider'];
|
||||
|
||||
function configure($routeProvider) {
|
||||
// #docregion list-route
|
||||
$routeProvider.
|
||||
when('/phones', {
|
||||
template: '<pc-phone-list></pc-phone-list>'
|
||||
}).
|
||||
// #enddocregion list-route
|
||||
// #docregion detail-route
|
||||
when('/phones/:phoneId', {
|
||||
template: '<pc-phone-detail></pc-phone-detail>'
|
||||
}).
|
||||
// #enddocregion detail-route
|
||||
otherwise({
|
||||
redirectTo: '/phones'
|
||||
});
|
||||
}
|
||||
|
||||
// #docregion app-bootstrap
|
||||
upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
|
||||
// #enddocregion app-bootstrap
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
|
||||
@Pipe({name: 'checkmark'})
|
||||
export class CheckmarkPipe {
|
||||
transform(input:string): string {
|
||||
return input ? '\u2713' : '\u2718';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
// #docregion full
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Http, Response} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
// #docregion phone-interface
|
||||
export interface Phone {
|
||||
name: string;
|
||||
snippet: string;
|
||||
images: string[];
|
||||
}
|
||||
// #enddocregion phone-interface
|
||||
|
||||
// #docregion fullclass
|
||||
// #docregion class
|
||||
@Injectable()
|
||||
export class Phones {
|
||||
// #enddocregion class
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
query():Observable<Phone[]> {
|
||||
return this.http.get(`phones/phones.json`)
|
||||
.map((res:Response) => res.json());
|
||||
}
|
||||
|
||||
get(id: string):Observable<Phone> {
|
||||
return this.http.get(`phones/${id}.json`)
|
||||
.map((res:Response) => res.json());
|
||||
}
|
||||
|
||||
// #docregion class
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion fullclass
|
||||
// #docregion full
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// #docregion
|
||||
import {Phones} from './Phones';
|
||||
import upgradeAdapter from './upgrade_adapter';
|
||||
|
||||
upgradeAdapter.addProvider(Phones);
|
||||
|
||||
export default angular.module('phonecat.core', [])
|
||||
.factory('phones', upgradeAdapter.downgradeNg2Provider(Phones));
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion full
|
||||
import {UpgradeAdapter} from 'angular2/upgrade';
|
||||
|
||||
// #docregion adapter-init
|
||||
const upgradeAdapter = new UpgradeAdapter();
|
||||
// #enddocregion adapter-init
|
||||
|
||||
export default upgradeAdapter;
|
||||
// #enddocregion full
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// #docregion
|
||||
// #docregion top
|
||||
import {Component, Inject} from 'angular2/core';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {CheckmarkPipe} from '../core/CheckmarkPipe';
|
||||
|
||||
interface PhoneRouteParams {
|
||||
phoneId: string
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-detail',
|
||||
templateUrl: 'js/phone_detail/phone_detail.html',
|
||||
pipes: [CheckmarkPipe]
|
||||
})
|
||||
class PhoneDetail {
|
||||
// #enddocregion top
|
||||
phone:Phone = undefined;
|
||||
mainImageUrl:string;
|
||||
constructor(@Inject('$routeParams') $routeParams:PhoneRouteParams,
|
||||
phones:Phones) {
|
||||
phones.get($routeParams.phoneId)
|
||||
.subscribe(phone => {
|
||||
this.phone = phone;
|
||||
this.mainImageUrl = phone.images[0];
|
||||
});
|
||||
}
|
||||
|
||||
setImage(url:string) {
|
||||
this.mainImageUrl = url;
|
||||
}
|
||||
}
|
||||
export default PhoneDetail;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// #docregion
|
||||
import {Component, Inject} from 'angular2/core';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
|
||||
interface PhoneRouteParams {
|
||||
phoneId: string
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-detail',
|
||||
templateUrl: 'js/phone_detail/phone_detail.html'
|
||||
})
|
||||
class PhoneDetail {
|
||||
phone:Phone = undefined;
|
||||
mainImageUrl:string;
|
||||
constructor(@Inject('$routeParams') $routeParams:PhoneRouteParams,
|
||||
phones:Phones) {
|
||||
phones.get($routeParams.phoneId)
|
||||
.subscribe(phone => {
|
||||
this.phone = phone;
|
||||
this.mainImageUrl = phone.images[0];
|
||||
});
|
||||
}
|
||||
|
||||
setImage(url:string) {
|
||||
this.mainImageUrl = url;
|
||||
}
|
||||
}
|
||||
export default PhoneDetail;
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!-- #docregion -->
|
||||
<div class="phone-images">
|
||||
<img [src]="img"
|
||||
class="phone"
|
||||
*ngFor="#img of phone?.images"
|
||||
[ngClass]="{active: mainImageUrl==img}">
|
||||
</div>
|
||||
<h1>{{phone?.name}}</h1>
|
||||
<p>{{phone?.description}}</p>
|
||||
<ul class="phone-thumbs">
|
||||
<li *ngFor="#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="#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="#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>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// #docregion
|
||||
import PhoneDetail from './PhoneDetail';
|
||||
import upgradeAdapter from '../core/upgrade_adapter';
|
||||
|
||||
export default angular.module('phonecat.detail', [
|
||||
'ngRoute',
|
||||
'phonecat.core'
|
||||
])
|
||||
.directive('pcPhoneDetail',
|
||||
<angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(PhoneDetail))
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
|
||||
@Pipe({name: 'orderBy'})
|
||||
export default class OrderByPipe {
|
||||
|
||||
transform<T>(input:T[], args:string[]): T[] {
|
||||
if (input) {
|
||||
let property = args[0];
|
||||
return input.slice().sort((a, b) => {
|
||||
if (a[property] < b[property]) {
|
||||
return -1;
|
||||
} else if (b[property] < a[property]) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return input;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
import {Phone} from '../core/Phones';
|
||||
|
||||
@Pipe({name: 'phoneFilter'})
|
||||
export default class PhoneFilterPipe {
|
||||
|
||||
transform(input:Phone[], args:string[]): Phone[] {
|
||||
let query = args[0];
|
||||
if (query) {
|
||||
query = query.toLowerCase();
|
||||
return input.filter((phone) => {
|
||||
const name = phone.name.toLowerCase();
|
||||
const snippet = phone.snippet.toLowerCase();
|
||||
return name.indexOf(query) >= 0 || snippet.indexOf(query) >= 0;
|
||||
});
|
||||
} else {
|
||||
return input;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// #docregion full
|
||||
// #docregion top
|
||||
import {Component} from 'angular2/core';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import PhoneFilterPipe from './PhoneFilterPipe';
|
||||
import OrderByPipe from './OrderByPipe';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-list',
|
||||
templateUrl: 'js/phone_list/phone_list.html',
|
||||
pipes: [PhoneFilterPipe, OrderByPipe],
|
||||
})
|
||||
class PhoneList {
|
||||
// #enddocregion top
|
||||
|
||||
phones:Observable<Phone[]>;
|
||||
orderProp:string;
|
||||
query:string;
|
||||
constructor(phones:Phones) {
|
||||
this.phones = phones.query();
|
||||
this.orderProp = 'age';
|
||||
}
|
||||
}
|
||||
|
||||
export default PhoneList;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// #docregion top
|
||||
import {Component} from 'angular2/core';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-list',
|
||||
templateUrl: 'js/phone_list/phone_list.html'
|
||||
})
|
||||
class PhoneList {
|
||||
// #enddocregion top
|
||||
|
||||
phones:Observable<Phone[]>;
|
||||
orderProp:string;
|
||||
query:string;
|
||||
constructor(phones:Phones) {
|
||||
this.phones = phones.query();
|
||||
this.orderProp = 'age';
|
||||
}
|
||||
}
|
||||
|
||||
export default PhoneList;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<!--Sidebar content-->
|
||||
|
||||
<!-- #docregion controls -->
|
||||
Search: <input [(ngModel)]="query">
|
||||
Sort by:
|
||||
<select [(ngModel)]="orderProp">
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="age">Newest</option>
|
||||
</select>
|
||||
<!-- #enddocregion controls -->
|
||||
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<!--Body content-->
|
||||
|
||||
<!-- #docregion list -->
|
||||
<ul class="phones">
|
||||
<li *ngFor="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
|
||||
class="thumbnail phone-listing">
|
||||
<a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
|
||||
<a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>
|
||||
<p>{{phone.snippet}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- #enddocregion list -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion
|
||||
import PhoneList from './PhoneList';
|
||||
import upgradeAdapter from '../core/upgrade_adapter';
|
||||
|
||||
export default angular.module('phonecat.list', [
|
||||
'phonecat.core'
|
||||
])
|
||||
.directive('pcPhoneList',
|
||||
<angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(PhoneList));
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<!--Sidebar content-->
|
||||
|
||||
<!-- #docregion controls -->
|
||||
Search: <input [(ngModel)]="query">
|
||||
Sort by:
|
||||
<select [(ngModel)]="orderProp">
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="age">Newest</option>
|
||||
</select>
|
||||
<!-- #enddocregion controls -->
|
||||
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<!--Body content-->
|
||||
|
||||
<!-- #docregion list -->
|
||||
<ul class="phones">
|
||||
<li *ngFor="#phone of phones | phoneFilter:query | orderBy:orderProp"
|
||||
class="thumbnail phone-listing">
|
||||
<a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
|
||||
<a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>
|
||||
<p>{{phone.snippet}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- #enddocregion list -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<!--Sidebar content-->
|
||||
|
||||
<!-- #docregion controls -->
|
||||
Search: <input [(ngModel)]="query">
|
||||
Sort by:
|
||||
<select [(ngModel)]="orderProp">
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="age">Newest</option>
|
||||
</select>
|
||||
<!-- #enddocregion controls -->
|
||||
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<!--Body content-->
|
||||
|
||||
<!-- #docregion list -->
|
||||
<ul class="phones">
|
||||
<li *ngFor="#phone of phones | filter:query | orderBy:orderProp"
|
||||
class="thumbnail phone-listing">
|
||||
<a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
|
||||
<a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>
|
||||
<p>{{phone.snippet}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- #enddocregion list -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "angular-phonecat",
|
||||
"description": "A starter project for AngularJS",
|
||||
"version": "0.0.0",
|
||||
"homepage": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
'use strict';
|
||||
|
||||
/* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
|
||||
|
||||
describe('PhoneCat App', function() {
|
||||
|
||||
it('should redirect index.html to index.html#/phones', function() {
|
||||
browser.get('app/index.html');
|
||||
browser.getLocationAbsUrl().then(function(url) {
|
||||
expect(url).toEqual('/phones');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Phone list view', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
browser.get('app/index.html#/phones');
|
||||
});
|
||||
|
||||
it('should filter the phone list as a user types into the search box', function() {
|
||||
var phoneList = element.all(by.css('.phones li'));
|
||||
var query = element(by.css('input'));
|
||||
|
||||
expect(phoneList.count()).toBe(20);
|
||||
|
||||
query.sendKeys('nexus');
|
||||
expect(phoneList.count()).toBe(1);
|
||||
|
||||
query.clear();
|
||||
// https://github.com/angular/protractor/issues/2019
|
||||
let str = 'motorola';
|
||||
for (let i:number = 0; i < str.length; i++) {
|
||||
query.sendKeys(str.charAt(i));
|
||||
}
|
||||
|
||||
expect(phoneList.count()).toBe(8);
|
||||
});
|
||||
|
||||
|
||||
it('should be possible to control phone order via the drop down select box', function() {
|
||||
var phoneNameColumn = element.all(by.css('.phones .name'));
|
||||
var query = element(by.css('input'));
|
||||
|
||||
function getNames() {
|
||||
return phoneNameColumn.map(function(elm) {
|
||||
return elm.getText();
|
||||
});
|
||||
}
|
||||
|
||||
//let's narrow the dataset to make the test assertions shorter
|
||||
// https://github.com/angular/protractor/issues/2019
|
||||
let str = 'tablet';
|
||||
for (let i:number = 0; i < str.length; i++) {
|
||||
query.sendKeys(str.charAt(i));
|
||||
}
|
||||
|
||||
expect(getNames()).toEqual([
|
||||
"Motorola XOOM\u2122 with Wi-Fi",
|
||||
"MOTOROLA XOOM\u2122"
|
||||
]);
|
||||
|
||||
element(by.css('select')).element(by.css('option[value="name"]')).click();
|
||||
|
||||
expect(getNames()).toEqual([
|
||||
"MOTOROLA XOOM\u2122",
|
||||
"Motorola XOOM\u2122 with Wi-Fi"
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
it('should render phone specific links', function() {
|
||||
var query = element(by.css('input'));
|
||||
// https://github.com/angular/protractor/issues/2019
|
||||
let str = 'nexus';
|
||||
for (let i:number = 0; i < str.length; i++) {
|
||||
query.sendKeys(str.charAt(i));
|
||||
}
|
||||
element.all(by.css('.phones li a')).first().click();
|
||||
browser.getLocationAbsUrl().then(function(url) {
|
||||
expect(url).toEqual('/phones/nexus-s');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Phone detail view', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
browser.get('app/index.html#/phones/nexus-s');
|
||||
});
|
||||
|
||||
|
||||
it('should display nexus-s page', function() {
|
||||
expect(element(by.css('h1')).getText()).toBe('Nexus S');
|
||||
});
|
||||
|
||||
|
||||
it('should display the first phone image as the main phone image', function() {
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
||||
});
|
||||
|
||||
|
||||
it('should swap main image if a thumbnail image is clicked on', function() {
|
||||
element(by.css('.phone-thumbs li:nth-of-type(3) img')).click();
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
|
||||
|
||||
element(by.css('.phone-thumbs li:nth-of-type(1) img')).click();
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// #docregion
|
||||
// Cancel Karma's synchronous start,
|
||||
// we will call `__karma__.start()` later, once all the specs are loaded.
|
||||
__karma__.loaded = function() {};
|
||||
|
||||
System.config({
|
||||
packages: {
|
||||
'base/app/js': {
|
||||
defaultExtension: false,
|
||||
format: 'register',
|
||||
map: Object.keys(window.__karma__.files).
|
||||
filter(onlyAppFiles).
|
||||
reduce(function createPathRecords(pathsMapping, appPath) {
|
||||
// creates local module name mapping to global path with karma's fingerprint in path, e.g.:
|
||||
// './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
|
||||
var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
|
||||
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
|
||||
return pathsMapping;
|
||||
}, {})
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/base/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
|
||||
// #docregion ng2
|
||||
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
|
||||
browser_adapter.BrowserDomAdapter.makeCurrent();
|
||||
}).then(function() {
|
||||
return Promise.all(
|
||||
Object.keys(window.__karma__.files) // All files served by Karma.
|
||||
.filter(onlySpecFiles)
|
||||
.map(function(moduleName) {
|
||||
// loads all spec files via their global module names
|
||||
return System.import(moduleName);
|
||||
}));
|
||||
}).then(function() {
|
||||
__karma__.start();
|
||||
}, function(error) {
|
||||
__karma__.error(error.stack || error);
|
||||
});
|
||||
// #enddocregion ng2
|
||||
|
||||
function onlyAppFiles(filePath) {
|
||||
return /^\/base\/app\/js\/.*\.js$/.test(filePath)
|
||||
}
|
||||
|
||||
function onlySpecFiles(path) {
|
||||
return /\.spec\.js$/.test(path);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
|
||||
specs: [
|
||||
'e2e/*.js'
|
||||
],
|
||||
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
|
||||
directConnect: true,
|
||||
|
||||
baseUrl: 'http://localhost:8000/',
|
||||
|
||||
framework: 'jasmine',
|
||||
|
||||
jasmineNodeOpts: {
|
||||
defaultTimeoutInterval: 30000
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// #docregion
|
||||
/// <reference path="../typings/angularjs/angular-mocks.d.ts" />
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
|
||||
import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
|
||||
|
||||
describe('CheckmarkPipe', function() {
|
||||
|
||||
beforeEachProviders(() => [CheckmarkPipe]);
|
||||
|
||||
it('should convert boolean values to unicode checkmark or cross',
|
||||
inject([CheckmarkPipe], (checkmarkPipe) => {
|
||||
expect(checkmarkPipe.transform(true)).toBe('\u2713');
|
||||
expect(checkmarkPipe.transform(false)).toBe('\u2718');
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
|
||||
|
||||
describe('OrderByPipe', function() {
|
||||
|
||||
let input:any[] = [
|
||||
{name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
|
||||
{name: 'Motorola DROID', snippet: 'An Android-for-business smartphone', images: []}
|
||||
];
|
||||
|
||||
beforeEachProviders(() => [OrderByPipe]);
|
||||
|
||||
it('should order by the given property', inject([OrderByPipe], (orderByPipe) => {
|
||||
expect(orderByPipe.transform(input, ['name'])).toEqual([input[1], input[0]]);
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
// #docregion
|
||||
import {provide} from 'angular2/core';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
|
||||
import {
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
injectAsync,
|
||||
it,
|
||||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneDetail from '../../app/js/phone_detail/PhoneDetail';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
|
||||
function xyzPhoneData():Phone {
|
||||
return {
|
||||
name: 'phone xyz',
|
||||
snippet: '',
|
||||
images: ['image/url1.png', 'image/url2.png']
|
||||
}
|
||||
}
|
||||
|
||||
class MockPhones extends Phones {
|
||||
get(id):Observable<Phone> {
|
||||
return FromObservable.create([xyzPhoneData()]);
|
||||
}
|
||||
}
|
||||
|
||||
describe('PhoneDetail', function(){
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
provide('$routeParams', {useValue: {phoneId: 'xyz'}}),
|
||||
HTTP_PROVIDERS
|
||||
]);
|
||||
|
||||
it('should fetch phone detail', injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneDetail).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelector('.h1')).toHaveText(xyzPhoneData().name);
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
|
||||
import {Phone} from '../../app/js/core/Phones';
|
||||
|
||||
describe('PhoneFilterPipe', function() {
|
||||
|
||||
let phones:Phone[] = [
|
||||
{name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
|
||||
{name: 'Motorola DROID', snippet: 'an Android-for-business smartphone', images: []}
|
||||
];
|
||||
|
||||
beforeEachProviders(() => [PhoneFilterPipe]);
|
||||
|
||||
it('should return input when no query', inject([PhoneFilterPipe], (phoneFilterPipe) => {
|
||||
expect(phoneFilterPipe.transform(phones, [])).toEqual(phones);
|
||||
}));
|
||||
|
||||
it('should match based on name', inject([PhoneFilterPipe], (phoneFilterPipe) => {
|
||||
expect(phoneFilterPipe.transform(phones, ['nexus'])).toEqual([phones[0]]);
|
||||
}));
|
||||
|
||||
it('should match based on snippet', inject([PhoneFilterPipe], (phoneFilterPipe) => {
|
||||
expect(phoneFilterPipe.transform(phones, ['android'])).toEqual([phones[1]]);
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// #docregion
|
||||
import {provide} from 'angular2/core';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
|
||||
import {
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
injectAsync,
|
||||
it,
|
||||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneList from '../../app/js/phone_list/PhoneList';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
|
||||
class MockPhones extends Phones {
|
||||
query():Observable<Phone[]> {
|
||||
return FromObservable.create([
|
||||
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
describe('PhoneList', function(){
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
HTTP_PROVIDERS
|
||||
]);
|
||||
|
||||
|
||||
it('should create "phones" model with 2 phones fetched from xhr',
|
||||
injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneList).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(1)')).toHaveText('Nexus S');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(2)')).toHaveText('Motorola DROID');
|
||||
});
|
||||
}));
|
||||
|
||||
|
||||
it('should set the default value of orderProp model',
|
||||
injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneList).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('select option:last-child').selected).toBe(true);
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
|
||||
describe('Phones', function() {
|
||||
|
||||
// load providers
|
||||
beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
|
||||
|
||||
// Test service availability
|
||||
it('check the existence of Phones', inject([Phones], (phones) => {
|
||||
expect(phones).toBeDefined();
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"directory": "app/bower_components"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
app/**/*.js
|
||||
app/**/*.js.map
|
||||
test/unit/**/*.js
|
||||
test/unit/**/*.js.map
|
||||
test/e2e/**/*.js
|
||||
test/e2e/**/*.js.map
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* animations css stylesheet
|
||||
*/
|
||||
|
||||
/* animate ngRepeat in phone listing */
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-leave,
|
||||
.phone-listing.ng-move {
|
||||
-webkit-transition: 0.5s linear all;
|
||||
-moz-transition: 0.5s linear all;
|
||||
-o-transition: 0.5s linear all;
|
||||
transition: 0.5s linear all;
|
||||
}
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-move {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-move.ng-move-active,
|
||||
.phone-listing.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave {
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* cross fading between routes with ngView */
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter,
|
||||
.view-frame.ng-leave {
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter {
|
||||
-webkit-animation: 0.5s fade-in;
|
||||
-moz-animation: 0.5s fade-in;
|
||||
-o-animation: 0.5s fade-in;
|
||||
animation: 0.5s fade-in;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.view-frame.ng-leave {
|
||||
-webkit-animation: 0.5s fade-out;
|
||||
-moz-animation: 0.5s fade-out;
|
||||
-o-animation: 0.5s fade-out;
|
||||
animation: 0.5s fade-out;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-moz-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-webkit-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/* app css stylesheet */
|
||||
|
||||
body {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.phone-images {
|
||||
background-color: white;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.phones {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
float: left;
|
||||
margin: -0.5em 1em 1.5em 0;
|
||||
padding-bottom: 1em;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.phones li {
|
||||
clear: both;
|
||||
height: 115px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
/** Detail View **/
|
||||
img.phone {
|
||||
float: left;
|
||||
margin-right: 3em;
|
||||
margin-bottom: 2em;
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.phone:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
ul.phone-thumbs {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.phone-thumbs li {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
ul.phone-thumbs img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
ul.phone-thumbs img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
ul.specs {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.specs > li{
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
ul.specs > li > span{
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
ul.specs dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,40 @@
|
|||
<!-- #docregion -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Google Phone Gallery</title>
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
<!-- #docregion scripts -->
|
||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
|
||||
<!-- #docregion ng2-router -->
|
||||
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
|
||||
<!-- #enddocregion ng2-router -->
|
||||
<script>
|
||||
System.config({
|
||||
packages: {
|
||||
'js': {
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
System.import('js/app');
|
||||
</script>
|
||||
<!-- #enddocregion scripts -->
|
||||
</head>
|
||||
<!-- #docregion body -->
|
||||
<body>
|
||||
<pc-app></pc-app>
|
||||
</body>
|
||||
<!-- #enddocregion body -->
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
// #docregion
|
||||
// #docregion importbootstrap
|
||||
import {Component, provide} from 'angular2/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
import {Phones} from './core/Phones';
|
||||
import PhoneList from './phone_list/PhoneList';
|
||||
import PhoneDetail from './phone_detail/PhoneDetail';
|
||||
// #enddocregion importbootstrap
|
||||
|
||||
// #docregion http-import
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
// #enddocregion http-import
|
||||
|
||||
// #docregion router-import
|
||||
import {
|
||||
RouteConfig,
|
||||
LocationStrategy,
|
||||
HashLocationStrategy,
|
||||
ROUTER_DIRECTIVES,
|
||||
ROUTER_PROVIDERS
|
||||
} from 'angular2/router';
|
||||
// #enddocregion router-import
|
||||
|
||||
// #docregion appcomponent
|
||||
@RouteConfig([
|
||||
{path:'/phones', as: 'Phones', component: PhoneList},
|
||||
{path:'/phones/:phoneId', as: 'Phone', component: PhoneDetail},
|
||||
{path:'/', redirectTo: ['/phones']}
|
||||
])
|
||||
@Component({
|
||||
selector: 'pc-app',
|
||||
template: '<router-outlet></router-outlet>',
|
||||
directives: [ROUTER_DIRECTIVES]
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
// #enddocregion appcomponent
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent, [
|
||||
HTTP_PROVIDERS,
|
||||
ROUTER_PROVIDERS,
|
||||
ROUTER_DIRECTIVES,
|
||||
provide(LocationStrategy, {useClass: HashLocationStrategy}),
|
||||
Phones
|
||||
]);
|
||||
// #enddocregion bootstrap
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
|
||||
@Pipe({name: 'checkmark'})
|
||||
export class CheckmarkPipe {
|
||||
transform(input:string): string {
|
||||
return input ? '\u2713' : '\u2718';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
// #docregion full
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Http, Response} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
// #docregion phone-interface
|
||||
export interface Phone {
|
||||
name: string;
|
||||
snippet: string;
|
||||
images: string[];
|
||||
}
|
||||
// #enddocregion phone-interface
|
||||
|
||||
// #docregion fullclass
|
||||
// #docregion class
|
||||
@Injectable()
|
||||
export class Phones {
|
||||
// #enddocregion class
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
query():Observable<Phone[]> {
|
||||
return this.http.get(`phones/phones.json`)
|
||||
.map((res:Response) => res.json());
|
||||
}
|
||||
|
||||
get(id: string):Observable<Phone> {
|
||||
return this.http.get(`phones/${id}.json`)
|
||||
.map((res:Response) => res.json());
|
||||
}
|
||||
|
||||
// #docregion class
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion fullclass
|
||||
// #docregion full
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion full
|
||||
import {UpgradeAdapter} from 'angular2/upgrade';
|
||||
|
||||
// #docregion adapter-init
|
||||
const upgradeAdapter = new UpgradeAdapter();
|
||||
// #enddocregion adapter-init
|
||||
|
||||
export default upgradeAdapter;
|
||||
// #enddocregion full
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// #docregion
|
||||
// #docregion top
|
||||
import {Component, Inject} from 'angular2/core';
|
||||
import {RouteParams} from 'angular2/router';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {CheckmarkPipe} from '../core/CheckmarkPipe';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-detail',
|
||||
templateUrl: 'js/phone_detail/phone_detail.html',
|
||||
pipes: [CheckmarkPipe]
|
||||
})
|
||||
class PhoneDetail {
|
||||
// #enddocregion top
|
||||
phone:Phone = undefined;
|
||||
mainImageUrl:string;
|
||||
constructor(params:RouteParams,
|
||||
phones:Phones) {
|
||||
phones.get(params.get('phoneId'))
|
||||
.subscribe(phone => {
|
||||
this.phone = phone;
|
||||
this.mainImageUrl = phone.images[0];
|
||||
});
|
||||
}
|
||||
|
||||
setImage(url:string) {
|
||||
this.mainImageUrl = url;
|
||||
}
|
||||
}
|
||||
export default PhoneDetail;
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!-- #docregion -->
|
||||
<div class="phone-images">
|
||||
<img [src]="img"
|
||||
class="phone"
|
||||
*ngFor="#img of phone?.images"
|
||||
[ngClass]="{active: mainImageUrl==img}">
|
||||
</div>
|
||||
<h1>{{phone?.name}}</h1>
|
||||
<p>{{phone?.description}}</p>
|
||||
<ul class="phone-thumbs">
|
||||
<li *ngFor="#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="#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="#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>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
|
||||
@Pipe({name: 'orderBy'})
|
||||
export default class OrderByPipe {
|
||||
|
||||
transform<T>(input:T[], args:string[]): T[] {
|
||||
if (input) {
|
||||
let property = args[0];
|
||||
return input.slice().sort((a, b) => {
|
||||
if (a[property] < b[property]) {
|
||||
return -1;
|
||||
} else if (b[property] < a[property]) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return input;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
import {Phone} from '../core/Phones';
|
||||
|
||||
@Pipe({name: 'phoneFilter'})
|
||||
export default class PhoneFilterPipe {
|
||||
|
||||
transform(input:Phone[], args:string[]): Phone[] {
|
||||
let query = args[0];
|
||||
if (query) {
|
||||
query = query.toLowerCase();
|
||||
return input.filter((phone) => {
|
||||
const name = phone.name.toLowerCase();
|
||||
const snippet = phone.snippet.toLowerCase();
|
||||
return name.indexOf(query) >= 0 || snippet.indexOf(query) >= 0;
|
||||
});
|
||||
} else {
|
||||
return input;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// #docregion full
|
||||
// #docregion top
|
||||
import {Component} from 'angular2/core';
|
||||
import {RouterLink} from 'angular2/router';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import PhoneFilterPipe from './PhoneFilterPipe';
|
||||
import OrderByPipe from './OrderByPipe';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-list',
|
||||
templateUrl: 'js/phone_list/phone_list.html',
|
||||
pipes: [PhoneFilterPipe, OrderByPipe],
|
||||
directives: [RouterLink]
|
||||
})
|
||||
class PhoneList {
|
||||
// #enddocregion top
|
||||
|
||||
phones:Observable<Phone[]>;
|
||||
orderProp:string;
|
||||
query:string;
|
||||
constructor(phones:Phones) {
|
||||
this.phones = phones.query();
|
||||
this.orderProp = 'age';
|
||||
}
|
||||
}
|
||||
|
||||
export default PhoneList;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<!--Sidebar content-->
|
||||
|
||||
<!-- #docregion controls -->
|
||||
Search: <input [(ngModel)]="query">
|
||||
Sort by:
|
||||
<select [(ngModel)]="orderProp">
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="age">Newest</option>
|
||||
</select>
|
||||
<!-- #enddocregion controls -->
|
||||
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<!--Body content-->
|
||||
|
||||
<!-- #docregion list -->
|
||||
<ul class="phones">
|
||||
<li *ngFor="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
|
||||
class="thumbnail phone-listing">
|
||||
<a [routerLink]="['/Phone', {phoneId: phone.id}]" class="thumb"><img [src]="phone.imageUrl"></a>
|
||||
<a [routerLink]="['/Phone', {phoneId: phone.id}]" class="name">{{phone.name}}</a>
|
||||
<p>{{phone.snippet}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- #enddocregion list -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "angular-phonecat",
|
||||
"description": "A starter project for AngularJS",
|
||||
"version": "0.0.0",
|
||||
"homepage": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
'use strict';
|
||||
|
||||
/* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
|
||||
|
||||
describe('PhoneCat App', function() {
|
||||
|
||||
// #docregion redirect
|
||||
it('should redirect index.html to index.html#/phones', function() {
|
||||
browser.get('app/index.html');
|
||||
browser.waitForAngular();
|
||||
browser.getCurrentUrl().then(function(url) {
|
||||
expect(url.endsWith('/phones')).toBe(true);
|
||||
});
|
||||
});
|
||||
// #enddocregion redirect
|
||||
|
||||
describe('Phone list view', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
browser.get('app/index.html#/phones');
|
||||
});
|
||||
|
||||
it('should filter the phone list as a user types into the search box', function() {
|
||||
var phoneList = element.all(by.css('.phones li'));
|
||||
var query = element(by.css('input'));
|
||||
|
||||
expect(phoneList.count()).toBe(20);
|
||||
|
||||
query.sendKeys('nexus');
|
||||
expect(phoneList.count()).toBe(1);
|
||||
|
||||
query.clear();
|
||||
// https://github.com/angular/protractor/issues/2019
|
||||
let str = 'motorola';
|
||||
for (let i:number = 0; i < str.length; i++) {
|
||||
query.sendKeys(str.charAt(i));
|
||||
}
|
||||
|
||||
expect(phoneList.count()).toBe(8);
|
||||
});
|
||||
|
||||
|
||||
it('should be possible to control phone order via the drop down select box', function() {
|
||||
var phoneNameColumn = element.all(by.css('.phones .name'));
|
||||
var query = element(by.css('input'));
|
||||
|
||||
function getNames() {
|
||||
return phoneNameColumn.map(function(elm) {
|
||||
return elm.getText();
|
||||
});
|
||||
}
|
||||
|
||||
//let's narrow the dataset to make the test assertions shorter
|
||||
// https://github.com/angular/protractor/issues/2019
|
||||
let str = 'tablet';
|
||||
for (let i:number = 0; i < str.length; i++) {
|
||||
query.sendKeys(str.charAt(i));
|
||||
}
|
||||
|
||||
expect(getNames()).toEqual([
|
||||
"Motorola XOOM\u2122 with Wi-Fi",
|
||||
"MOTOROLA XOOM\u2122"
|
||||
]);
|
||||
|
||||
element(by.css('select')).element(by.css('option[value="name"]')).click();
|
||||
expect(getNames()).toEqual([
|
||||
"MOTOROLA XOOM\u2122",
|
||||
"Motorola XOOM\u2122 with Wi-Fi"
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
// #docregion links
|
||||
it('should render phone specific links', function() {
|
||||
var query = element(by.css('input'));
|
||||
// https://github.com/angular/protractor/issues/2019
|
||||
let str = 'nexus';
|
||||
for (let i:number = 0; i < str.length; i++) {
|
||||
query.sendKeys(str.charAt(i));
|
||||
}
|
||||
element.all(by.css('.phones li a')).first().click();
|
||||
browser.getCurrentUrl().then(function(url) {
|
||||
expect(url.endsWith('/phones/nexus-s')).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
// #enddocregion links
|
||||
|
||||
describe('Phone detail view', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
browser.get('app/index.html#/phones/nexus-s');
|
||||
});
|
||||
|
||||
|
||||
it('should display nexus-s page', function() {
|
||||
expect(element(by.css('h1')).getText()).toBe('Nexus S');
|
||||
});
|
||||
|
||||
|
||||
it('should display the first phone image as the main phone image', function() {
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
||||
});
|
||||
|
||||
|
||||
it('should swap main image if a thumbnail image is clicked on', function() {
|
||||
element(by.css('.phone-thumbs li:nth-of-type(3) img')).click();
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
|
||||
|
||||
element(by.css('.phone-thumbs li:nth-of-type(1) img')).click();
|
||||
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// #docregion
|
||||
// Cancel Karma's synchronous start,
|
||||
// we will call `__karma__.start()` later, once all the specs are loaded.
|
||||
__karma__.loaded = function() {};
|
||||
|
||||
System.config({
|
||||
packages: {
|
||||
'base/app/js': {
|
||||
defaultExtension: false,
|
||||
format: 'register',
|
||||
map: Object.keys(window.__karma__.files).
|
||||
filter(onlyAppFiles).
|
||||
reduce(function createPathRecords(pathsMapping, appPath) {
|
||||
// creates local module name mapping to global path with karma's fingerprint in path, e.g.:
|
||||
// './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
|
||||
var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
|
||||
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
|
||||
return pathsMapping;
|
||||
}, {})
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/base/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
|
||||
// #docregion ng2
|
||||
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
|
||||
browser_adapter.BrowserDomAdapter.makeCurrent();
|
||||
}).then(function() {
|
||||
return Promise.all(
|
||||
Object.keys(window.__karma__.files) // All files served by Karma.
|
||||
.filter(onlySpecFiles)
|
||||
.map(function(moduleName) {
|
||||
// loads all spec files via their global module names
|
||||
return System.import(moduleName);
|
||||
}));
|
||||
}).then(function() {
|
||||
__karma__.start();
|
||||
}, function(error) {
|
||||
__karma__.error(error.stack || error);
|
||||
});
|
||||
// #enddocregion ng2
|
||||
|
||||
function onlyAppFiles(filePath) {
|
||||
return /^\/base\/app\/js\/.*\.js$/.test(filePath)
|
||||
}
|
||||
|
||||
function onlySpecFiles(path) {
|
||||
return /\.spec\.js$/.test(path);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
|
||||
specs: [
|
||||
'e2e/*.js'
|
||||
],
|
||||
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
|
||||
directConnect: true,
|
||||
|
||||
baseUrl: 'http://localhost:8000/',
|
||||
|
||||
framework: 'jasmine',
|
||||
|
||||
jasmineNodeOpts: {
|
||||
defaultTimeoutInterval: 30000
|
||||
},
|
||||
|
||||
// #docregion ng2
|
||||
useAllAngular2AppRoots: true
|
||||
// #enddocregion ng2
|
||||
};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
|
||||
import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
|
||||
|
||||
describe('CheckmarkPipe', function() {
|
||||
|
||||
beforeEachProviders(() => [CheckmarkPipe]);
|
||||
|
||||
it('should convert boolean values to unicode checkmark or cross',
|
||||
inject([CheckmarkPipe], (checkmarkPipe) => {
|
||||
expect(checkmarkPipe.transform(true)).toBe('\u2713');
|
||||
expect(checkmarkPipe.transform(false)).toBe('\u2718');
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
|
||||
|
||||
describe('OrderByPipe', function() {
|
||||
|
||||
let input:any[] = [
|
||||
{name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
|
||||
{name: 'Motorola DROID', snippet: 'An Android-for-business smartphone', images: []}
|
||||
];
|
||||
|
||||
beforeEachProviders(() => [OrderByPipe]);
|
||||
|
||||
it('should order by the given property', inject([OrderByPipe], (orderByPipe) => {
|
||||
expect(orderByPipe.transform(input, ['name'])).toEqual([input[1], input[0]]);
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import {provide} from 'angular2/core';
|
||||
// #docregion routeparams
|
||||
import {RouteParams} from 'angular2/router';
|
||||
// #enddocregion routeparams
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
|
||||
import {
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
injectAsync,
|
||||
it,
|
||||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneDetail from '../../app/js/phone_detail/PhoneDetail';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
|
||||
function xyzPhoneData():Phone {
|
||||
return {
|
||||
name: 'phone xyz',
|
||||
snippet: '',
|
||||
images: ['image/url1.png', 'image/url2.png']
|
||||
}
|
||||
}
|
||||
|
||||
class MockPhones extends Phones {
|
||||
get(id):Observable<Phone> {
|
||||
return FromObservable.create([xyzPhoneData()]);
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion routeparams
|
||||
describe('PhoneDetail', function(){
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
provide(RouteParams, {useValue: new RouteParams({phoneId: 'xyz'})}),
|
||||
HTTP_PROVIDERS
|
||||
]);
|
||||
// #enddocregion routeparams
|
||||
|
||||
it('should fetch phone detail', injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneDetail).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelector('.h1')).toHaveText(xyzPhoneData().name);
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
|
||||
import {Phone} from '../../app/js/core/Phones';
|
||||
|
||||
describe('PhoneFilterPipe', function() {
|
||||
|
||||
let phones:Phone[] = [
|
||||
{name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
|
||||
{name: 'Motorola DROID', snippet: 'an Android-for-business smartphone', images: []}
|
||||
];
|
||||
|
||||
beforeEachProviders(() => [PhoneFilterPipe]);
|
||||
|
||||
it('should return input when no query', inject([PhoneFilterPipe], (phoneFilterPipe) => {
|
||||
expect(phoneFilterPipe.transform(phones, [])).toEqual(phones);
|
||||
}));
|
||||
|
||||
it('should match based on name', inject([PhoneFilterPipe], (phoneFilterPipe) => {
|
||||
expect(phoneFilterPipe.transform(phones, ['nexus'])).toEqual([phones[0]]);
|
||||
}));
|
||||
|
||||
it('should match based on snippet', inject([PhoneFilterPipe], (phoneFilterPipe) => {
|
||||
expect(phoneFilterPipe.transform(phones, ['android'])).toEqual([phones[1]]);
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
// #docregion
|
||||
import {provide} from 'angular2/core';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import {
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
injectAsync,
|
||||
it,
|
||||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneList from '../../app/js/phone_list/PhoneList';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
|
||||
class MockPhones extends Phones {
|
||||
query():Observable<Phone[]> {
|
||||
return FromObservable.create([
|
||||
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
describe('PhoneList', function(){
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
HTTP_PROVIDERS
|
||||
]);
|
||||
|
||||
|
||||
it('should create "phones" model with 2 phones fetched from xhr',
|
||||
injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneList).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(1)')).toHaveText('Nexus S');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(2)')).toHaveText('Motorola DROID');
|
||||
});
|
||||
}));
|
||||
|
||||
|
||||
it('should set the default value of orderProp model',
|
||||
injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneList).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('select option:last-child').selected).toBe(true);
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
|
||||
describe('Phones', function() {
|
||||
|
||||
// load providers
|
||||
beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
|
||||
|
||||
// Test service availability
|
||||
it('check the existence of Phones', inject([Phones], (phones) => {
|
||||
expect(phones).toBeDefined();
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"directory": "app/bower_components"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
app/**/*.js
|
||||
app/**/*.js.map
|
||||
test/unit/**/*.js
|
||||
test/unit/**/*.js.map
|
||||
test/e2e/**/*.js
|
||||
test/e2e/**/*.js.map
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* animations css stylesheet
|
||||
*/
|
||||
|
||||
/* animate ngRepeat in phone listing */
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-leave,
|
||||
.phone-listing.ng-move {
|
||||
-webkit-transition: 0.5s linear all;
|
||||
-moz-transition: 0.5s linear all;
|
||||
-o-transition: 0.5s linear all;
|
||||
transition: 0.5s linear all;
|
||||
}
|
||||
|
||||
.phone-listing.ng-enter,
|
||||
.phone-listing.ng-move {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-move.ng-move-active,
|
||||
.phone-listing.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave {
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-listing.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* cross fading between routes with ngView */
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter,
|
||||
.view-frame.ng-leave {
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.view-frame.ng-enter {
|
||||
-webkit-animation: 0.5s fade-in;
|
||||
-moz-animation: 0.5s fade-in;
|
||||
-o-animation: 0.5s fade-in;
|
||||
animation: 0.5s fade-in;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.view-frame.ng-leave {
|
||||
-webkit-animation: 0.5s fade-out;
|
||||
-moz-animation: 0.5s fade-out;
|
||||
-o-animation: 0.5s fade-out;
|
||||
animation: 0.5s fade-out;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-moz-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-webkit-keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue