AngularJS Screencasts | Hacker News Reader

AngularJS Screencasts

egghead.io

191 pointsflorian9541 comments

I was recently at an AngularJS meetup at Google. One exciting (and drool-worthy) advancement the devs are making when it comes to Angular's documentation: a fully interactive Codecademy-style 5-step tutorial. You can see a rough demo here: http://198.199.117.192/. They said they'd finish it in the coming weeks.

Fantastic! I did hear there were some big documentation updates coming, hopefully this is the first of many. Thanks for sharing.

My problem with the Angular docs is that they're written by people who are steeped in Angular. It's the oldest problem in technical writing. How do you convey something that you grok? These videos have helped me, but when I actually sat down to cut code, I felt like I had to start all over again. I was still lost.

Lately I've been trying to use Anki to improve my recall of technical facts. Forensically deconstructing the docs has helped because I have to focus, really focus, to pick out the important things.

And it's still hard to parse anyway. Especially when there are restatements of previous restatements that are sufficiently incompatible that you wonder which is correct. I've popped the hood several times to read the damn code, which IMO sorta kinda defeats the purpose of documentation (and the fondness for large compound boolean statements gives me the heebie-jeebies).

And don't get me started on the idiocy of using sigils to configure behaviour.

I will stick with it, but I can see that I am going to be reading and re-reading and re-re-re-reading the docs and code for a few weeks yet.

edit: "The problem" to "My problem".

I disagree. I found the tutorial for beginners really well done and when followed by the conceptual model it was solid.

We're thinking of integrating them into our course at http://www.thinkful.com/ – though we provide more structure than just the docs, they're pretty solid on their own.

Those resources are - http://docs.angularjs.org/tutorial/step_00 - http://docs.angularjs.org/guide/concepts

Agreed.

I actually started with Backbone and found the documentation sketchy. Nearly every tutorial had a different configuration than the last one. Backbone and Rails, Backbone, Ember and Mongo, Backbone and Coffeescript.

Nearly every one of the Angular tutorials was concise, took the same approach and used the entire framework, without any other dependencies. This made it easy to learn dig in and get going. In the few weeks I've been learning Angular, I've already built two CRUD apps and a pretty sophisticated navigation with it.

It just feels like a full fledged framework, as opposed to just a useful library.

After the tutorial I went off and built something that wasn't, based on my current understanding, a "proper" Angular app (paging all True Scotsmen).

These videos for example showed me that creating directives is actually a central thing you do in Angular. Not just a neat thing you can do occasionally.

I'd love to read more about how you use Anki. I've been using it for random things like the NATO phonetic alphabet or state capitals, but I've been wanting to try and create my own decks. I've just been having trouble wrapping my mind around how to turn knowledge like a library's documentation into cards. Any tips?

I've been using Anki to get fluent in Ruby and JavaScript.

See the article, “Memorizing a programming language using spaced repetition software” here:

http://sivers.org/srs

I use some super-dumb examples on that page, but I hope the points above the examples help.

Also make sure to read Piotr Wozniak's awesome “Twenty Rules of Formulating Knowledge”:

http://www.supermemo.com/articles/20rules.htm

(He's the author of SuperMemo, a predecessor to Anki.)

I was originally inspired to try it by this:

http://www.jackkinsella.ie/2011/12/05/janki-method.html

The trickiest part is knowing whether I am memorising trivialities and triteness or whether this will lead to deep understanding.

I've known about SRS for quite a while; I even wrote a project proposal to study whether it could improve academic performance of freshman compsci students.

It wasn't until I flamed out embarrassingly in a tech interview a few weeks ago that I decided that I really need to be mastering this stuff, not just bluffing my way through it.

These screencasts by John Lindquist, available for many months with new ones appearing frequently, are awesome. The youtube channel is http://www.youtube.com/user/johnlindquist.

John provides very quick yet potent explanations of most features in AngularJS. All those videos can be played at 1.5X speed using YouTube's HTML5 mode. Takes roughly 2 hours to complete them.

looking at "whois egghead.io", it's John's site.

egghead.io = John Lindquist :)

FYI - the source code isn't published with the videos, but @mattfriz created a github repo with all of the code used in each tutorial: https://github.com/msfrisbie/egghead-angularjs

thank you! i was looking everywhere for this!

I've built some real time front end stuff with knockout (due to starting off with backbone and still wanting to use the models and collections via knockback) so I'm not a complete beginner. I'm struggling with which reactive UI library to go with, but I think I'm basically down to ember and angular. Here's how I want to build my next app:

Haskell on the backend. Probably with data in postgres, but using an event sourcing kind of pattern for the bits of state which are edited.

Communication between the browser, other systems and the back end should allow separation of query and command (so updates are pushed to the backend state via one channel and pubslished back out via another). However it should be essentially realtime - websockets.

Operational transform for edits to the state. I'm on the fence with this one as I'm not sure what the overlap is between event sourcing and OT. Anyone who's implemented either care to comment? This seems to equate to using sharejs on the front end to marshal changes in the model to the back end and vice versa?

I'd consider using one of the haskell -> js libraries, but I'd also go with coffeescript here happily. I've played with Fay a bit and sunroof looks good too. Anyone using these?

The stuff above has been percolating for a while based on my experiences building the infrastructure for a hedge fund recently, and the gradual evolution from a mostly traditional restful app to a much more realtime system. Does anyone have any thoughts (not necessarily just on the specific technology mentioned but on how it all might fit together)?

I also found https://news.ycombinator.com/item?id=5839553 to be super useful for actually getting started with AngularJS with no experience.

Then moving onto egghead.io tutorials.

In addition to the first three tutorials I just put out another cast on tuesday, here's the full updated list:

* Part 1: Intro to Angular JS (50 minutes) [1]

* Part 2: End to End with Angular JS (52 minutes) [2]

* Part 3: Security with Angular JS (30 minutes) [3]

* Part 4: Frontend Workflows with Grunt and Angular JS (~60 minutes) [4]

[1] - http://www.youtube.com/watch?v=8ILQOFAgaXE

[2] - http://www.youtube.com/watch?v=hqAyiqUs93c

[3] - http://www.youtube.com/watch?v=18ifoT-Id54

[4] - http://www.youtube.com/watch?v=fSAgFxjFSqY

These are amazing, have you considered authoring for something like Lynda.com ? Or make a site with lots of screencast, as a beginner I would pay to have good Angular JS video tutorials from an expert.

I'm just going to keep putting out casts for free, some will be Angular JS related in the future but my general idea is to focus on screencasts that will benefit web developers in general. Thanks for watching! :)

All the introductory stuff for AngularJS I've seen so far is "client-side" - auto-updating bindings, the ToDo list etc.

Is there a similarly pitched tutorial about how to persist this back to a server, or how to write an API service that interacts best with the AngularJS model? Nothing in the list of video titles suggests that kind of help.

Angular is agnostic of the back-end. Just use the $http service to read/write async from the server. The angular model is whatever your model is - there are no restrictions

I understand that, but an application isn't an island; presumably a server that speaks JSON is easiest to deal with, and there are probably a number of gotchas on "how best to build a backend that works the way AngularJS works well". I've not found anything like that yet and I'd love someone to point me to it.

OK I get you. The angular-app [1] is a full stack app with angular front-end, node back-end. It's not a walkthrough but you could certainly read through the code

[1] https://github.com/angular-app/angular-app

I've run across a number of tutorials that persist through a simple PHP-based REST API. What I haven't seen, but would very much like to, is one that includes authentication.

Two things I love about these videos:

1) They're far simpler and easier to follow than anything I've found in the official Angular docs 2) He includes a brief section on testing. I'm a self-taught developer and work exclusively on my own projects. And I rely pretty heavily on tutorials. It's so rare to find a tutorial that spends any time at all on testing.

I am pleasantly surprised with AngularJS's prowess. I've thrown some really dynamic and tricky stuff at it, and it has never failed. In the foreseeable future, I think I can take out jQuery from my app altogether.

I'm a self-taught developer, and the learning curve was steep. The to-do app, and Lindquist's videos made it significantly easy, though.

Nice post! This is the kind of stuff I love finding on HN.

Everyone keeps saying I should use Restangular instead of ngResource but so far I haven't seen any good reasons to. Anyone care to enlighten me?

Heh.. I still don't know yet.

I'm building a fairly big Django/Angular project with ngResource and have been trying to replace it with Restangular, which has a nice API. But both have pros and cons:

What I like about ngResource is that returned data is automagically filled in as soon as the AJAX request completes. I can do this:

  function controller(Resource) {
    $scope.thing = Resource.get(); // here $scope.thing is an empty object, will be filled in as soon as data arrives

    $scope.do = function() { alert ($scope.thing.name); }
  }

Restangular returns promises instead, so to replicate the above code I'll have to do

  function controller(Restangular) {
    $scope.thing = Restangular.one('thing', 1).get();
    // $scope.thing is a promise, I can't directly access its members in the controller, but since angular templating has native support of promises, I can use {{thing.name}} there.

    $scope.do = function() {
      $scope.thing.then(function(thing) {
        alert(thing.name);
      }
    }
  }

-- or --

  function controller(Restangular) {
    // I think that's ugly
    Restangular.one('thing', 1).get().then(function(thing) {
      $scope.thing = thing;
    }

    // $scope.do will be the same as in the ngResource example
  }

Conclusion: Restangular has a nice API - but magically filling list/object is ngResource major selling point.

What I'd like from both is a nice getOrCreate method for elements, where it POSTs if the object doesn't have an ID set, otherwise sends a PUT. In CRUD forms I try to use the same controller for both "new" and "edit" actions, and I don't want to check the presence of ID and call the appropriate method every time.

Also, if Angular could handle REST data with a higher level library inspired by Ember.Data, I could die a happy programmer.

I haven't used either, I have used only $http so far but I have observed two important differences:

- Support for wrapped responses: ngResource expects that you return an array for GET, so you need to return [objects]. See https://github.com/mgonto/restangular#my-response-is-actuall...

So, if you return something like `{meta: ..., data: [objects]}`, you are out of luck. Does anyone know a work around for ng-resource? I am using tastypie server-side which returns wrapped responses.

- restangular uses promises for callback, so you can do foo.get().success(function (){}) just like $http, while ng-resource uses jquery like foo.get(function () {})

I am just getting started with Angular on an app this week, thanks for sharing this! Looking forward to digging in.

He has videos on his youtube channel he hasn't posted to Egghead.io

This is nowhere near being new, but invaluable for anyone trying to get past the terrible AngularJS docs.

i believe there is an improve doc button. If you find AngularJS valuable , dont hesitate ;)

If the person can't understand how to use the thing, how would that person improve the documentation?

> but invaluable for anyone trying to get past...

he got past the do and "understood how to use the thing"

These were an amazing resource when I was ramping up on AngularJS as we were implementing at my work!

I take it he's using Jetbrains Webstorm for his IDE? It looks pretty nice.

Yes, he is an evangelist for WebStorm and is involved in the new Android IDE.

Short, sweet, and to the point. Thanks!

I'm so conflicted. Just as I'd decided to move on from Angular to Polymers, there seems to have been an explosion in interest and resources for Angular.

Reply on news.ycombinator.com