var app = angular.module('plunker', ['plunker.controllers', 'plunker.services']);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="alert alert-info" role="alert">
<p>
For more information on Google's PageSpeed API, see <a href="https://developers.google.com/speed/docs/insights/v1/getting_started" class="alert-link">https://developers.google.com/speed/docs/insights/v1/getting_started</a>.
</p>
<p>
Some styles and images were borrowed from Google's online demo <a href="https://developers.google.com/speed/pagespeed/insights/" class="alert-link">https://developers.google.com/speed/pagespeed/insights/</a>.
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Input</h3>
</div>
<div class="panel-body">
<form name="demoForm">
<div class="form-group">
<label for="url" class="control-label col-md-2">URL</label>
<div class="col-md-8">
<input id="url" name="url" class="form-control" ng-model="apiParams.url" type="url"/>
</div>
</div>
<div class="form-group">
<label for="apiKey" class="control-label col-md-2">API Key</label>
<div class="col-md-8">
<input id="apiKey" name="apiKey" class="form-control" ng-model="apiParams.apiKey" type="text"/>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary"
ng-click="getScreenshots()">Get Screenshots</button>
</div>
</form>
</div>
</div>
<div class="panel panel-default" ng-if="results.mobile.status">
<div class="panel-heading">
<h3>Mobile Screenshot</h3>
</div>
<div class="panel-body">
<div>
<i ng-if="results.mobile.status == 'PROCESSING'" class="fa fa-spinner fa-spin"></i>
<i ng-if="results.mobile.status == 'FAILED'" class="glyphicon glyphicon-exclamation-sign"></i>
<div ng-if="results.mobile.status == 'COMPLETE' && results.mobile.data" class="screenshot mobile">
<div class="screenshot-img-container">
<img ng-src="{{results.mobile.data.src}}">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default" ng-if="results.desktop.status">
<div class="panel-heading">
<h3>Desktop Screenshot</h3>
</div>
<div class="panel-body">
<div>
<i ng-if="results.desktop.status == 'PROCESSING'" class="fa fa-spinner fa-spin"></i>
<i ng-if="results.desktop.status == 'FAILED'" class="glyphicon glyphicon-exclamation-sign"></i>
<div ng-if="results.desktop.status == 'COMPLETE' && results.desktop.data" class="screenshot desktop">
<div class="screenshot-img-container">
<img ng-src="{{results.desktop.data.src}}">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/*
NOTE: The screenshot classes and image reference were borrowed from
https://developers.google.com/speed/pagespeed/insights/ for the purposes of
demonstrating how to potentially display results.
*/
.screenshot.mobile {
background: url(//www.gstatic.com/pagespeed/insights/31/img/n4.png) no-repeat;
}
.screenshot {
height: 485px;
width: 250px;
position: relative;
}
.screenshot.mobile .screenshot-img-container {
width: 225px;
height: 375px;
clip: rect(0,225px,375px,0);
top: 54px;
left: 12px;
}
.screenshot-img-container {
position: absolute;
margin: 0;
padding: 0;
overflow: hidden;
}
.screenshot-img-container img {
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 1;
}
.screenshot.desktop {
background: url(//www.gstatic.com/pagespeed/insights/31/img/pixel.png) no-repeat;
}
.screenshot.desktop .screenshot-img-container {
width: 180px;
height: 112px;
clip: rect(0,180px,112px,0);
top: 45px;
left: 32px;
}
var appServices = angular.module('plunker.services', []);
appServices.factory('pageSpeedService', ['$http', '$q', function($http, $q) {
return {
getThumbnail: function(url, apiKey, strategy) {
var deferred = $q.defer();
$http.get('https://www.googleapis.com/pagespeedonline/v1/runPagespeed', {
params: {
url: url,
key: apiKey,
screenshot: true,
strategy: strategy
}
})
.success(function(response) {
var screenshot = response.screenshot;
var rawImage = screenshot.data.replace(/_/g, '/')
.replace(/-/g, '+');
deferred.resolve({
src: 'data:' + screenshot.mime_type + ';base64,' + rawImage,
height: screenshot.height,
width: screenshot.width,
mimeType: screenshot.mime_type
})
})
.error(function(response) {
console.log('Error for ' + strategy);
deferred.reject(response);
});
return deferred.promise;
}
};
}]);
var appControllers = angular.module('plunker.controllers', []);
appControllers.controller('MainCtrl', ['$scope', 'pageSpeedService', function($scope, pageSpeedService) {
$scope.apiParams = {};
$scope.results = {
mobile: {},
desktop: {}
};
$scope.getScreenshots = function() {
$scope.results.desktop.status = $scope.results.mobile.status = 'PROCESSING';
pageSpeedService.getThumbnail($scope.apiParams.url, $scope.apiParams.apiKey, 'mobile')
.then(function(screenshot) {
$scope.results.mobile.status = 'COMPLETE';
$scope.results.mobile.data = screenshot;
}, function(response) {
$scope.results.mobile.status = 'FAILED';
});
pageSpeedService.getThumbnail($scope.apiParams.url, $scope.apiParams.apiKey, 'desktop')
.then(function(screenshot) {
$scope.results.desktop.status = 'COMPLETE';
$scope.results.desktop.data = screenshot;
}, function(response) {
$scope.results.desktop.status = 'FAILED';
});
};
}]);