Angular4 - clean code, how to don't duplicate code

Question

my questions is about good practice to write clean code in angular 4.

I have two components - client and host, their are pretty similar, both have some <video> element and both have similar code for handle this <video> element.

So what is the best way to implement this without duplicating code in this two components?

Remember if I will create another component for example video-component and then I will have in this <video> I must supply some public functions to turn on, off camera, microphone, start stream, close stream, etc... There are a few functions that I have to run from Client/Host-Component in my new Video-Component.

If you are using typescript, you can create a base class and two derived classes. — dkarchmer
– dkarchmer, Commented Sep 2, 2017 at 21:12
this is a really general question. but if you have a component that is more or less used in multiple places, like a video player with enhanced functionality, then you should create a component that wraps it so that it can be reused and customized with general inputs (like the source url) and that broadcasts general output events for consumers to handle (like video paused or something). You can also expose functions on it that consumers can use, either directly or through a shared service. — bryan60
– bryan60, Commented Sep 2, 2017 at 21:12

jeprubio · Accepted Answer · 2018-03-13 19:51:30Z

3

Reusing code in Angular is done via services. You can inject the services in other component by listing it in the component's constructor.

Angular will look through the provider tree and inject an instance of the service for you. Depending on whether you want a singleton service or a separate instance of the service for each component instance, you provide a service in the module or in the component.

The code in the component should be very lean and contain only very trivial functions and some state variables (although, even state is prefered to be substituted with observables, but that's another topic).

This model favors composition over inheritence and works much better, at least in a prototype based language such as JavaScript (and TypeScript). It allows you to compose functionality from multiple services instead of just a single base class.

edited Mar 13, 2018 at 19:51

jeprubio

18.1k5 gold badges51 silver badges62 bronze badges

answered Sep 2, 2017 at 21:35

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krzysztof Lach · Accepted Answer · 2017-09-02 22:11:30Z

Angular is all about granularity. You should create something like "common frame" for your application where you will include common components and services for entire application. Common components are called Nested components. Examples: video player, voting stars etc. After you specyfi all common nested components and services you just resolving them via builded in Angular Dependency Injection container to use them whenever you want. ( Just like @Lazar Ljubenović wrote).

Second type of the components are so called Routable components you are useing them when you want to have a significant part of a application. For example: welcome page, details page etc.

Besides that what you should check in the first place is Angular2 style guide. You can find there very important informations about good practices.

Collectives™ on Stack Overflow

Angular4 - clean code, how to don't duplicate code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related