

Diving into AngularJS - appleton
http://floatleft.com/notebook/diving-into-angularjs

======
neebz
I tend to dive a lot into a source code when I am working with a library. You
always have missing spots in documentation but you can actually know what's
going on by reading the code. This is one of the reasons I am super
comfortable with Backbone.

However I cannot comprehend Angular's source code on github. Can anyone give
me pointers on where to start reading it and/or how it's organized?

~~~
geocar
I found AngularJS very readable and was able to read it during my commute over
the course of a week.

However: I read the documentation first.

I think you'll find if you give it a chance, you'll find that AngularJS has
_excellent_ documentation.

Someone put a lot of effort into taking what is organised for implementation
(code) and reorganising it for users, and it was something that was very much
appreciated.

For example, you should look at this:

* <http://docs.angularjs.org/guide/di>

There's a very subtle piece in there about how AngularJS figures out what the
dependencies of a function actually are, and understanding that piece is key
to understanding how much of the AngularJS code is written.

------
ihsw
The video tutorial mentioned[1] really is excellent, and it's recent too so
it's not out of date.

[1] [http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-
tuto...](http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-
angularjs-fundamentals-in-60-ish-minutes.aspx)

AngularJS' strict adherence to separation of concerns is definitely a breath
of fresh air.

------
seyz
The first feedback I always heard from new angularjs developer is: "A
completely different approach that I've seen before... it's so productive".

Great blog post :)

~~~
joelhooks
It shares a lot of principles with Apache Flex. It's seen huge uptake by expat
Flash platform devs.

After a year on a large project using Angular, I'm loving it more every day.

------
jonny_eh
The more I use Angular, the more I love it. I like how it's really easy to get
started with it. Just avoid writing your own directives right away, that's
still the one part that is super confusing (although powerful).

~~~
ngokevin
What do you wish you knew about writing directives then that you know now? Or
what did you find confusing?

I am currently writing a book on Angular and would like to know. I remember I
had a lot of trouble on how to write a reusable component defined in a
partial, and what to pass into the directive constructor.

~~~
147
Hey Kevin, this isn't about directives but about RESTful services and
$resource. I started learning how to use AngularJS yesterday and all of the
examples that I've found on it are confusing to me and seem to do it in
different ways.

I've seen somebody do it by calling myModule.factory. I've seen an example on
Stackoverflow that says all you need to do is something like var Todo =
$resource('/api/1/todo/:id');. I'm not sure where I'm supposed to put this
code. I want to be able to use the resource globally but I don't have access
to $resource in the global namespace.

All I'm trying to do is make a simple blog that can interact with my backend.
If you have this part of the book written I'd love to read it right now.

EDIT: I figured out how to do it I think. But I'd still love a more complete
introduction to using Angular with a RESTful service.

~~~
squidsoup
Personally I found using $http less restrictive - there seem to be some edge
cases where $resource behaves oddly. Ideally what you should be doing with
REST calls is pushing them out to Angular Services
([http://docs.angularjs.org/guide/dev_guide.services.creating_...](http://docs.angularjs.org/guide/dev_guide.services.creating_services))
rather than making them directly in your controller.

Here's a simple example:

    
    
      appServices.factory('Thing', function($http) {
    
        var Thing = function(data) {
          angular.extend(this, data);
        }
    
        Thing.all = function() {
          return $http.get('/things).then(function(response) {
            return new Thing(response.data);
          });
        }
    
        Thing.get = function(id) {
          return $http.get('/things/' + id).then(function(response) {
            return new Thing(response.data);
          });
        }
    
        Thing.delete = function(id) {
          return $http.delete('/things/' + id).then(function(response) {
            return new Thing(response.data);
          });
        }
    
        Thing.create = function(data) {
          return $http.post('/things', data).then(function(response) {
            return new Thing(response.data);
          });
        }
    
        Thing.update = function(data, id) {
          return $http.put('/things/' + id, data).then(function(response) {
            return new Thing(response.data);
          });
        }
    
        return Thing;
      });
    

In your controller, inject the service:

    
    
      function thingCtrl($scope, Thing) {
        Thing.all().then(function(data) {
          $scope.things = data;
        });
      }
      thingCtrl.$inject = ['$scope', 'Thing'];

~~~
grncdr
Another nice feature of angular is that templates are promise-aware. So the
following controller is equivalent for most purposes:

    
    
        function thingCtrl($scope, Thing) {
          $scope.things = Thing.all()
        }
        thingCtrl.$inject = ['$scope', 'Thing'];

------
zenocon
Best video tutorials I've seen on AngularJS yet: <http://egghead.io> \-- find
directives confusing? watch a couple two minute videos, and it'll fall into
place.

------
da_n
I have been wondering if I should look into AngularJS but I'm a bit worried
about it's future given Google also has Dart which seems to be competing with
it, or am I wrong? We all know what Google is like when it comes to closing
stuff down.

~~~
adamnemecek
Angular is a front end JS framework. Dart is a language. So no, they are not
competing.

~~~
da_n
I know Dart is a language, I have installed the Editor and played around with
it, but it is all compiled to JavaScript (at least for anything except
Dartium). I guess it is conceivable that Dart and Angular might be used
together, not sure what the point would be though since Dart has the WebUI
packages. Seems a bit simplistic to dismiss the idea there any overlap between
these projects.

------
ryhanson
Why am I just noticing the "by Google" under the logo?!

~~~
aidos
That's actually one of the more interesting parts about Angular. I'm not sure
of the details but I believe the Angular team have been counting on
Object.observe for increasing the performance of the Angular code [0]
(something that Google / the Chrome team have influence over).

The Angular code you write now won't need to be updated and will get a great
speed boost later. Other libraries, like Ember, get you to add all that
metadata to your code to give you a performance boost now (which to me feels
like something you'll regret in a year's time).

Ah, this is the post I was looking for [1].

[0]
[http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.ht...](http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html)

[1]
[https://plus.google.com/112439678898563138768/posts/RZKRBiGX...](https://plus.google.com/112439678898563138768/posts/RZKRBiGXvR2)

~~~
ttrreeww
Actually, I'm sure it'll break a few things. Angular doesn't have a good
concept of update granularity, which can be problematic when you get to the
multi-directive interaction phase...

------
FreshCode
Hey Andy, please consider choosing a more readable font for your blog. I would
love to read this article, but the thin font is hurting my eyes.

~~~
appleton
Thanks for the feedback - I've been wondering about this for a while and
you're right. It's just finding something that will work well!

~~~
joelhooks
This is a good survey of some of the beauties hidden in Google webfonts

~~~
joelhooks
* <http://sachagreif.com/google-webfonts-that-dont-suck/>

------
ElongatedTowel
Am I the only one who dismissed AngularJS by the fact that they use a nearly
unmodified bootstrap design?

~~~
recuter
Probably, as that doesn't seem like a good reason.

~~~
ElongatedTowel
Quite. But how much effort they put in their website and documentation is
somehow important to me. Then again, Ruby projects always look glamorous while
Haskell projects (just an example for an exotic language) look like some HTML
document someone wrote 10 years ago on an university computer.

Ember.js in comparison has a certain glow to it. Especially with that weird
mascot.

~~~
squidsoup
They have put a lot of effort in to their documentation, which personally is
more important to me than the aesthetic of their website.

------
drorweiss
So many client side js libraries. Can anybody help compare Ember, Meteor,
Angular and Backbone?

~~~
leeoniya
came up a few days ago - [http://sporto.github.io/blog/2013/04/12/comparison-
angular-b...](http://sporto.github.io/blog/2013/04/12/comparison-angular-
backbone-can-ember/)

~~~
drorweiss
Fantastic - thanks!

------
ConceitedCode
With all the attention Ember is getting lately I'm glad to see Angular getting
some attention.

~~~
corresation
Ember tends to go completely forgotten aside from a small burst of activity
yesterday.

Speaking of which, I started a project in Ember and quickly encountered the
primary reason why it is dangerous to change conventions and APIs -- searching
for basic information on how to do certain things brings me to various
StackOverflow posts, etc, most of which are just entirely wrong now.

~~~
mullr
It's worth noting that stackoverflow has some wiki blood in it; if an answer
is out of date, you can edit it.

------
janus
I've found The tutplus angularjs course to be very beginner's friendly.

------
ttrreeww
AngularJS definitely requires a higher level of CS competence. It's initial
learning curve is quite high compared to most frameworks.

It is awesome sauce.

