1

So after coming from React.js I started to learn angular. A lot of things seems to me unnecessary overcomplicated, li why do I need to import component to the file AND to the angular app. Right now I think I figured the main idea, angular is a complete bundle (or app) that provides much more functionality than React, and it needs to be awarded about all its components.

But I still don't understand why we need Services. I understand the Services idea and concept, that I can create "UserService" that has all the user calls and inject it into different components. But if I will put all the functionality into a regular js fill and import them into the components, would it be the same?

I will clarify my question, is there any advantage or needs to use Angular Service in the Angular app instead of regular js fill which exports all the functionality?

Smiled_One
  • 445
  • 1
  • 4
  • 17
  • As i have gone through many frameworks, services are used to write your business logic or re-usable code. Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Ref: https://angular.io/tutorial/toh-pt4#why-services – Vicky charanpahari May 13 '18 at 05:17
  • duplicate :https://stackoverflow.com/questions/16709421/why-use-services-in-angular – Vicky charanpahari May 13 '18 at 05:20
  • @Vicky Charanpahari not duplicate. This guy suggests keeping everything in the same file. I understand the separation idea, just not the angular "Service" idea – Smiled_One May 13 '18 at 05:22
  • 1
    *But if I will put all the functionality into a regular js fill and import them into the components, would it be the same?* - no. You're likely already using DI pattern or containers with HOCs, context or Redux providers to achieve same purpose as Angular services. See also https://www.martinfowler.com/articles/injection.html – Estus Flask May 13 '18 at 10:35
  • ＠estus maybe, not sure if webpack doing it or not when it build the react app – Smiled_One May 14 '18 at 06:11

2 Answers2

2

Services are singleton (specifically, services registered with the root injector).

Some reasons services are useful:

  1. Best practices to separate logic regarding things such as HTTP requests from the actual components that should only control how UI interacts with data.
  2. Injector ensures that each component that is injected with a service gets the same instance, hence it allows things such as sharing data across components.
  3. It allows Dependency Injection
Joshua Chan
  • 1,797
  • 8
  • 16
  • And if I will separate the login in a regular js which is not a service and export it to the component, will it be any different? – Smiled_One May 13 '18 at 05:23
  • 1
    Services are only created once and only 1 instance of the service will be used for your app. Unless you register the service as a component-scoped service, then it'll be instantiated according to the component's life cycle. More comes in when you want to use the same service in multiple components, exporting it directly into the component would result in separate instances. – Joshua Chan May 13 '18 at 05:26
  • Oh! Is it like managing it for you? importing will just add the code to every file instead. Do you know where I can read more about this stuff, I search a bit about angular service and didn't find any in-depth explanation – Smiled_One May 13 '18 at 05:32
  • 1
    Yes, injecting the service through the constructor would give you a reference to the already-instantiated service in the rootInjector. You could read from the official docs about [Dependency Injection](https://angular.io/guide/dependency-injection) and [Service Architecture](https://angular.io/guide/architecture-services). – Joshua Chan May 13 '18 at 05:35
  • 1
    JS modules (ES modules in particular) may naturally provide singletons. – Estus Flask May 13 '18 at 10:34
  • It sounds so useful, sounds weird that react doesn't have anything similar. Like it had Redux for the data, but you are using redux when you got no choice :-( – Smiled_One May 14 '18 at 06:13
  • React is a more lightweight library I guess whereas Angular is an entire platform/framework. Not sure but I would want to think that React has libraries to augment Dependency Injection. – Joshua Chan May 14 '18 at 06:41
2

Using services helps you to isolate your controller doing business logic, communication, and storage related things because services are intended for business logic or communication with server either Storage use.

With this approach, you use the controller only for view management, data binding, form validations, user interactions, etc. and separate concerns on the testability of your Angular application, that's why you can write unit tests (like Karma) much easier.

The Controller is a constructor, works like a class and Angular create new instances of the controller every time view is created as well as destroy controller when the view is destroyed. The controller is not suitable for keeping application data throughout the application life-cycle. That's why services should not be used within views directly, instead, they need to be injected into the controller. Services should not manipulate DOM objects, either HTML and CSS.

mpro
  • 14,302
  • 5
  • 28
  • 43