9

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.

Improve this question
2

1 Answer 1

Reset to default
6

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.

Improve this answer
3
  • 3
    Good explanation, but I'm wary of your statement "not doing Progressive Enhancement." Progressive enhancement is way more than falling back to noJS. It's providing retina images and SVGs with fallbacks for those without retina devices. It's adding subtle animations to browsers that support them. It's reducing streaming video quality on low bandwidth devices (like youtube does). It's responsive design. You may not need noJS fallbacks for your web application, but don't abandon progressive enhancement.
    – bryanbraun
    Commented Jul 31, 2015 at 2:39
  • 1
    @bryanbraun you are correct. Point taken.
    – Aaron Greenwald
    Commented Aug 1, 2015 at 4:17
  • How do you do unobtrusive Angular? We are ready to roll out Angular and found a serious design flaw. We have a 50 person HTML design team and a two person development team. Designers change HTML without adding non-html. Two developers cannot keep up with 50 designers if we had to adjust every template created every day even after websites are posted. It also seems silly to compile whole html templates into JavaScript code like Webpack when you could automate that function on the server to gather, compress, and cache html by page scope in a zip file with the same client download efficiency.
    – Zachary Scott
    Commented Jul 11, 2019 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.