Hacker News new | past | comments | ask | show | jobs | submit login
Diving into AngularJS (floatleft.com)
167 points by appleton on April 21, 2013 | hide | past | favorite | 46 comments



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?


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.


I did start diving into angular source code, and found it quite readable. I simply read it from top to bottom, and it is quite well understandable this way. I read it one function at a time on my ipad whenever i needed a break, and i think one could manage to read it all in one or two weeks (depending on how much free time in the week you've got)


AngularJS source code is actually very read-able. You need a good CS background though. (There is even a parser in there!)


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

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


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


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.


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


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.


Great question.

It's been a few months, but I remember being confused by "compile" vs "link". I had a hell of a time figuring out which one I needed to use. I also was confused by the passing in of parameters, with weird syntax like "@", and "=" prepending the parameters.

One thing that I tried doing, that I figured would be common, was to access a model specified by ng-model, and to access the controller's scope. But even that was really confusing.


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.


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_...) 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'];


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'];


I have not gotten to that part yet but will perhaps notify you when I get around to it.

Angular made a tutorial video on building a Twitter search app that may be helpful: https://www.youtube.com/watch?v=IRelx4-ISbs


I too, tried to define a directive after the bootstrapping phase and couldn't figure out how.

I'd like to create a directive that would help me define directives. Sounds circular? I just want syntactic sugar to define 'components', in other words, to nicely package my code. I want to wrap together a piece of html, js and css under one name and invoke it as a HTML tag. That way I could better modularize my website. This needs to work in partials too.

What I don't like about Angular is that I's not easy to dynamically define/load stuff like directives and such. It all needs to be known beforehand, statically.


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.


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.


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


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.


It is "proper" open source with many enthusiastic non-google contributors.


Interesting point, had a look at the github page and looks really engaged, you've convinced me to try it out on a project. Thanks.


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


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

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


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


Google staffs the project with several talented engineers. Misko Hevery is an amazing benevolent dictator. He earns my trust and respect. A confluence of genius and pragmatism.


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.


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!


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



Just for another data point, I think it's totally fine.


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


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


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.


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


Eh, some Haskell projects are improving their design. The web-frameworks certainly have[1][2].

[1]: http://www.yesodweb.com/

[2]: http://snapframework.com/

It's progress.


I was initially turned off by that as well, but persisted long enough to watch the demo videos. At that point I was sold.


I know it's shallow, but I've been doing the same thing.


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


Take a look at ToDoMVC: http://todomvc.com/

"TodoMVC [is] a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today."



Fantastic - thanks!


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


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.


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


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


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: