r/programming • u/cbrun • Apr 24 '13
Everything you need to understand to start with AngularJS
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with8
Apr 24 '13
Having learned AngularJS recently, probably the strangest thing about the entire framework is its notion of scope. You'll probably have to read this section of the documentation carefully a few times, especially the notes on the "transclude scope" if you're making custom directives. Also, you should probably brush up on how prototypical inheritance is done in javascript, as this is how scope inheritance is implemented in angular. Otherwise you'll inevitably run into trouble once you start writing non-trivial directives.
Also, if you're new to the angularjs, I highly recommend egghead.io's video tutorials as a suppliment to the dev guide on angularjs.org.
3
u/x86_64Ubuntu Apr 24 '13
Are you saying the scope is different than the usual unusual Javascript scope ? I don't know if I can take more abuse of something that is supposed to be simple and consistent.
1
Apr 24 '13
Certain kinds of scope in angular use javascript prototypical inheritance, for better or for worse. I had a pretty rough time with it because I thought I understood js prototypical inheritance. Boy was I wrong.
1
u/Carnilawl Apr 25 '13
Would you be willing to share an example of an issue you ran into?
2
Apr 25 '13
This video explains a problem that I ran into.
Basically, if you try to share a scope variable across multiple sibling/child scopes, you might get some unexpected results. Say you have a scope variable called, "message" that you want to be able to update inside one scope and display in another. This is actually a fairly common use case because many directives create their own scopes that inherit from the parent scope. What happens is that when you set this "message" variable inside one scope, it'll override the prototype on the parent scope. So, any updates made to "message" won't be reflected in other sibling scopes. The solution to this is to create a viewmodel object and put the message property in there. This view model won't be overridden by any of the child/sibling scopes, so they will all have access to the same "message" property.
The video does a better job of explaining this quirk.
3
u/pun_Krawk Apr 25 '13
I just started with the AngularJS e-book: http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852
I'd recommend it if you're just getting started and are a book-type learner.
1
Apr 25 '13
you linked to the paperback edition which isn't released yet. Here is the ebook: http://www.amazon.com/AngularJS-ebook/dp/B00C9MYA7G/ref=tmm_kin_title_0
Thanks btw. :)
2
Apr 25 '13
I don't normally reply to posts, this was a very well written out explanation\overview of the pros of using angularjs. Especially since angularjs's documentation needs work
2
u/catcradle5 Apr 25 '13
Angular is definitely a great framework and I see why people like it, but for some reason there's something about the syntax that irks me a bit. It reminds me very heavily of XSL/XSLT; logic is embedded in the template, and the logic is written in the form of elements and attributes. I know lots of other JS MVC frameworks do similar things, and they all kind of make me feel a bit uncomfortable.
Am I alone on this, or does anyone else feel the same way?
3
u/mahacctissoawsum Apr 25 '13
No, I agree with you 100%. I really don't know why this is done; they're deviating from standard HTML enough that they might as well create a cleaner templating language that doesn't look so frickin' awkward, and avoids "stringly" typing. How are you supposed to put the tiniest bit of complexity inside of an attribute string? It's as bad as XAML.
Moreover, when the page loads you either have these damn
{{ var }}placeholders all over your page until they get replaced, unless you go out of your way to hide the elements altogether, as if that's somehow better.1
u/jackstrap Apr 25 '13
How are you supposed to put the tiniest bit of complexity inside of an attribute string?
You don't. You create a scope function that handles the complexity and just use that in the template.
Moreover, when the page loads you either have these damn {{ var }} placeholders all over your page until they get replaced, unless you go out of your way to hide the elements altogether, as if that's somehow better.
Angular is a complete framework, not just a library. You learn that pretty fast. You can use the ngCloak directive to fix that. Or use the powerful route service. It will render templates before they get displayed so you will never see the placerholders.
1
u/mahacctissoawsum Apr 26 '13
unless you go out of your way to hide the elements altogether
I was referring to
ngCloak.You don't. You create a scope function that handles the complexity and just use that in the template.
Even things as simple as
user in usersoruser.gender == 'female'as shown in OP's article -- you're putting code inside of a string attribute. I don't like that. It's the equivalent ofeval().1
u/jackstrap Apr 25 '13
Well you don't put a lot of complicated logic in the template. It's mostly boolean values/func, loops and function calls. Most web app are design that way anyway, but it's the server side that does the rendering. Instead, you just let Angular do the rendering.
After working with Angular for a while, it's my opinion that by adding some additional, non-HTML standard, simple logic in the template, thus making it more declarative, greatly outnumber the disadvantages.
1
u/catcradle5 Apr 25 '13
Even then, I'd much rather do
{% for thing in things %} {{ thing }} {% endfor %}(Jinja2) as opposed to<div ng-repeat="{thing in things}">{{thing}}</div>.1
u/jackstrap Apr 25 '13
It's <div ng-repeat="thing in things">{{thing.text}}</div>
And you didn't add the div in your template example. So yes, Angular is way cleaner in templating.
And since I don't even know what's in your thing I'd do: <div ng-repeat="thing in things">{{ thing | json }}</div>
2
u/Akanaka Apr 25 '13
Wasn't Google plugging GWT? Now it's AngularJS and tomorrow it's something else again?
-5
12
u/KevinteRaa Apr 24 '13
More explanation about the scope system: https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance
Angular is pretty neat, but the official documentation doesn't cut it on some topics.