I have tried every example I have found, and am still unable to call an NG1 Service from my Angular Component.
Is this even possible in the way I am describing below?
Service is defined like so:
'use strict';
angular.module('app.shared.services').factory('ng1TestService', ng1TestService);
function ng1TestService() {
var getGreeting = function () {
return "HELLO DOM! GOOD JOB!";
}
return {
getGreeting: getGreeting
}
}
I am calling upgrade on this service in my component:
upgradeAdapter.upgradeNg1Provider('ng1TestService')
Component Constructor:
constructor(#Inject('ng1TestService') ng1TestService : any) {
var hello = ng1TestService.getGreeting();
}
PROBLEMS:
I get an error saying that there is no Provider for ng1Test Service
I cannot call the NG1 Service
I had to add the "any" cast to resolve an error
It is not possible for me to add this Service to my "Providers" list since it is not in TS format
Any input would be appreciated.
Thanks!
Related
I have an Angular 1.x application. Now that there is a use case where in I have to access the Angular 1.x Services / Factories in ES6 Classes which are not part of or registered with Angular JS. In short I would want to do something like export an Angular Service and import in ES6 class. I know this is not directly possible but will there be a work around ?
So I have a service like
(function () {
angular.module('myApp').service('ServiceOne', function () {
return {
property: value
};
});
})();
and now there is an ES6 class another (service file)...
import angular from 'angular';
// const $injector = angular.injector(['ng', 'myApp']);
// const ServiceOne = $injector.get('ServiceOne');
// const ServiceTwo = $injector.get('ServiceTwo');
class Es6Service {
constructor() {
//this.serviceOne = ServiceOne;
//this.serviceTwo = ServiceTwo;
}
methodOne() {
// code
}
methodTwo() {
// code
}
}
export default Es6Service;
I know that injector.get('serviceName') can get us the service instance, in my case I am getting an error of unknown provider. My assumption is that the angular module reference is missing perhaps here.
If that is the case then how can I get the Module reference here ? or there is some other way to achieve this ?
Thanks
Looks strange but should work:
import angular from 'angular';
let _$injector;
angular.module('myApp').run($injector => _$injector = $injector);
class Es6Service {
methodOne() {
// Cannot call this method until angular initialize
return _$injector.get(...)
}
I have the following file: classAModel.js with the following code:
class classAModel{
constructor(model) {
'ngInject';
if (!model) return {};
this.id = model.id;
this.name = model.name;
this.displayName = model.displayName;
}
}
export default classAModel;
This code is defined as a factory in another file: module.js:
import classAModelfrom './classAModel'
module.factory('ClassAModel', ClassAModel);
This code works perfectly when not in a testing context. It works using Webpack to create a bundle that is loaded and runs. So far so good. Now, the question is how do I test this class. Before I changed my code to es6 style, it used be a function and it worked. The test first loads the bundle, but when I try to inject the factory (again, same as before), I get an error: Unknown provider: modelProvider <- model <- classAModel. I can understand why he thinks there is a problem, but I can't understand how to fix it.
Moreover, I'm wondering if this is the correct way to work with the factory rather then create a factory method inside the class, that gets the model, and then create my object.
Thanks
Based on the information you've provided, here's a simple test case for testing your factory. Hope this is what you're looking for.
import classAModel from './classAModel'
let classAInstance;
describe('classAModel', function() {
beforeEach(function() {
modelInstance = new Model();
classAInstance = new classAModel(modelInstance);
});
it('should have id provided by model', () => {
expect(classAInstance.id).toBe(modelInstance.id);
});
});
I saw a piece of code about Angular's Provider like below:
angular.module('BlurAdmin.theme')
.provider('baConfig', configProvider);
/** #ngInject */
function configProvider() {
var conf = {
theme: {
blur: false
}
};
conf.changeTheme = function(theme) {
angular.merge(conf.theme, theme)
};
conf.$get = function () {
// what does this code meaning? why delete $get?
delete conf.$get;
return conf;
};
return conf;
}
But i don't know the delete conf.$get to mean what?
Apparently, the author of this provider thought it was a good idea to return the provider itself from the $get method. So, the service created by the provider is the provider itself.
Since $get should obviously not be part of the methods of the service, but only of the methods of the provider, he/she removed the $get method after $get has been called by angular to create the service instance.
I wouldn't use that code as a good example of how to create a service using a provider. Just use a different object for the provider and the service.
Here's the piece of code I'm writing in angularjs 1.5.5:
export default angular.module(
'myApp', [])
.provider('finder', function finderProvider() {
this.$get = $get;
function $get() {
console.log('GET');
}
this.callMe = () => {
console.log('CALLED');
};
})
.config(['finderProvider', function(finderProvider) {
//finderProvider.$get();
finderProvider.callMe();
}])
.name;
I'm trying to inject a service into this provider later. I read on documentation that I can only inject a service inside a provider using $get() method. However, I cannot call $get() automatically. The only way I can get this working is to call $get() manually in the section where I commented the call. But it doesn't seem right to me to call $get manually.
In this example only 'CALLED' is getting logged. Any idea what I'm missing here?
EDIT. I tried to use another syntax using the arrow function, but got the same result:
.provider('finder', () => {
return {
$get: () => {
console.log('GET');
},
callMe: () => {
console.log('CALLED');
}
};
})
Thanks in advance.
Angular services are lazily instantiated.
Service provider constructor function is called when it is injected during config phase (config block or other provider).
$get is called when service instance is injected after config phase.
In the example above finder service isn't injected anywhere, service instance isn't created and $get function isn't called.
I'm trying to get the text defined in our translations.js file in order to pass it to an angular-bootstrap alert as its text. I've injected the $translate service into the controller and am using the $translate service like so:
$translate('TXT_ALERT_MSG').then(function (translation) {
$log.debug( translation );
});
but it breakes angular and states the following error message:
TypeError: object is not a function
This is thrown on the very first line of the code above. I wrapped it in a promise to make sure i only print the value upon successfully retrieving the translation. I also tried assigning the value to a variable but this throws the same error:
function getTranslation() {
var msg = $translate('TXT_ALERT_MSG');
$log.debug(msg);
}
getTranslation();
This is most likely something simple so what is it?
Thanks
EDIT
How I inject the translate module into the app:
angular.module('MainApp',['pascalprecht.translate']);
and how it's configured:
angular.module('MainApp').config(['$translateProvider', 'ConfigProvider', function ($translateProvider, ConfigProvider) {
var config = ConfigProvider.$get();
var rootUrl = config.get('ourRootUrl');
$translateProvider.translations('en', {
// all our translations e.g.
TIMED_OUT_BUTTON: 'Return to Dashboard'
$translateProvider.preferredLanguage('en');
}]);
Try to get the translations by translate filter
$filter('translate')('TIMED_OUT_BUTTON')