Angular View Logic : Separation of Concerns

jwp profile image John Peters ・1 min read

All new Angular components get 4 default files, one of them is this file


It's really easy to just put all our logic right in this file, but does this violate the Separation of Concerns Principle?

It depends on who we talk to about this. If we are strict, the answer is that the name.component.ts file should have minimal logic, all of it pertaining to the view only.

All other logic which processes onClick, onGet, onSubmit, onSave, onDelete etc. should be farmed off into a new ts module such as "someCommonFile.ts"

Like this:

// save is an exported function we import
import {save} from './someCommonFile'

  // just call the function in someCommonFile

When we first start creating new components, we would have put all the save logic into the .component file, but by moving that function elsewhere we are separating concerns which is good, and in this case better.

Remember that exported functions can be used anywhere.

Our new mantra could become "Keep those Views Clean!"

JWP 2020

Posted on by:

jwp profile

John Peters


Angular, React, Typescript and JavaScript. The wave of now! Ok Vue too!


markdown guide