My mobile application utilizes AngularJS for its structure and functionality. Below is the code snippet:
/// <reference path="../Scripts/angular.d.ts" />
/// <reference path="testCtrl.ts" />
/// <reference path="testSvc.ts" />
angular.module('testApp', []);
angular.module('testApp').constant('url','http://whatever');
angular.module('testApp').factory(
'testSvc', ['$http', 'url', testApp.testSvc]);
angular.module('testApp').controller(
'testCtrl', ['testSvc', testApp.testCtrl]);
The app consists of a controller with the following code:
/// <reference path="../Scripts/angular.d.ts" />
/// <reference path="testSvc.ts" />
module testApp{
export class testCtrl {
public someText:string;
public httpData:any;
public urlName:string;
private data:IData;
static $inject = ['testSvc'];
constructor(testSvc) {
this.someText = 'I am in scope'
this.data = testSvc.getData();
this.httpData = {
putFunc: this.data.putFunc,
expectPUTFunc: this.data.expectPUTFunc
}
this.urlName = this.data.urlName;
}
}}
In addition, there is a service component within the app coded as below:
/// <reference path="../Scripts/angular.d.ts" />
/// <reference path="testCtrl.ts" />
interface IData{
urlName:string;
putFunc:string;
expectPUTFunc:string;
}
module testApp{
export class testSvc {
public data:IData;
static $inject = ['$http', 'url'];
constructor(private $http, url) {
this.data = {
urlName:url,
putFunc: typeof $http.put,
expectPUTFunc: typeof $http.expectPUT
}
}
getData(){
return this.data;
}
}}
Finally, the necessary script declarations are included in the HTML file:
<script type="text/javascript" src="../Scripts/angular.js"></script>
<script src="testSvc.js"></script>
<script src="testCtrl.js"></script>
<script src="testApp.js"></script>
Despite setting up my Angular dependencies correctly, the controller does not receive the expected dependency on testSvc.getData(). The issue seems to be that testSvc is undefined. Any insights on what might be causing this problem?