Issue
Wow, I'm at a loss and have been fitting this for days. I could really use some help ...
PROBLEM : When I query my api in Angular Javascript I don't get any data in response. I know the API is working but nothing is attached to the $scope.data that I am sending to the view, other $scope variables do work. Have attempted to fix the issue using the Angular $http Resource and Restangular AngJS Service link. Here are the details of my problem, and thanks for any suggestions.
CURRENT CONFIG : I'm developing a site that uses Laravel 5.1 for a RESTful API. It is located on a local Vagrant instance of Homestead the URL is >> http://api.platspl.at:8000/
I know it works because if I go to >> api.platspl.at:8000/tracks, I get (abbreviated):
[{"id":1,"name":"Track 1 Name","slug":"track-1-name",...,"updated_at":"2016-01-31 15:30:56"},{"id":2,...,"updated_at":"2016-01-31 15:30:56"},{"id":3,...,"updated_at":"2016-01-31 15:30:56"}]
here is the code for the controller:
public function index()
{
// Using Model
//$data = Track::where('published', 1)->get();
//$data->toJson();
//return $data;
// Using DB
$data = DB::table('tracks')->where('published', 1)->get();
return response()->json($data);
}
as you can see I attempted to fix my Angular JS issue by using both a Laravel Model and a Database Query, neither fixed anything.
I am using Angular JS for the front-end and there is where my problem lies. When I go to platspl.at:8000/ I receive the Angular App as a response, defined by the routes.php file in Laravel. Here is the routes code:
Route::get('/', function() { return View::make('app.index'); });
The view I am using is located in /resources/views/app/ and ALL the necessary AngularJS files are located in the public directory of the Laravel install. Here is some of the code from the view, followed by the 2 Angular Files referenced in the view.
VIEW :
<html lang="en" ng-app="PlatSplatApp">
<head>...</head>
<body ng-controller="AppCtrl">
<div class="page-header">
<h1>PlatSpl.at - {{ user }}</h1>
</div>
<p>1 + 2 = {{ 1 + 2 }}</p>
<div ng-repeat="track in tracks">
<h3>{{ track.name }}</h3>
<p>{{ track.description }}</p>
</div>
</body>
<script type="text/javascript" src="<?= asset('app/bower_components/angular/angular.js') ?>"></script> ...
<script type="text/javascript" src="<?= asset('app/bower_components/restangular/src/restangular.js') ?>"></script>
<script type="text/javascript" src="<?= asset('app/scripts/app.js') ?>"></script>
<script type="text/javascript" src="<?= asset('app/scripts/controllers/appCtrl.js') ?>"></script>
APP.JS :
angular.module('PlatSplatApp', ['restangular']);
AppCtrl.JS :
angular.module('PlatSplatApp', [])
.controller('AppCtrl', [ '$scope',
function($scope, Restangular) {
// Set User
$scope.user = 'User Name';
//Create a Restangular object
var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000');
// make query and return a promise.
data.getList().then(function(response) {
$scope.tracks = response;
});
//$scope.tracks = Restangular.allUrl('tracks', 'http://api.platspl.at:8000').getList().$object;
//$scope.tracks = Restangular.allUrl('allTracks', 'http://api.platspl.at:8000/tracks').getList().$object;
//var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000/tracks').getList();
//var data = Restangular.oneUrl('tracks', 'http://api.platspl.at:8000/tracks/by/1').get();
//$scope.tracks = data;
//$scope.tracks = [{'name': 'error', 'description': 'error'}];
}]);
// .controller('AppCtrl', [ '$scope', '$http',
// function ($scope, $http) {
// $scope.user = 'User Name';
// $http({
// method: 'GET',
// url: 'http://api.platspl.at:8000/tracks',
// }).then(function(result) {
// $scope.tracks = result.data;
// }, function (error) {
// $scope.tracks = [ { 'name': 'error', 'description': 'error' } ];
// })
// }
//]);
All the JS coded I attempted to use is commented out. Thanks Again for any suggestions!
Solution
The Guilty Parties >> Nginx & CORS
After attempting many suggested solutions this is what I came up with ...
Laravel API Controller :
Add
use Illuminate\Http\Response;
and
public function index()
{
$data = DB::table('tracks')->where('published', 1)->get();
return response($data)->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Credentials', 'true')
->header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
->header('Access-Control-Allow-Headers', 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type');
}
Angular Controller :
'use strict';
angular.module('PlatSplatApp', [])
.controller('AppCtrl', [ '$scope', '$http',
function ($scope, $http) {
var onStatsComplete = function(response)
{
$scope.tracks = response.data;
};
$http.get("http://api.platspl.at:8000/tracks")
.then(onStatsComplete);
}
]);
I'll probably teak this solution as I continue work on the site, but everything snapped into place when I added the headers to the JSON response.
I hope this helps someone and Thanks Again to Wilmer S!
Answered By - Scudder Stevens
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.