As a newcomer to AngularJS, I am attempting to create my first app using the reed.co.uk API. Please bear with me as I navigate through this process! :)
Currently, my application is very basic and includes the following:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="reed" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Reed Start Up App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="components/services/services.js"></script>
<script src="viewHome/home.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('reed', ['ngRoute', 'reed.home', 'reedService'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.otherwise(
{
redirectTo : '/'
}
);
}]);
home.js
'use strict';
angular.module('reed.home', ['ngRoute', 'reedService'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.when(
'/', {templateUrl : 'viewHome/home.html', controller : 'HomeCtrl'}
);
}])
.controller('HomeCtrl',['$scope', 'Jobs', function($scope, jobs){
$scope.performSearch = function()
{
console.log(
jobs.query(
{
keywords : $scope.jobTitle
},
{
method : 'GET',
headers : {
username : '9f0ebf61-8795-49d7-a1d7-123456789123'
}
}
)
);
};}
]);
home.html
<div class="row">
<div class="col-sm-12">
<form role="form">
<div class="form-group">
<label form="job-title">
Job Title
</label>
<input ng-model="jobTitle" id="job-title" placeholder="Please enter your desired job title" class="form-control" type="text" />
</div>
<div>
<button type="submit" class="btn btn-default" ng-click="performSearch()">Submit</button>
</div>
</form>
</div>
</div>
services.js
'use strict';
var jobsServices = angular.module('reedService', ['ngResource']);
jobsServices.factory('Jobs', ['$resource', '$http', function($resource, $http){
return $resource(
'http://www.reed.co.uk/api/1.0/search',
{},
{
query : {
method : 'GET',
headers : {
username : '9f0ebf61-8795-49d7-a1d7-123456789123'
}
}
}
)
}]);
The documentation for the Reed.co.uk API emphasizes the following:
Important:
You must include your api key in all requests in a basic authentication http header as the username, leaving the password empty.
Despite following these guidelines, I have encountered an issue in my AngularJS app where the request method changes from GET to OPTIONS when setting headers.
If I remove the headers, the request goes through as a GET, but of course, it returns an "Unauthorized request" error from the server.
Any assistance or guidance on how to resolve this would be greatly appreciated!