Data service created by angularjs factory doesn't get dependencies - angularjs

Question

I am trying to wire up a simple data service to retrieve data from the server for http calls. I am using TypeScript to write the code. For some reason I can't get the service to see its dependencies.
Here is the service the way it is generated by Typescript
var app = angular.module('app',[]);
app.constant('baseUrl', 'http://localhost:63342');
//This follows the pattern created by Typescript
var myService = function(){
function myService($http, baseUrl){
this.$http = $http;
this.baseUrl = baseUrl;
this.http = typeof this.$http;
this.url = typeof this.baseUrl;
}
myService.$inject = ['$http', 'baseUrl'];
return myService
}
app.factory('myService', [
'$http', 'baseUrl',
myService
]);
app.controller('myCtrl',
['$scope', 'myService',
function($scope, myService){
$scope.httpType = myService.http;
$scope.urlType = myService.url}]
);
When I run the code locally the p tags get the ng-bind attributes set on them. But, of course, they have nothing in them. When I break on the $scope assignments, myService is available and it has the $inject variable, but none of the other 4 variables. The available examples for Typescript and angular are pretty thin. There must be something really basic I am doing wrong.
Here is a fiddle with the code. I don't know why the fiddle doesn't transclude the scope variables.

Answer 1

The issue is in :
var myService = function(){
function myService($http, baseUrl){
this.$http = $http;
this.baseUrl = baseUrl;
this.http = typeof this.$http;
this.url = typeof this.baseUrl;
}
myService.$inject = ['$http', 'baseUrl'];
return myService
}
app.factory('myService', [
'$http', 'baseUrl',
myService
]);
Angular will call myService with arguments $http,baseUrl which myService does not accept. So you need to do :
var myService = function($http, baseUrl){
this.$http = $http;
this.baseUrl = baseUrl;
this.http = typeof this.$http;
this.url = typeof this.baseUrl;
}
myService.$inject = ['$http', 'baseUrl'];
Alternatively if you want to use TypeScript classes use the same pattern I recommend for Controllers : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1 and use service instead of factory

Answer 2

I was able to get it to work following a module pattern to expose your service's properties, as well as using the inline notation to declare the service. Check out the plunker here: http://plnkr.co/edit/tVajIshcCegIwywGWL9Y?p=preview. Code pasted below for the script:
var app = angular.module('app',[]);
app.constant('baseUrl', 'http://developer.echonest.com/api/v4/artist/news?api_key=FILDTEOIK2HBORODV&id=7digital-US:artist:304&format=json');
app.factory('myService', ['$http', 'baseUrl', function($http,baseUrl){
var http = typeof $http;
var url = typeof baseUrl;
return {
http: http,
url : url
};
}]);
app.controller('myCtrl',
['$scope', 'myService',
function($scope, myService){
$scope.httpType = myService.http;
$scope.urlType = myService.url;
}]
);