I know there are similar questions, but somehow they all have different code and i cant seem to find something that answers my specific problem, im sorry.
Im following several exmaples, and i got here:
This is my soon-to-be map service (maps.service.js):
import angular from 'angular'
import angularConfig from '../angularConfig/angularConfig'
export default class Maps {
initializeMap (element, options){
return new Promise(function(resolve){
return resolve(new google.maps.Map(document.getElementById(element), options))
})
}
}
Maps.$inject = ['$http']
angular.module(Maps, [])
.service('maps.service', Maps)
You can see its a simple class with a method inside.
At the bottom based on several examples i placed a call to angular.service, gave it a name and used the class i created. I think this is wrong, but i dont know why. I also dont know if thats the correct way to inject a service i need from angular into it.
Then, in order to consume this service i have a small controller (catalog.controller.js):
// import mapService from '../../common/maps/maps.service'
class catalogController {
constructor($scope, mapsService) {
this.$scope = $scope
}
$onInit () {
// map init
mapService.initializeMap(param1, param2)
.then(() => {
console.log('it worked!!')
})
}
}
catalogController.$inject = ['$scope']
export default catalogController;
The problem is no matter how i write the code in the service, i always end up with an error when i try to use it, when i inspect mapService to see what i has inside, the function is not there.
I tried importing it and passing it as a parameter to the constructor, i tried with different ways i found to create the service, but i cant make it work, everyone seems to be using something different.
Both this files are inside a folder named 'catalog', outside this folder i have this file:
import angular from 'angular'
import catalog from './catalog/catalog'
let componentModule = angular.module('app.components', [
catalog
])
.name
export default componentModule
which is in turn used by another file. This whole structure works, as i have things working already with controllers and views. My only problem is how to create and use a service.
Any help will be appreciated, as i have already spent many days on this!
I can provide more details if needed.
Thank you :)
According to DI, do some changes:
Maps Service:
import angular from 'angular'
import angularConfig from '../angularConfig/angularConfig'
export default class Maps {
constructor($http){}
initializeMap (element, options){
return new Promise(function(resolve){
return resolve(new google.maps.Map(document.getElementById(element), options))
})
}
}
Maps.$inject = ['$http']
angular.module(Maps, [])
.service('maps.service', Maps)
catalogController
class catalogController {
constructor($scope, mapsService) {}
$onInit () {
// map init
this.mapService.initializeMap(param1, param2)
.then(() => {
console.log('it worked!!')
})
}
}
catalogController.$inject = ['$scope', 'mapsService']
export default catalogController;
PS: Here is a good example: https://github.com/FountainJS/generator-fountain-angular1
Related
I need to get the instances of my Services/Factory in my Angular JS application. For that reason I would want to use $injector so as to get instances and not depend on DI. I tried to create a wrapper method over $injector which is a seperate js file so that any other modules can call this helper method and get necessary instances. I know this is not straight forward but still wanted to try.
For this my code looks like
//helper.js file
export default function returnInstances(service) {
const app = angular.module('moduleName');
let instance;
app.run(() => {
injector = angular.injector(['ng', 'moduleName']);
instance = injector.get(service);
});
return instance;
}
// some other file
const instance = returnInstances('serviceName');
As expected this does not work. So I was wondering if anything like this is possible.
const helper = {
init: (injector) => this.injector = injector;
get: (name) => this.injector.get(name);
}
export default helper;
And in file where you bootstrap your module:
app.run((['$injector'], $injector) => helper.init($injector));
angular.bootstrap(...
And then u can use it.
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 am new to angular and I want to pass data from one page to another page using local storage.I have tried a lot but unable to find the correct answer
Use factory like below.
angular
.module('xx.services', [])
.factory('xxStorage', ['$window', function($window) {
return {
set: function(_key, _value) {
$window.localStorage[_key] = _value;
},
get: function(_key) {
return $window.localStorage[_key];
}
};
}])
You can use set function to save data in the first page, and then reuse using get function in the other page.
The best way is to use library which already wrapped localStorage functionality in angular area. So there are few such popular solutions like: ngStorage and angular-local-storage. I prefer first one.
Git page, here you can find all information about installing, and using.
Just for example here is sample
var app = angular.module('app', ['ngStorage'])
.config(['$localStorageProvider',
function ($localStorageProvider) {
$localStorageProvider.get('MyKey');
$localStorageProvider.set('MyKey', { k: 'value' });
}]);
Is there a way to get the current used language in a controller (without $translateProvider)?
Couldn't find anything in the $translate service.
$translate.use() is a getter and setter.
See this demo found in links of docs:
http://jsfiddle.net/PascalPrecht/eUGWJ/7/
$translate.use() is the way to go. Also, when an asynchronous loader is executed, you might wanna use $translate.proposedLanguage() which returns the language key of the language that is currently loaded but not finished loaded yet.
When using angular-translate-loader-static-files I have noticed that $translate.proposedLanguage() returned undefined when using the default language while $translate.use() always returned the proposed language.
Therefore I fixed it by using:
var currentLang = $translate.proposedLanguage() || $translate.use();
$translate.use() seems not to work on initial load of the app, to get last selected language from storage: $translate.storage().get( $translate.storageKey() )
or just
$translate.proposedLanguage();
The $translate service has a method called preferredLanguage() that return what you want. The return of this function is the string of the language, like 'en'.
Here i wrote you an example:
angular.module('traslateApp').controller('myController', ['$scope', '$translate', function($scope,$translate){
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
$scope.getCurrentLanguage = function () {
$translate.preferredLanguage();
};
}])
translate.currentLang is used to check the current selected language in i18n
I think this is the better way to determine the language -
$window.navigator.language || $window.navigator.userLanguage
Maybe is not related but could be useful. In angular2+ the way to access to the current language is
...
import { TranslateService } from '#ngx-translate/core';
export class MyComponent implements OnInit {
constructor(private translate: TranslateService) {}
ngOnInit() {
translate.use('it');
const currentLang = this.translate.currentLang;
}
}
import { TranslateService } from '#ngx-translate/core';
export class MyComponent implements OnInit {
constructor(private translate: TranslateService)
{
translate.setDefaultLang('en');
}