
AngularJS Screencasts - florian95
http://www.egghead.io/
======
brianchu
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/](http://198.199.117.192/).
They said they'd finish it in the coming weeks.

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

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

~~~
darrellsilver
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/](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/tutorial/step_00)
\-
[http://docs.angularjs.org/guide/concepts](http://docs.angularjs.org/guide/concepts)

~~~
at-fates-hands
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.

------
rdudekul
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](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
looking at "whois egghead.io", it's John's site.

------
ericmsimons
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](https://github.com/msfrisbie/egghead-angularjs)

~~~
ishener
thank you! i was looking everywhere for this!

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

------
thejosh
I also found
[https://news.ycombinator.com/item?id=5839553](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.

~~~
davemo
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](http://www.youtube.com/watch?v=8ILQOFAgaXE)

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

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

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

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

~~~
davemo
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! :)

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

~~~
WickyNilliams
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

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

~~~
WickyNilliams
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](https://github.com/angular-
app/angular-app)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

------
mjackson
Short, sweet, and to the point. Thanks!

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

