4

I am reading about Events on the Mozilla, here it talks about "Inline events handlers" these should not be used and are considered a bad practice.

e.g.

<button onclick="bgChange()">Press me</button>

However, in frameworks such as Angular we do something like:

<my-component (click)="onClick($event)"></my-component>

Is this not contradicting to what bad practice is considerd by Mozilla in this case?

If this question needs to be asked in another section, please do let me know.

Harry
  • 3,031
  • 7
  • 42
  • 67
  • They are totally different things. – Estus Flask Dec 29 '17 at 15:56
  • > If this question needs to be asked in another section, please do let me know. Which question? You did not ask any – smnbbrv Dec 29 '17 at 15:59
  • 1
    @smnbbrv There is a question, just no question mark. – Cody Ｇ Dec 29 '17 at 15:59
  • 5
    The angular version is a template, so the angular engine will replace that syntax with proper event handlers, while in the vanilla version the handler stays inline. Some of the reasons why it's considered a bad practice is seperation of concerns, eg html and javascript should not be in the same file. It also makes it more difficult to update later on if you have to look at the HTML source as well to figure out what happens where. Have a look at https://stackoverflow.com/questions/11737873/why-is-inline-event-handler-attributes-a-bad-idea-in-modern-semantic-html they have more arguments. – Shilly Dec 29 '17 at 16:00
  • 2
    @shilly that sounds like a good answer.. – Jonas Wilms Dec 29 '17 at 16:03
  • makes sense thank you @Shilly – Harry Dec 29 '17 at 16:04
  • 1
    question mark added :p @smnbbrv – Harry Dec 29 '17 at 16:05

1 Answers1

0

This is a question of "separation of concerns", and your component is generally separated into a file, which then contains the "control" of that component.

Angular directives are basically an idea that builds upon this in your templates.

In-lining it into the html without such a system of functionality (like angular) is akin to writing your entire html templates in your javascript --- bad, unless you have a system that is helping you do that.

Basically, without angular you should "keep your javascript in your javascript" and your "html in your html".

Read further about MVC and separation of concerns at

https://www.safaribooksonline.com/library/view/programming-javascript-applications/9781491950289/ch05.html

Angular’s controllers might remind you a lot of models from other MVC implementations, if you’re a follower of the “fat models, skinny controllers” approach.

Cody Ｇ
  • 8,368
  • 2
  • 35
  • 50