AngularJS Screencasts

http://www.egghead.io/

by florian95 • 13 years ago

191 41 13 years ago

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

rdudekul• 13 years ago

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.

prgfan• 13 years ago

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

adamors• 13 years ago

egghead.io = John Lindquist :)

rcourtie• 13 years ago

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

joshowens• 13 years ago

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

KurtMueller• 13 years ago

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

mullethunter• 13 years ago

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

camus2• 13 years ago

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

bphogan• 13 years ago

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

ericmsimons• 13 years ago

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

ishener• 13 years ago

thank you! i was looking everywhere for this!

jacques_chester3• 13 years ago

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

ejfox• 13 years ago

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?

sivers• 13 years ago

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

jacques_chester3• 13 years ago

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.

darrellsilver• 13 years ago

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

jacques_chester3• 13 years ago

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.

at-fates-hands• 13 years ago

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.

thejosh• 13 years ago

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.

davemo2• 13 years ago

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

swat535• 13 years ago

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.

mjackson• 13 years ago

Short, sweet, and to the point. Thanks!

brianchu• 13 years ago

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.

tericho2• 13 years ago

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

rks404• 13 years ago

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

tericho2• 13 years ago

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

danielhughes• 13 years ago

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.

drivebyacct2• 13 years ago

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.

boothead• 13 years ago

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

nish1500• 13 years ago

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.

crb2• 13 years ago

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.

WickyNilliams2• 13 years ago

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

crb2• 13 years ago

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.

avoutthere• 13 years ago

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.

Kiro• 13 years ago

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?

1_player• 13 years ago

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.

ludwigvan• 13 years ago

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 () {})

AngularJS Screencasts

Related Stories