As I delve into creating a Single Page Application with Angular 7, I find myself questioning the prevalent recommendation of storing data in services as opposed to a file with constants that can be directly imported. The simplicity of directly importing a constant is appealing, so what am I missing here?
Here's a snippet of my current code:
userSession.ts
export const userSession = {
loggedIn: null,
userId: null
};
something.service.ts:
import { userSession } from '../appGlobals/user-session';
// decorators, etc .......
export class SomethingService {
constructor() { }
doSomething() {
if (userSession.loggedIn) {
// carry out an action
}
}
The conventional approach suggests the following setup:
user.service.ts
//imports and decorator ....
export class UserService {
session = {
loggedIn: boolean;
userId: number;
}
//...
}
some.service.ts
import { UserSession } from '../services/user.service.ts';
// decorators, etc .......
export class SomeService {
constructor(private userService: UserService) { }
doSomething() {
if (this.userService.session.loggedIn) {
// perform a task
}
}
}
When dealing with extensive classes utilizing user session fields, using the "userSession" object seems more streamlined than accessing "this.userService.session" by injecting the dependency into the constructor. So, what are the pros and cons of each approach?