<!DOCTYPE html>
<html ng-app="pearsonApp">
<head>
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="routing.js"></script>
<script src="service.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
(function() {
var app = angular.module("pearsonApp");
var MainController = function($scope, $location) {
$scope.search = function() {
$location.path("/dictionaries/" + $scope.dictionaryName + "/" + $scope.searchTerm);
};
};
var DictionaryDetailsController = function($scope, pearson, $routeParams) {
$scope.searchTerm = $routeParams.searchTerm;
$scope.dictionaryName = $routeParams.dictionaryName;
pearson.getResults($scope.dictionaryName,$scope.searchTerm).then(function(response){
console.log(response);
$scope.resultSet = response.results;
});
};
app.controller("MainController", MainController);
app.controller("DictionaryDetailsController", DictionaryDetailsController);
}());
/* Styles go here */
(function() {
var module = angular.module("pearsonApp");
var pearson = function($http) {
var getResults = function(dictionary,searchTerm) {
return $http.get("https://api.pearson.com/v2/dictionaries/" + dictionary + "/entries?search=" + searchTerm).then(function(response) {
return response.data;
});
};
return {
getResults: getResults
};
};
module.factory("pearson", pearson);
}());
(function() {
var app = angular.module("pearsonApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.html"
})
.when("/dictionaries/:dictionaryName/:searchTerm", {
templateUrl: "dictionary.html"
})
.otherwise({
redirectTo: "main.html",
});
});
}());
<!DOCTYPE html>
<div ng-controller="MainController">
<form class="form-horizontal">
<h3 class="col-lg-8 col-lg-offset-4">Consuming Pearson Dictionary API</h3>
<div class="form-group">
<label class="col-lg-4 control-label">Select from dictionary : </label>
<div class="col-lg-8">
<select ng-model="dictionaryName">
<option value="ldoce5">Longman Dictionary of Contemporary English (5th edition)</option>
<option value="lasde">Longman Active Study Dictionary</option>
<option value="laesd">Longman English-Chinese Dictionary of 100,000 Words (New 2nd Edition)</option>
<option value="wordwise">Longman Wordwise Dictionary</option>
<option value="laesd">Longman Afrikaans to English</option>
<option value="leasd">Longman English to Afrikaans</option>
<option value="laad3">Longman Advanced American Dictionary</option>
<option value="laes">English to Latin American Spanish</option>
<option value="lase">Latin American Spanish to English</option>
<option value="brep">English to Brazilian Portuguese</option>
<option value="brpe">Brazilian Portuguese to English</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Search Word : </label>
<div class="col-lg-8">
<input type="text" ng-model="searchTerm" placeholder="Enter a word"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-8 col-lg-offset-4">
<input class="btn btn-primary" type="button" value="Search" ng-Click="search()" />
</div>
</div>
</form>
</div>
<!DOCTYPE html>
<div ng-controller="DictionaryDetailsController">
<div class="form-group">
<div class="col-lg-3">
<h4>Dictionary Name : {{dictionaryName}}</h4>
</div>
<div class="col-lg-3">
<h4>Search Term : {{searchTerm}}</h4>
</div>
<div class="col-lg-3">
<h4><a ng-href="#/"><i class="glyphicon glyphicon-hand-left"></i>Back</a></h4>
</div>
</div>
<div class="col-lg-12">
<h3>Total result count : {{resultSet.length}}</h3>
</div>
<table class="table table-striped table-hover ">
<thead>
<tr class="info">
<th>Headword</th>
<th>Definition</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in resultSet">
<td>{{result.headword}}</td>
<td>{{result.senses[0].definition[0]}}</td>
</tr>
</tbody>
</table>
</div>