Angular JS setting a base API URL for requests - angularjs

Question

i am building an AngularJS app this is what i have atm:
App.js
var youtubeTrackerApp = angular.module('youtubeTrackerApp', [
'youtubeTrackerControllers',
'youtubeTrackerServices'
]);
Services.js
var youtubeTrackerServices = angular.module('youtubeTrackerServices', ['ngResource']);
youtubeTrackerServices.factory('YouTubeVideo', function($http) {
var YouTubeVideo = function(data) {
angular.extend(this, data);
}
YouTubeVideo.get = function(id) {
return $http.get('/Api/YouTubeVideo/' + id).then(function(response) {
return new YouTubeVideo(response.data);
});
};
YouTubeVideo.prototype.create = function() {
var youTubeVideo = this;
return $http.post('Api/YouTubeVideo/', youTubeVideo).then(function(response) {
youTubeVideo.id = response.data.id;
return youTubeVideo;
});
}
return YouTubeVideo;
});
The issue is that Angular is posting like this:
http://localhost/Api/YouTubeVideo/123
And while i am developing, i need it to post to
http://localhost/youtubetracker/web/app_dev.php/Api/YouTubeVideo/123
Since i am using Symfony. I am quite new to AngularJS, the and i cant seem to figure out how to inject a base URL between the localhost and endpoint.
Any other tips combining Symfony and Angular are welcome.

Answer 1

when using a PHP end point i would suggest hacking into the .htaccess file
Something like this
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)$ api.php?x=$1 [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ api.php [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} -s
RewriteRule ^(.*)$ api.php [QSA,NC,L]
http.get youtubetracker/web/app_dev/Api/YouTubeVideo/123
php api file in youtubetracker/web/app_dev/Api/
im assuming that YouTubeVideo & 123 params