
Everything you need to understand to start with AngularJS - sbegaudeau
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
======
monkeyfacebag
> In those expressions, you have access to Javascript code

Just to clarify, double curly expressions in Angular, {{ }}, are "JS-like",
basically a subset of JS + filter syntax. One goal of the expression syntax is
to prevent a lot of app logic being stuck into the template itself, so the
subset of JS is fairly minimal, but this is by design. This also means that
the expressions are not eval()'d. Instead, they are parsed with Angular's
$parse service.

See: <http://docs.angularjs.org/guide/expression>

~~~
lukifer
I'm curious about the speed hit of these parsed expressions. Do you know if
they are pre-compiled into anonymous functions, or if they are parsed on the
fly?

~~~
snprbob86
See:
[https://github.com/angular/angular.js/blob/9480136d9f062ec4b...](https://github.com/angular/angular.js/blob/9480136d9f062ec4b8df0a35914b48c0d61e0002/src/ng/parse.js#L797-L846)

Looks like they are never interpreted, but there are (at least) two different
compilation strategies: 1) Anonymous function with a loop 2) Fully compiled
Function constructed via JavaScript source with the loop unrolled In general,
this bit of code seems to be optimized to a crazy degree.

It's also worth noting that the "filters" part of the expression is maintained
as a pipeline in an array, since filters may inform bidiectional binding
behavior.

------
marknutter
And to learn more, go here <http://egghead.io>

~~~
drhayes9
These are hands-down the best AngularJS tutorials on the web. I've read and
watched every AngularJS tutorial I can find on the web and nothing compares to
the clarity and gentle introductions these videos provide.

~~~
visarga
I value gentle introductions greatly. They require a special kind of pedagogy.

------
olouv
Too bad it's relying on (blurry) snapshots vs.
<https://code.google.com/p/google-code-prettify>

~~~
ZaneA
The blurry part isn't so nice, but I think that have snapshots of code might
actually be better in a lot of ways if it forces people to type code out
themselves without copy/paste (no better way to learn than to get it into your
muscle memory after all).

~~~
hnriot
There's no benefit to wasting time typing. Being a developer should assume a
basic competency of typing, but anything that saves typing is a good thing.

------
Xanza
The fact that this was about Game of Thrones was enough for me to get excited
about it, however, it was very easy to follow, and covered quite a bit for
such a short 'tutorial'. Thanks!

------
ovidiu
This guide is nice as it provides a short introduction into Angular's
features.

I would kindly recommend you to read the Conceptual Overview section of the
AngularJS Developer Guide (<http://docs.angularjs.org/guide/concepts>). This
covers the heart of the framework and also parts of its philosophy. If you
want to understand WHY AngularJS works the way it does not only WHAT it does
then this page will really help you. You will also understand why this is a
masterpiece of engineering.

------
geekam
If using with Django, is it possible to change the {{}} to something else?

~~~
monkeyfacebag
I don't know if it's possible but, in general, it's not a good idea to mix
server-side and client-side templating. The Angular guys discuss this in one
of the videos on the Angular channel (I found it for you here:
[http://www.youtube.com/watch?feature=player_detailpage&v...](http://www.youtube.com/watch?feature=player_detailpage&v=392dkmjfCeQ#t=765s)).
The two reasons seem to be first, it's not clean and second, it's easy to
introduce security issues.

If I want to have a page that has both server-side templating and client-side
templating, I push the ng-app directive down into the DOM and assert that
Angular has "ownership" of that portion of the page. I can't remember what
Django's templating engine supports, but in Jinja2, you can create a {% raw %}
{% endraw %} block that tells Jinja2 not to parse any delimiters in the block
(I'm sure Django has something like this, I just can't recall what it is).
This makes it pretty easy to separate out Angular's purview from the server's
purview even on a single page.

~~~
kevinastone
That security concern is nonsense. Use {% verbatim %} as noted below for
angular templates (there's plenty of backports for Django <1.5). I have django
templates fill in runtime parameters (csrf_tokens, etc) all the time.

------
ricccardo
nice tutorial! it probably would have saved me lots of time, but now that I
went through too many of them, this is more like a good recap :-)

what I am missing though (not a critic to your tutorial, just expressing my
frustration as I try to learn beyond the basics) is concrete examples of how
to implement specific features: authentication w/ express, nontrivial restful
interaction, and interaction with Socket.IO. Most examples out there are so
basic that they don't seem to keep any server state. Does anybody have some
useful links?

BTW, coming from python/django, express does not seem to have an easy auth
module to cover basic needs of db authentication. passport is overly
complicated, and mongoose does not try to do auth. What do you hip node.js
programmers use? Perhaps my problem is that I am trying to get familiar with
node, express, nosql and client-side mvc frameworks at the same time and my
head is just exploding. Or perhaps I am missing a framework with a full, well-
documented stack! The more I try, the more I get tired of getting all these
modules to work with each other :-)

~~~
danielstudds
Finding the same thing with node.js, I got started OK with passport thanks to
the examples for passport-local: [https://github.com/jaredhanson/passport-
local/tree/master/ex...](https://github.com/jaredhanson/passport-
local/tree/master/examples), especially express3-mongoose-multiple-files.

Beyond that though, I've had to hack a fair bit to get "remember me" working
(following the practices suggested
[http://stackoverflow.com/questions/549/the-definitive-
guide-...](http://stackoverflow.com/questions/549/the-definitive-guide-to-
forms-based-website-authentication) and
[http://fishbowl.pastiche.org/2004/01/19/persistent_login_coo...](http://fishbowl.pastiche.org/2004/01/19/persistent_login_cookie_best_practice/))
so not exactly straight-forward. (Aside: the remember me example for passport
local might not be production ready, see
[http://stackoverflow.com/questions/16136712/is-an-
authtoken-...](http://stackoverflow.com/questions/16136712/is-an-authtoken-
when-using-passport-persistent-session-safe)).

Also would love to hear what others are using!

------
teopeurt
I wish this had been posted before I delved deeper into Angular, would have
saved me lost moments.

Excellent introduction.

------
resu
If only more libraries had such a well written introduction. Thanks!

------
timkly
excellent post. probably the most simple introduction to Angular JS I've read

------
heme
Thanks for the post. I'm at the beginning stages of planning a large single-
page web application. I'm very interested in a Google-backed framework, but I
continue to have concerns when reviewing tutorials like these. I'm genuinely
interested in hearing thoughts on the points below.

Here are some of my concerns...

1\. Spaghetti Code. _"... AngularJS let you execute expressions directly
within your HTML pages."_ Why do I want JavaScript code in my HTML at all? I
normally like absolutely clean HTML templates for two main reasons: 1) They
can be used & rendered anywhere 2) they are easier to maintain.

2\. AngularJS Directives seem to mix control structures & Code inside HTML
templates. This seems difficult to maintain... <div data-ng-repeat="user in
users"> ... </div> JavaScript can do loops and most developers understand
that. _data-ng-repeat_ is only understood by AngularJS, which means this
template will always need to be rendered by AnglularJS. Also, is the template
forever tied to a "users" collection? What if I would like to reuse the
template for "clients"?

    
    
        <div data-ng-repeat="user in users" data-ng-show"=user.gender == 'female'">
        ...
        </div>

Again, code is mixed in with the HTML template. We moved away from _< a
href="#" onclick"alert('What is up?');">_ a long time ago _(I realize my
example is an event, but I think it still holds true.)_ . Also, what does this
code do behind the scenes: add "display:none", add "visibility:hidden", or add
a CSS class? Where do I change the behavior. It feels like this code belongs
in a controller/view with the rest of my code.

3\. It seems as though the debate of DOM based rendering vs string based
rendering is still going on, but do I have a choice with AngularJS? Right now,
I'm not a fan string based rendering on the front-end because it locks me into
a specific rendering engine (e.g. Handlebars, Mustache, Underscore etc.).
Also, if you have no {{tokens}} in your templates you can render them on the
server and then later update them on the front-end _(I see the AngularJS devs
say this is bad, but hybrid can be useful for security, SEO)_ . There are a
number of DOM based templating engines out there. One I like very much is
transparency. They have a great FAQ on this topic:

[https://github.com/leonidas/transparency/wiki/Frequently-
Ask...](https://github.com/leonidas/transparency/wiki/Frequently-Asked-
Questions)

4\. _"Using proper separation of concerns, controllers should never contain
anything related to the DOM."_ Why is this the case? When would you ever use
your controller outside of controlling the DOM in a Template? Is AngularJS's
view that the Controller contains the event-handling function, but the
View/Template does the binding?

