i want to share data between components, so im implemented a Service which has an EventEmitter.
My Service looks like this:
#Injectable()
export class LanguageService {
constructor() {
this.languageEventEmitter = new EventEmitter();
this.languages = [];
this.setLanguages();
}
setLanguages() {
var self = this;
axios.get('/api/' + api.version + '/' + api.language)
.then(function (response) {
_.each(response.data, function (language) {
language.selected = false;
self.languages.push(language);
});
self.languageEventEmitter.emit(self.languages);
})
.catch(function (response) {
});
}
getLanguages() {
return this.languages;
}
toggleSelection(language) {
var self = this;
language.selected = !language.selected;
self.languages.push(language);
self.languageEventEmitter.emit(self.languages);
}
}
I have to components, which are subscribing to the service like this:
self.languageService.languageEventEmitter.subscribe((newLanguages) => {
_.each(newLanguages, function (language) {
self.updateLanguages(language);
});
});
When both components are loaded, the language arrays get filled as i wish.
This is the first component:
export class LanguageComponent {
static get parameters() {
return [[LanguageService]];
}
constructor(languageService) {
var self = this;
this.languageService = languageService;
this.languages = [];
this.setLanguages();
}
setLanguages() {
var self = this;
self.languageService.languageEventEmitter.subscribe((newLanguages) => {
_.each(newLanguages, function (language) {
self.updateLanguages(language);
})
});
}
updateLanguages(newLanguage) {
var self = this;
if (!newLanguage) {
return;
}
var match = _.find(self.languages, function (language) {
return newLanguage._id === language._id;
});
if (!match) {
self.languages.push(newLanguage);
}
else {
_.forOwn(newLanguage, function (value, key) {
match[key] = value;
})
}
toggleLanguageSelection(language) {
var self = this;
self.languageService.toggleSelection(language)
}
}
When LanguageComponent executes the function toggleLanguageSelection() which triggered by a click event, the other component, which subscribes like this:
self.languageService.languageEventEmitter.subscribe((newLanguages) => {
_.each(newLanguages, function (language) {
self.updateLanguages(language);
})
});
doesn't get notfiefied of the change. I think this happens because both component get a different instance of my LanguageService, but i'm not sure about that. I also tried to create a singleton, but angular'2 di doesn't work then anymore. What is the reason for this issue and how can i solve this ?
You need to define your shared service when bootstrapping your application:
bootstrap(AppComponent, [ SharedService ]);
and not defining it again within the providers attribute of your components. This way you will have a single instance of the service for the whole application. Components can leverage it to communicate together.
This is because of the "hierarchical injectors" feature of Angular2. For more details, see this question:
What's the best way to inject one service into another in angular 2 (Beta)?
Related
I am in the process of converting a AngularJS app to Angular 7 in TypeScript.
I am having some problems with converting some complex nested promises to Observables.
Here is an example of the code I'm dealing with:
signup.component.js
function SomethingSignupController(somethingApplication) {
function activate() {
getApplication();
}
function getApplication() {
vm.getFromServer = false;
vm.promises = [];
SomethingRepo.get().then(function(application) {
vm.getFromServer = true;
vm.application = application;
vm.promises.push(Something.getCompany().then(function(company) {
vm.company = company;
if (vm.company.structure === ‘more_25’) {
return SomethingRepo.getAllOwners().then(function(owners) {
vm.owners = owners;
for(var i = 0; i < vm.owners.length; i++) {
vm.promises.push(getOwnerFiles(vm.owners[i]));
}
}
}
}
vm.promises.push(SomethingRepo.getSomethingOne().then(function(somethingOne) {
vm.somethingOne = somethingOne;
}
vm.promises.push(SomethingRepo.getSomethingTwo().then(function(somethingTwo) {
vm.somethingTwo = somethingTwo;
}
vm.promises.push(SomethingRepo.getSomethingThree().then(function(somethingThree) {
vm.somethingThree = somethingThree;
}
/* and a few more like the above */
$q.all(vm.promises).then(function(){
postGet();
}).finally(function() {
vm.promises = [];
});
}
}
function postGet() {
/* does something with the data acquired from SomethingRepo */
}
/* when an application is send */
function send() {
somethingApplication.promises = [];
somethingApplication.errors = [];
if (vm.getFromServer) {
update();
} else {
create();
}
}
function update() {
somethingApplication.promises.push(SomethingRepo.update(vm.application).then(angular.noop, function(error) {
somethingApplication.parseErrors(error, ‘Some error’);
}));
patchInfo();
}
function create() {
}
function patchInfo() {
somethingApplication.promises.push(SomethingRepo.patchAccount(vm.account).then(angular.noop, function(error) {
somethingApplication.parseErrors(error, ‘Account error: ‘);
}
/* a few more patches */
$q.all(somethingApplication.promises).then(function() {
/* display dialog */
}, angular.noop).finally(function() {
postGet();
somethingApplication.promises = [];
if (somethingApplication.errors.length >= 1) {
vm.errors = somethingApplication.errors;
}
});
}
}
somethingApplication.service.js
function somethingApplication(SomethingRepo) {
var promises = [], errors = [];
var service = {
promises: promises;
errors = errors;
parseErrors: parseErrors;
};
return service;
function parseErrors(error, base_string) {
angular.forEach(error.data.erros, function(value_params, key_params) {
this.errors.push(base_string + ‘ ‘ + key_params.replace(/_/g, ‘ ‘) + ‘ ‘ + value_params);
}, this);
}
}
somethingRepo.js
function SomethingRepo(Server) {
function get() {
return Server.get(‘/something/application’, null, {noGlobal: true});
}
}
I have reduced the files, but they consist of more code like this.
The point of the controller is to create or update an application for another website. On my website I have a form of fields corresponding to the form on the other website. If you already have filed for an application, but want to update it, the info you already filed are loaded from the other website.
The problem is, in order to create or update an application, a lot of different endpoints requested og posted to.
In AngularJS I store the promises from each request and run them asynchronously in the end. In TypeScript and Angular I want to use Observables and subscribe to the data change.
How do I get started? How do I subscribe to an Observable the requires parameters from another Observable? Any advice how to proceed?
Here's an example demonstrating how you can easily use observables in your scenario -
Your service would be something like this -
import { Injectable } from '#angular/core';
import { AppConstants } from '../../app.constants';
import { HttpClient } from '#angular/common/http';
#Injectable()
export class ExampleService {
constructor(private appconstants: AppConstants, private http: HttpClient) { }
get() {
return this.http.get(this.appconstants.apiUrl);
}
getSomethingOne() {
return this.http.get(this.appconstants.apiUrl1);
}
getSomethingTwo() {
return this.http.get(this.appconstants.apiUrl2);
}
}
Then simply use it in your component as follows -
import { Component } from '#angular/core';
import { forkJoin } from 'rxjs';
import { ExampleService } from '../services/example.service';
#Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
data;
dataOne;
dataTwo;
constructor(private exampleService: ExampleService) { }
getApplication() {
const combined = forkJoin([
this.exampleService.get(),
this.exampleService.getSomethingOne(),
this.exampleService.getSomethingTwo()
]);
combined.subscribe(res => {
this.data = res[0];
this.dataOne = res[1];
this.dataTwo = res[2];
});
}
}
var app = angular.module('testApp', []);
class Component {
constructor(app, name, template, as, bindings) {
this.bindings = bindings;
this.config = {}
this.config.template = template;
this.config.controllerAs = as;
// pre-create properties
this.config.controller = this.controller;
this.config['bindings'] = this.bindings;
app.component(name, this.config);
console.log("Inside Component ctor()");
}
addBindings(name, bindingType) {
this.bindings[name] = bindingType;
}
controller() {
}
}
class App extends Component {
constructor(app) {
var bindings = {
name: "<"
};
super(app, "app", "Hello", "vm", bindings);
}
controller() {
this.$onInit = () => this.Init(); // DOESN'T WORK
/*
var self = this;
self.$onInit = function () { self.Init(); }; // DOESN'T WORK
*/
/*
this.$onInit = function () { // WORKS
console.log("This works but I don't like it!");
};
*/
}
Init() {
console.log("Init");
}
onNameSelected(user) {
this.selectedUser = user;
}
}
var myApp = new App(app);
<div ng-app="testApp">
<app></app>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
I'm trying to "classify" angular 1.5's .component(). I can get most of it figured out but when I try to assign a class method for $onInit it doesn't work. I've tried assigning to it and using arrow notation to call back to the class method but neither work. It does work if I assign an anonymous function directly but I don't want to do that. I want those functions to point to class methods because I find it cleaner.
So ultimately I want my App classes Init() method to get called for $onInit(). Is it possible?
I would like to use angular's component method, but it seems something is wrong. I have been double checking this code for a while. There is no typo, it seems it fits for the documentation, but, still, it is not working.
I have checked, Angular 1.5.3 is installed.
There is no output on the console. According to the documentation and this blog entry I should see the "onInit" text.
The component's template is displayed correctly, and I can see the the template is loaded, but it seems the controller is not instantiated / fired.
My app is written in Typescript.
The component:
module sayusiando.dilib.spa {
export class LeftHandMenuComponent implements ng.IComponentOptions {
public transclude: boolean = false;
public controller: Function = LeftHandMenuController;
public controllerAs: string = "vm";
public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
}
angular
.module("dilib")
.component("dilibLeftHandMenu", new LeftHandMenuComponent());
}
compiled code:
var sayusiando;
(function (sayusiando) {
var dilib;
(function (dilib) {
var spa;
(function (spa) {
var LeftHandMenuComponent = (function () {
function LeftHandMenuComponent() {
this.transclude = false;
this.controller = spa.LeftHandMenuController;
this.controllerAs = "vm";
this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
}
return LeftHandMenuComponent;
})();
spa.LeftHandMenuComponent = LeftHandMenuComponent;
angular
.module("dilib")
.component("dilibLeftHandMenu", new LeftHandMenuComponent());
})(spa = dilib.spa || (dilib.spa = {}));
})(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));
Layout template:
<div>
<dilib-left-hand-menu class="col-lg-2"></dilib-left-hand-menu>
</div>
LeftHandMenuController:
module sayusiando.dilib.spa {
"use strict";
export interface ILeftHandMenuController {
}
export class LeftHandMenuController implements ILeftHandMenuController {
$onInit: Function = (() => {console.log("onInit");});
static $inject = ["LeftHandMenuService"];
constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {
console.log("con");
this.leftHandMenuService = leftHandMenuService;
//this.activate();
console.log("construct");
}
activate() { //activate logic }
}
angular
.module('dilib')
.controller('leftHandMenuController', LeftHandMenuController);
}
Compiled controller code:
var sayusiando;
(function (sayusiando) {
var dilib;
(function (dilib) {
var spa;
(function (spa) {
"use strict";
var LeftHandMenuController = (function () {
function LeftHandMenuController(leftHandMenuService) {
this.$onInit = (function () { console.log("onInit"); });
console.log("con");
this.leftHandMenuService = leftHandMenuService;
//this.activate();
console.log("construct");
}
LeftHandMenuController.prototype.activate = function () {
var _this = this;
this.leftHandMenuService.getLeftHandMenu()
.then(function (result) {
_this.leftHandMenu = result;
});
};
LeftHandMenuController.$inject = ["LeftHandMenuService"];
return LeftHandMenuController;
})();
spa.LeftHandMenuController = LeftHandMenuController;
angular
.module('dilib')
.controller('leftHandMenuController', LeftHandMenuController);
})(spa = dilib.spa || (dilib.spa = {}));
})(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));
I called the $oninit in a wrong way. Here is the proper, well working code:
module sayusiando.dilib.spa {
"use strict";
export interface ILeftHandMenuControllerScope {
}
export class LeftHandMenuController implements ILeftHandMenuControllerScope {
public leftHandMenu: Array<sayusiando.dilib.spa.IModuleContract>;
static $inject = ["leftHandMenuService"];
constructor(
private leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {
}
public $onInit = () => {
this.leftHandMenuService.getLeftHandMenu()
.then((result: Array<sayusiando.dilib.spa.IModuleContract>): void => {
this.leftHandMenu = result;
});
}
}
angular
.module('dilib')
.controller('leftHandMenuController', LeftHandMenuController);
}
I think this is due to missing dependency parameter list on the module definition. There is a difference in these two statements:
angular.module("dilib")
angular.module("dilib",[])
The first statement tries to access an existing module with name dilib, whereas the second statement tries to create a module dilib with no dependencies. I believe you are trying to create a new module, and hence will need the second format.
I am building routes/states and the menu based on what the user is authorized to see. I've looked around and tried a few different things, but i'm hitting a brick wall. The SessionService object in the RoleService Factory is empty whenever RoleService.validateRole() is called. No route is added and the app is effectively dead. Why is the injected factory empty and the methods undefined.
Here is a simplified layout of the app starting in order of dependencies.
In app.run(), I am adding the states to the app instead of doing it in the config.
$stateProviderRef.state(value.stateName, state);
The states come from (a factory) AppConfig.getStates(), which returns an array.
var states = AppConfig.getStates();
In getStates() we validate each route's role.
if(RoleService.validateRole(routes[i].role))
The RoleService depends on the SessionService and the validateRole function does this check:
if(SessionService.currentUser.role === role)
The SessionService depends on the AuthenticationService which is just a factory that returns a promise using $http (the user object). The SessionService.currentUser is a function that .then()s the returned promise from the AuthenticationService.
return {
currentUser: function(){
AuthenticationService.then(function(result){
return result;
});
}
};
I'm not sure of a better way to explain the code without including the entire files.
Based on the plunker (mentioned in comment), I updated/cloned it to another, which is working
I. simple - when static data are returned (no $http)
Because the service SessonService was defined like this:
return {
currentUser: function() {
...
we cannot call it as a property:
...
return {
validateRoleAdmin: function () {
if (SessionService.currentUser.role === 'admin') {
...
},
validateRole: function (role) {
if(SessionService.currentUser.role === role){
...
it is a function it must be called as a function currentUser():
return {
validateRoleAdmin: function () {
if (SessionService.currentUser().role === 'admin') {
...
},
validateRole: function (role) {
if(SessionService.currentUser().role === role){
...
II. waiting for async calls
The adjusted example
Next, if we in example create a static result of the service AuthenticationService:
angular.module('daedalus').factory('AuthenticationService',
function() {
return {"idsid": "ad_jdschuma","role": "user","id": "33333"}
}
)
we cannot expect there will be some then method:
currentUser: function() {
//AuthenticationService.then(function(result) {
// return result;
//});
return AuthenticationService;
}
And to make it really async we can replace it with this:
angular.module('daedalus').factory('AuthenticationService',
['$timeout', function($timeout) {
return {
getData: function() {
return $timeout(function() {
return {
"idsid": "ad_jdschuma",
"role": "user",
"id": "33333"
}
})
}
};
}])
And then use even the .then() - Session service:
angular.module('daedalus').factory('SessionService', ['AuthenticationService',
function(AuthenticationService) {
return {
currentUser: function(){
return AuthenticationService
.getData()
.then(function(result){
return result;
});
}
};
}]
)
And the RoleService:
return {
...
validateRole: function(route) {
console.log('SessionService currentUser: ' + JSON.stringify(SessionService))
return SessionService
.currentUser()
.then(function(userRole) {
if (userRole.role === route.role) {
return route;
} else {
return null;
}
})
}
And with this in place in appConfig
getStates: function(){
var items = [];
var deffered = $q.defer();
var validatedCount = routes.length;
for(var i=0,len=routes.length; i<len; i++){
var route = routes[i];
RoleService
.validateRole(route)
.then(function(route){
if(route) {
items.push(route.stateConfig)
}
if(--validatedCount === 0 ){ // all processed
deffered.resolve(items)
}
})
}
return deffered.promise;
}
We can do that in run:
AppConfig
.getStates()
.then(function(states) {console.log(states)
angular.forEach(states, function(value, key) {
var state = {
"url": value.url,
"templateUrl": value.templateUrl,
"controller": value.controller
};
$stateProviderRef.state(value.stateName, state);
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
});
$urlRouter.listen();
Check it here
The concept of the second solution (async) is too .thenified(). I just intended to show that all is working. Better approach how to get security data is completely covered here:
Confusing $locationChangeSuccess and $stateChangeStart
Good day,
I have created an object that will manage data access. My app will be using a couple different datastores, so I have created a simple factory to switch between providers:
var dataProvider = {
company: {
getAllCompanies: function (callback) {
var impl = factory.createProvider(implInstance.current)
impl.company.getAllCompanies(callback);
}
}
projects: {
getAllProjects: function (callback) {
var impl = factory.createProvider(implInstance.current)
impl.projects.getAllProjects(callback);
}
}
}
That is all well and good, but I'd rather have my impl variable at the dataProvider level. I'm unsure how I would properly access it though, as 'this' doesn't provide me the right scope when I'm nested so deeply. I'd like something like the following:
var dataProvider = {
impl: function () { return factory.createProvider(implInstance.current) },
company: {
getAllCompanies: function (callback) {
//THIS WON'T WORK
this.impl.company.getAllCompanies(callback);
}
}
Thanks!
You'd want to use the module design pattern for this:
var dataProvider = (function () {
var getImpl = function () {
return factory.createProvider(implInstance.current);
};
return {
company: {
getAllCompanies: function (callback) {
getImpl().company.getAllCompanies(callback);
}
},
projects: {
getAllProjects: function (callback) {
getImpl().projects.getAllProjects(callback);
}
}
}
})();