• cst1992 (unregistered)

    My palm instantly met my head.

    That's what you called 'mangled Angular'.

  • (nodebb)

    Is this a case of ObtuseJS or of imaginary/complex angles?

  • Ron Fox (google) in reply to cst1992


  • DocMonster (unregistered)

    Very sad to see that people smart enough to use AngularJS write it like complete shit. While it's not like using Angular immediately makes you a good developer, it's one of those tools where you assume that anyone who is using it isn't your typical run of the mill Mort dumbass because they at least know other choices are out there and what they can do. It's so rare to actually find a company who knows what the hell Angular even is (insert any other framework type of thing), let alone use it, so to see crap like this get written makes me more than a little sad.

  • (nodebb)

    Sometimes you know there must be a better way, but the time investment to find out how is impossible to judge. If you don't have the time or will to learn how the tools you use work, this is the kind of code you write. I've written similar code, some of it is still in production after years. In the end if it works you're not going to go back to fix things just because you learned how to do it properly.

    The important bit is to rewrite it when you touch it again.

  • Dude (unregistered)

    Not to defend this in any way, but I could see this come around because the person who did it didn't really know what angular was outside of data binding. For my own short experience with Backbone, I'm sure I've done things equally stupid - and as I've learned more about what it and other components can do, I try to go back and 'fix' them to fit with the framework better. However, it's not always possible to get to all of them, and you can still find some interesting gems like this every so often.

    That being said, since they seem to know what $pristine is, it's odd that they want to control it manually, but not unheard of - I'm sure there's a better way of making Angular control it the way they want though..

  • NotAWebDeveloper (unregistered)

    I am not a web developer, but the 3rd Google result for 'Angular $valid' was instructions on client side form validation. Not that hard to find.

  • Pussycat (unregistered)

    “JavaScript scope is too complicated, so we’re just not going to do it and require developers to use our own custom expression language”

    Err... no. Not JavaScript scope, but DOM scope. There is no DOM scope, so Angular had to bring its own.

    My statement isn't 100% accurate because you can have such stuff as "transclude" where the scope hierarchy doesn't correspond to the DOM hierarchy anymore, so you have to look at Angular scopes separately from the DOM. The idea is that a DOM element may have a $scope attached.

    I do hate Angular using "two-way binding" as its main selling point. For me that's nice, but other guys do it too. To me the selling point of Angular is: directives. I use Angular with directives where I used to use jQuery before. The code is so much cleaner and encapsulated. You put your directive where you want it to take effect and you know it's there just by looking at it, unlike jQuery where the code operating on your element could be pretty much anywhere, hidden from sight, and you don't know it's there until it smashes your stuff. It's a bit harder to write, but the end result is so much better.

  • mcv (unregistered)

    I'm not that surprised that people write terrible Angular code. Angular requires a very different mindset from the classic imperative style that many programmers grew up with. Angular is more declarative, which I like a lot, but takes some getting used to for some people.

    But of course when you use a framework that does a lot for you, it helps if you have some idea of what your framework does for you, otherwise you end up missing out on all the benefits of your framework, while still being limited by its limitations. It's better to use plain javascript at that point.

  • droog (unregistered)

    Then again, you could drop the ten thousand line JS framework and instead put together a few HTML5 attributes and CSS rules to do some form validation.

  • isthisunique (unregistered)

    I don't know exactly what is going on here but I would probably do it with just a counter and an event handler for each one something like this:

    count_empty += is_empty + -was_empty; // Brillopad.

    The form validator is then:

    return !!count_empty;
  • thomas (unregistered)

    Jameson should be grateful he could modify the watcher and didn't have to tweak the operating system kernel and file system.

  • Carl Witthoft (google) in reply to gleemonk
    Sometimes you know there must be a better way, but the time investment to find out how is impossible to judge

    That's what StackOverflow is for, duh!

  • PTO (unregistered)

    The WTF of this depends on the company culture - it could be that you have to use a particular framework, whether you know it or not, and whether it needs to be used or not. I've seen code which loads libraries, etc, then never makes use for them, simply because that's the standard.

  • (nodebb)

    Apart from abusing $pristine, this code doesn't seem that terrible to me (disclaimer: I have no knowledge of front-end development at all, much less Angular). They're trying to do some basic validation – if a credit card is active it needs to have the details filled out, and so on – which presumably should be done using $valid as "NotAWebDeveloper" mentioned. I find it difficult to believe that these requirements "aren't in any way based on the requirements for this application" as the article says; they seem eminently sensible to me. And I wonder if Jameson bothered to replicate them, or whether in a few months one of his colleagues will have to work out why they have half-filled out entries in their system.

  • itsnotunique (unregistered)

    The real WTF is obviously the glorious train wreck that is web development with library clusterfucks sprinkled on top.

  • Alex (unregistered) in reply to Scarlet_Manuka

    Scarlet, you have a point. Reading the JS carefully reveals that the inputs are coupled by design. It looks like inputs 0, 5, and 10 are required, while the groups 1-4, 6-9, and 11-12 are only required if at least one member of the group is keyed in. This is still bad code. Ignoring the $pristine abuse, there are still a few problems

    1. $watches are expensive and slow and unnecessary here
    2. This could have been done with a $validator which would make the code more semantic and make the template easier to read
    3. The use of array indices makes the code hard to read
    4. The JS, as written, assigns to the $pristine multiple times when once would be enough. The boolean expressions could be refactored. Eg:

    var isGroup1CompleteOrEmpty = newValues.slice(1, 5).map(function(item, arr) { return !!item === !!arr[0]; }); var isGroup2CompleteOrEmpty = newValues.slice(6, 10).map(function(item, arr) { return !!item === !!arr[0]; }); var isGroup3CompleteOrEmpty = newValues.slice(11).map(function(item, arr) { return !!item === !!arr[0]; });

    $scope.companyProfileForm.$pristine = !( newValues[0] && isGroup1CompleteOrEmpty && newValues[5] && isGroup2CompleteOrEmpty && newValues[10] && isGroup3CompleteOrEmpty);

  • dave (unregistered) in reply to droog

    ... which wouldn't be anywhere near as featured as what you can do with AngularJS. Just saying. I'm sure you can do some of it, but to think you can approach Angular's standard when it comes to form validation is unfortunately laughably naive.

  • (nodebb) in reply to Pussycat

    "... the selling point of Angular is: directives."


    Binding also supports a getter/setter function pattern, meaning you can easily pick up changes to bound variables and your logic doesn't have to be a series of inane integers.

    Addendum 2017-01-26 05:53: Also watchers are an abomination and shouldn't be used unless you absolutely can't think of a way to do it properly.

Leave a comment on “An Angular Watch”

Log In or post as a guest

Replying to comment #:

« Return to Article