I have been writing AngularJS apps for awhile now, but Typescript is new to me, and then adding in AngularJS to Typescript is a bit different than I am use to.
Anyways, what is the difference between the two:
app.service('customerDataService', Application.Services.CustomerDataService);
and
app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);
Controller TS
module Application {
export module Services {
export interface ICustomerDataService {
getCustomer(id: number): ng.IPromise<Models.ICustomer>;
}
export class CustomerDataService implements ICustomerDataService {
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
}
getCustomer(id: number): ng.IPromise<Models.ICustomer> {
return this.$http.get('data/Customer.json').then((response) => {
return response.data;
});
}
}
}
}
App TS
var app = angular.module('app', []);
app.value('config', new Application.ApplicationConfig());
app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);
app.service('customerDataService', Application.Services.CustomerDataService);
app.controller('DefaultController', ['$scope','config', 'customerDataService', Application.Controllers.DefaultController]);
They both seem to work. Do you have to explicitly define the injections for a service?
I have been writing AngularJS apps for awhile now, but Typescript is new to me, and then adding in AngularJS to Typescript is a bit different than I am use to.
Anyways, what is the difference between the two:
app.service('customerDataService', Application.Services.CustomerDataService);
and
app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);
Controller TS
module Application {
export module Services {
export interface ICustomerDataService {
getCustomer(id: number): ng.IPromise<Models.ICustomer>;
}
export class CustomerDataService implements ICustomerDataService {
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
}
getCustomer(id: number): ng.IPromise<Models.ICustomer> {
return this.$http.get('data/Customer.json').then((response) => {
return response.data;
});
}
}
}
}
App TS
var app = angular.module('app', []);
app.value('config', new Application.ApplicationConfig());
app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);
app.service('customerDataService', Application.Services.CustomerDataService);
app.controller('DefaultController', ['$scope','config', 'customerDataService', Application.Controllers.DefaultController]);
They both seem to work. Do you have to explicitly define the injections for a service?
Share Improve this question edited Oct 10, 2014 at 3:21 PSL 124k21 gold badges256 silver badges243 bronze badges asked Sep 29, 2014 at 22:25 SamSam 15.8k26 gold badges89 silver badges150 bronze badges 2 |2 Answers
Reset to default 18You do need to inject dependencies for service or any other angular entities (providers, factories, controllers etc..) when minifying the code. In a non minified code yes both approaches will work.
Consider the constructor:-
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
}
Case 1 [Explicit dependency annotation]:-
app.service('customerDataService', ['$http', '$q', Application.Services.CustomerDataService]);
No issues in minification as well because even if the minifier changes $http to say a and $q to say b it will still work because angular will internally use annotate to derive the dependencies from the array that you provide defining the service.
Case 2 [implicit dependencies]:-
app.service('customerDataService', Application.Services.CustomerDataService);
In this case if the $http is changes to say a and $q is changed to b angular will look for aProvider and bProvider while instantiating your service and ultimately you app will fail when run with minified files, since there was nothing listed as dependencies angular parser will have to parse the method definition and method's argument names to discover the dependencies.
Another way you can inject dependencies is by using $inject property defined on the function (cTor) (not on the instance). You could do:-
export class CustomerDataService implements ICustomerDataService {
static $inject = ['$http', '$q']; //<-- Inject here
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
}
....
and just:-
app.service('customerDataService', Application.Services.CustomerDataService);
And listing your dependencies sometimes also help use an alternate name for the injected service argument names. If you dont want to do all these and still have your code work with minifier you could go with ng-annotate library.
With angular 1.3 rc, there is an option called strict-di which you can specify with on your rootElement to enforce explicitly annotated dependency injection on any service or any angular entities that will be instantiated during your app lifetime. If you use this option and any services or so that are not explicitly annotated will fail during instantiation.
both are just the same but during minification in your first option ur code will be busted since minification logic is going to change the name of dependencies so in the second option u give an array of dependencies which the minification algo wont touch
$injectproperty:-static $inject = ['$http', '$q']. Using injection also lets you use better variable names sometimes... But with angular 1.3 if you turn on strict-di you are forced to list your dependencies. – PSL Commented Sep 29, 2014 at 22:27