Everything you need to understand to start with AngularJS | Hacker News Reader

Everything you need to understand to start with AngularJS

stephanebegaudeau.tumblr.com

211 pointssbegaudeau30 comments

> 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

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?

Was thinking the same thing. My guess is on-the-fly parsing.

See: https://github.com/angular/angular.js/blob/9480136d9f062ec4b...

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.

And to learn more, go here http://egghead.io

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.

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

Wow these are beautiful! Thanks for posting, i had yet to find a solid tutorial on the anuhlar

And don't forget about: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tuto...

If you have a subscription (or don't mind spending money), the TekPub series on AngularJS is very good. http://tekpub.com/productions/angular

Much obliged, these are awesome.

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

ST2 screenshots too...

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).

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.

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!

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.

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

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...). 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.

Django 1.5 introduced {% verbatim %} {% endverbatim %} which takes care of what you describe. https://docs.djangoproject.com/en/dev/ref/templates/builtins...

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.

Yes, in your Angular app's config you can use the $interpolateProvider to adjust this. For example, to use [[ ]], just do this:

    var myApp = angular.module('myApp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol("[[");
        $interpolateProvider.endSymbol("]]");
    });

Yes, you can change the start and end symbols to be whatever you want: http://stackoverflow.com/questions/8302928/angularjs-with-dj...

Shameless plug: I wrote a short post on this exact subject two days ago[1]!

I also describe how to display the '{{' and '}}' strings in Jinja2, which is comically non-trivial :D

[1]: http://www.verdantrefuge.com/writing/2013/angularjs-custom-s...

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 :-)

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..., 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-... and http://fishbowl.pastiche.org/2004/01/19/persistent_login_coo...) 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-...).

Also would love to hear what others are using!

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

Excellent introduction.

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

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

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...

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?

Reply on news.ycombinator.com