Diving into AngularJS

http://floatleft.com/notebook/diving-into-angularjs

by appleton • 13 years ago

167 46 13 years ago

floatleft.com

ConceitedCode• 13 years ago

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

corresation• 13 years ago

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• 13 years ago

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

neebz• 13 years ago

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?

bsaul• 13 years ago

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)

geocar• 13 years ago

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.

ttrreeww3• 13 years ago

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

ihsw• 13 years ago

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.

janus• 13 years ago

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

seyz• 13 years ago

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

joelhooks5• 13 years ago

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.

drorweiss2• 13 years ago

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

leeoniya• 13 years ago

came up a few days ago - http://sporto.github.io/blog/2013/04/12/comparison-angular-b...

drorweiss2• 13 years ago

Fantastic - thanks!

aed• 13 years ago

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

ryhanson• 13 years ago

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

joelhooks5• 13 years ago

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.

aidos• 13 years ago

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

ttrreeww3• 13 years ago

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

ElongatedTowel2• 13 years ago

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

recuter• 13 years ago

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

ElongatedTowel2• 13 years ago

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.

joshuacc• 13 years ago

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

xnxn• 13 years ago

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

jonny_eh2• 13 years ago

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

ngokevin2• 13 years ago

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• 13 years ago

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.

jonny_eh2• 13 years ago

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.

visarga• 13 years ago

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.

FreshCode• 13 years ago

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• 13 years ago

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!

grinich• 13 years ago

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

joelhooks5• 13 years ago

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

zenocon• 13 years ago

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_n3• 13 years ago

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• 13 years ago

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

da_n3• 13 years ago

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.

joelhooks5• 13 years ago

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

da_n3• 13 years ago

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.

ttrreeww3• 13 years ago

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.

Diving into AngularJS

Related Stories