Question

I just started to learn AngularJS and struggle with some concepts of AngularJS. It would be great if somebody could explain me some points…

1. I understand that ng-click is technically not the same as onclick (see here), but both are placed in the markup. I thought that would be a “bad practice”? Why is this one of the core concepts of AngularJS, if most people say this is “bad”? I thought it would be better to select the DOM element from JavaScript and not to place logic in the markup.

2. If ng-click is the right way to react to click events in AngularJS what should I do with other DOM events? I see that there are several other directives like ng-mouseover, but not all DOM events have a AngularJS equivalent. How would I handle a ‘drop’ event in AngularJS (hence in the AngularJS way – not the normal way)? To be clear: I want to drag a file into my webapp.

Thank you very much,
Pipo

Answer 1

Why is this one of the core concepts of AngularJS, if most people say this is “bad”?

Well, people who really like Unobtrusive JavaScript might say it is bad. Angularians (and those with a flex background) see value in the more declarative approach.

“Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together… By declaratively describing how the UI should change as your application state changes, you are freed from low level DOM manipulation tasks. — Overview doc

See also Don't the data attribute options used in Bootstrap, Angular.js, and Ember.js conflict with Unobtrusive Javascript principles?

what should I do with other DOM events?

Write your own directives to listen for them (or find one that someone else has already written). Angular gives you the power to extend what the browser can do — by writing your own directives.

Update: in the comments below, Tim Stewart mentions AngularUI’s ui-event, which lets you bind a callback to any event not natively supported by Angular.