I’ll start by saying I’m just learning about AngularJS, and I was reading this article, which seems to advocate for obtrusive JavaScript as the right thing:
http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html
My understanding is that unobtrusive JavaScript is generally considered “the right thing” (which is perhaps debatable, but outside the scope of my question). But I was wondering if there is a particular feature of AngularJS that requires event bindings be specified via attributes like ng-click? Is there a way to use AngularJS and NOT use inline event bindings?
For reference:
Obtrusive JavaScript generally refers to having your JavaScript ties in the HTML itself. Unobtrusive JavaScript refers to using JavaScript or other means to programmatically apply code behaviors to the DOM rather than the plain-text markup having references to JavaScript.
2
Yes.
That’s how angular works.
In olden times (just after the dinosaurs all died out and a bit before smartwatches became The Next Big Thing), Unobtrusive JavaScript was considered The Right Thing. Unobtrusive JavaScript would hang out with her cousin, Progressive Enhancement, and the two of them were heralded as the light unto the world and the beacon of goodness.
There was a reason for that. Lots of users were using browsers with poor JavaScript engines or perhaps no JavaScript engines. Or they had JavaScript disabled. The web was primarily for hypertext transfer, we were told, and we shouldn’t make our websites unusable to some by forcing JavaScript upon them.
By the same token, it made sense to keep JavaScript out of the HTML. HTML should be kept pure, it was thought, because JavaScript was something you added on afterwards – if the user allowed it. If not, at least the HTML markup reflected the semantics of what you were trying to convey.
That’s not the philosophy of AngularJS or most modern web development guidelines because things have changed. When we use AngularJS or similar frameworks, we’re using the web to deliver applications, not just text and images. Web applications are useless without JavaScript, and there’s no point in pretending otherwise. So we’ve thrown off the shackles of Progressive Enhancement because (a) we can safely rely on all of our users having JavaScript enabled and (b) it just slows us down.
Once we’re not doing Progressive Enhancement, why do Unobtrusive JavaScript? Separation of concerns is a wonderful concept. But it’s six of one or half-dozen of the other: you either have HTML riddled with references to JavaScript or you have JavaScript riddled with references to HTML (the jQuery way).
If you use AngularJS, you’ll pretty soon see a cleaner separation of concerns in your code than you’ve seen in other styles of web development. Sure, there are references to JS functions in your HTML. But you can easily move around HTML without worrying about breaking code, and your JS is clean, testable, and does not rely on a very specific DOM. This allows you to reuse business logic better AND reuse HTML better.
Bottom line: don’t stress about it. You’ll get used to it quickly enough. And don’t resist things just because you were always told that the other way is The Right Way.
Addendum
If you feel it’s important for your HTML to be compatible with the standard, you can use the data- prefix on your angular directives: ie, data-ng-click= and data-ng-repeat= and your HTML will be W3C compliant. Personally I never worry about it, but doing it is harmless.
3