I have created an Angular Controller using SideWaffle's Template for Angular TypScript Controller.
My HomeController.ts file looks as follows.
interface IHomeControllerScope extends ng.IScope {
GetEmployee: (id) => ng.IPromise<Model.Employee>;
}
interface IHomeController {
Employee: any;
}
class HomeController implements IHomeController {
static controllerId: string = "HomeController";
Employee = this.$resource("api/employee/:Id", { Id: '@id' });
constructor(
private $scope: IHomeControllerScope,
private $http: ng.IHttpService,
private $resource: ng.resource.IResourceService,
private $log: ng.ILogService,
private $q: ng.IQService) {
$scope.GetEmployee = this.GetEmployee;
}
GetEmployee(id) {
var defer = this.$q.defer<Model.Employee>();
this.Employee.get({ Id: id },
(result) => {
this.log.debug(result);
defer.resolve(result);
}, (result) => {
defer.reject(result);
});
return defer.promise;
}
}
app.controller(HomeController.controllerId, ['$scope', '$http', '$resource', '$log', '$q', ($scope, $http, $resource, $log, $q) =>
new HomeController($scope, $http, $resource, $log, $q)
]);
TypeScript Compiler generated HomeController.js as follows
var HomeController = (function () {
function HomeController($scope, $http, $resource, $log, $q) {
this.$scope = $scope;
this.$http = $http;
this.$resource = $resource;
this.$log = $log;
this.$q = $q;
this.Employee = this.$resource("api/employee/:Id", { Id: '@id' });
$scope.GetEmployee = this.GetEmployee;
}
HomeController.prototype.GetEmployee = function (id) {
var defer = this.$q.defer();
this.Employee.get({ Id: id }, function (result) {
_this.log.debug(result);
defer.resolve(result);
}, function (result) {
defer.reject(result);
});
return defer.promise;
};
HomeController.controllerId = "HomeController";
return HomeController;
})();
app.controller(HomeController.controllerId, [
'$scope', '$http', '$resource', '$log', '$q', function ($scope, $http, $resource, $log, $q) {
return new HomeController($scope, $http, $resource, $log, $q);
}
]);
As you can see I am injecting multiple services like logger, q, http and resource. whatever i define in constructor is available to me in constructor. but when I go into child methods like GetEmployee(id). those services are not available anymore. So, In child method i get this.$log as undefined. I am not sure how does this works. my observation is that if a method is extending a class than it should have access to its context.
Solution I am looking is where I should be able to make use of all injected services in other child methods.
Solution to this issue is to assign function to a scope variable using arrow method.
interface IHomeControllerScope extends ng.IScope {
GetEmployee: (id) => ng.IPromise<Model.Employee>;
}
interface IHomeController {
Employee: any;
}
class HomeController implements IHomeController {
static controllerId: string = "HomeController";
Employee = this.$resource("api/employee/:Id", { Id: '@id' });
constructor(
private $scope: IHomeControllerScope,
private $http: ng.IHttpService,
private $resource: ng.resource.IResourceService,
private $log: ng.ILogService,
private $q: ng.IQService) {
**$scope.GetEmployee = () => this.GetEmployee ;**
}
GetEmployee(id) {
var defer = this.$q.defer<Model.Employee>();
this.Employee.get({ Id: id },
(result) => {
this.log.debug(result);
defer.resolve(result);
}, (result) => {
defer.reject(result);
});
return defer.promise;
}
}
app.controller(HomeController.controllerId, ['$scope', '$http', '$resource', '$log', '$q', ($scope, $http, $resource, $log, $q) =>
new HomeController($scope, $http, $resource, $log, $q)
]);
This will generate required syntax for your controllers.