Presentation @joedotjs So gentle . . . So a little bit more about me: ! My name is Joe and I have been writing Javascript for about 3 years now. I work at an amazing company downtown called Lawline and for the past 4 months I have been writing a greenfield project in Angular and node.js. And I'm having a great time. ! About a week into it, I had a meeting with my team showing off these amazing things I did with Angular and it felt a lot like this:
Our lead developer said, "Wow, this Angular stuff is amazing. You are clearly the coolest guy in this room right now. But how does it work? What is it doing?" ! And I kind of stared at him blankly and said, "Uhhhhh, it's magic?"
full Shia Labeouf effect. And it does kind of feel like magic sometimes, right? We can do a whole lot with Angular with just a few lines of a code. Throw an ng-model onto an input, couple curly braces, maybe an ng-click or two and we've got something that's actually useful without even thinking about it. ! I was listening to a podcast not too long ago and one of the panelists said along the lines of this:
and started to experience noticeable performance issues. I opened up dev tools and that’s the day I first learned what the $digest loop is.” Really, this just blows my fucking mind. First, two years and you haven't written a single test because you would have encountered the digest loop -- look, nevermind. ! The point is, a very smart, experienced engineer used a framework for 2 years and never encountered what is probably the most crucial part of its internal workings. I don't think this is laziness on the engineer's part, I think it is a feat of engineering on Angular's part.
for beginners. I credit its growing popularity to that characteristic. It was created originally for designers with less Javascript experience to build user interfaces for the web and I think, although it has grown past that, the fruits of that original intent are still there.
I am here today to just ruin all of that for you, strip you of all of that wonderment and naive bliss. I am pulling the head off of Mickey Mouse; I am telling you that Santa isn't real, on your birthday. ! And I'm going to do that by showing you tons of Angular source code.
piece of HTML. We have a button, it has the text "Yes please!", and when we click, we call a function called free puppy. I don't know if this function actually gives you a free puppy, I have not seen the controller.
able to do this for a long time. ! But these kinds of handlers are extremely limiting and unless you're putting everything on the window object, you are not getting anything done and you WILL make children cry, you will.
‘ ‘ + lastName }} {{ tomato || potato }} {{ makeARainbow(‘yay!’) }} puppy in puppies | orderBy:’cuteness’ So, there is a little-known, heavily-used concept of Angular expressions. And your inside voice is screaming at me right now, "Yeah, I know what Javascript is.” ! But actually, when you write these expressions in your HTML, it isn’t *technically* Javascript. Now what do I mean by that? Well, I mean, this is not actually being run as Javascript code. They are being interpreted and executed by Angular.
not been writing Javascript in your HTML. ! It actually has this incredibly large, well-engineered object underneath that makes its own rules about a Javascript-like language. But as consolation it gives you the power of this object via the $parse service.
much casts a spell that creates an illusion of Javascript. That is pretty damn magical. ! And you will never again wonder how Angular lets you put Javascript in your HTML, just like you no longer wonder how presents get under a Christmas tree. And that's because Javascript in your HTML, just like Santa, isn't real. You've learned something that cannot be unlearned, and I have ruined it for you.
The view value is in your input, the model value is on your scope. Now, this is not a very well-known characteristic because normally a view value and a model value stay about the same. But let's look at an example: PLUNK 3
what I want to address is how ng-model, how Angular, sets these viewValues. And it is this function called setViewValue, which is available on the ngModel construct.
click. ! So there is no mystery here. If you put ng-model on some kind of input element, ng-model will figure its way out to make it so that it talks to your scope. ! But what I think is most amazing is ng-model and setViewValue allow you to make ANYTHING an “input". PLUNK 4
there is a bunch more I would love to talk about, in particular the $digest loop and the $compile service, but unfortunately I'm running out of time. ! So I'd like to leave you with a few tidbits of advice if you want to become a better Angular developer. Read the source. Yeah sometimes it's a little scary, like here:
directives” Learn how to write custom directives. You don't need to read the source for this. If you don't know how already, learning this will wield Angular power you could only previously imagine.
directives” Investigate how Angular implements simpler directives. ng-hide, ng-show, ng-init Then move on to reading how Angular implements some really simple directives. You will see a lot of $parse in there. Pay attention and start picking out patterns.
directives” Investigate how Angular implements simpler directives. ng-hide, ng-show, ng-init Take note of patterns and services being utilized and explore carefully Start with: scope, injector, interpolate Then start investigating some of these repeated patterns, like scope.eval, or providers. From there you will begin to truly grok how Angular works and do some amazing stuff.
___akari11
siroemk
uyuki234
kinopeee
a_matsuda
koic
kasacchiful
irinanazarova
deka_morita
ryu1013
morizo_1984
tomokon
nikkihalliwell
tamaranovitovic
rkendrick25
sabderemane
palkan
mza
uxyall
minecr
inesmontani
hatefulcrawdad
deanohume
axbom
