AngularJS Hello World

[-Kerstin]

The JQuery makes more sense than the AngularJS. When you read the JQuery code you understand how to detect changes and how to modify values. When you read the angularJS code you have no idea what the heck it's trying to do or how to use it for anything else.

[kyle]

I've always admired the simplicity and readability of Angular, glad you pointed that out! 

[bim]

It's true that the Angular JS approach is much shorter, but, I'm sorry, it's not recognizable to a beginner that the code will update something. Or do something on it's own at all, for that matter.

[ericmarcucci]

jquery function can be wrote in one line. Here it takes 6 lines only because you want, not because it needs.

[roryookane]

I am impressed by your fairness and integrity. You didn’t do anything sneaky to make jQuery look worse than it is – you wrote its code quickly, in a straightforward way, making use of your editor’s snippet expansion feature. And the AngularJS version of the page still looked simpler.

[catwhisperer]

I recently had to decide between Backbone & Angular for a new project.
I did my research & your tuts were a great resource. I originally
prototyped the project using Javascript & jQuery, trying to develop my
own framework including url hashing & event bus but it quickly got out
of control due to code bloat. Both Backbone or Angular would
significantly reduce the amount of code I'd have to write but it was
Angular's 2-way binding that ultimately made me decide in its favor.

[jamesnw]

Looks nice, but comparing it to jQuery is apples and oranges. jQuery was originally meant for querying and working with the DOM for whatever need, and not binding. That said, Angular looks like a nice binding framework - and the vids remind me a bit of working with Silverlight (sort of). ;)

[catwhisperer]

That would be awesome, John. Please post an announcement when you do.

[tobiasbeer]

This comparison to paint jQuery as if bloated or incomprehensible falls rather short.

It would have been good to not only see both examples do the same thing, i.e. how to make angular not show an empty "Hello !" but rather only show that after something was typed ...and then also to see the jQuery example as streamlined as possible, just like the angular one.

$(function() {
$('#name').on('keyup', function() {
$('#greeting').text('Hello ' + $(this).val() + '!');
});
})

And there you have it, another few more lines of code here, and less there.

[catwhisperer]

LOL I am getting quite good at spotting the 'pattern'. There's something about the cadence of the key strokes and the movement of the cursor that gives it away. Perhaps you'd like to share your own keyboarding technique and make a vid tut of it. A lot of the younguns out there might find it amazing. Personally, I still lament the loss of Wordstar key bindings and that's really giving away my age :)

[SeanBlader]

I'd say the difference is, one is self documenting, the other you'd need to go track down the documentation to figure out what it's black box is doing. Also, there was mention of a performance issue when starting with document.ready(), but no mention of any performance hit's with angular, or with what happens when javascript might not be available. Overall I could see the usefulness, but without an unbiased comparison it makes it challenging to justify Angular's use.

[NamelessLT]

I have started playing with 2 way binding recently, especially in form UIs, but I can't say it's the most important feature. I guess if everything is bound by default and just autoupdates, it could be quite cool. For example, it seems like it would be cool to to have {{#if condition}} blocks rerendered automagically in your template after condition changes. In general, I suppose it removes some boilerplate. I guess I'll be looking more into binding :)

[briangonzales]

Was this a freak accident, or did you guys plan this?

[johnlindquist]

Isn't it cool that you can "feel" when someone is using VIM bindings? :) I actually do something called "home row computing" where you remap your caps lock key to be a modifier and then h, j, k, l (and everything around them) become your common "edit" keys.

[gokudomatic]

obviously you don't need it. It's the kind of technology people who can find an usage will see it immediately.

[mstalcup]

**SEE CORRECTION AT BOTTOM OF COMMENT**

In jQuery, creating variables for jQuery objects is unnecessary here. It makes the jQuery longer than it needs to be. This is how I would write it:

$(function() {
$('#name').on('keyup', function() {
$('#greeting').text('Hello ' + $(this).val() + '!');
});
})

**CORRECTION: Assigning objects to variables when the objects need to be referenced multiple times speeds up performance. This is always best practice. Thanks to MJ for explaining this. This is better:

$(function() {
var name = $('#name'), greeting = $('#greeting');
name.on('keyup', function() {
greeting.text('Hello ' + name.val() + '!');
});
})

[Vanguard]

great simple example. i find the question what the fuck does your library do question is never actually answered. This just tells me, thanks

[DerekRies]

Sounds like some cherry mx blues. i like it.

[mbarizia]

looks cool but i still prefer jQuery though

[leandrodeleite]

Thanks for the all videos, John!
Very useful comparing imperative and declarative approaches...

I also think this video meant to be the very first "Watch as we build this app", right?!
(Angularjs page links to your 'Todo List' video instead)...