22 ms·

AngularJS Cheat Sheet [pdf]

140 points by paulw0 12y ago

butwhy 12y ago
Nice domain name.
- meneses 12y ago
  In my opinion this is hosted on Azure and all azure containers have the same domain name (for obvious reasons). Nice cheat sheet though!
oi-sendai 12y ago
Thanks for posting this. Really looking forward to trying out some of the unit testing advice!
clement75009 12y ago
I love cheat sheets! I actually consider them the best way to learn a framework. This one's excellent. Wish I could find one as good for Meteor.
julie1 12y ago
14 pages for a cheatsheet! The ones for emacs/vim are 1 page only, I guess we have a measure of the complication of angular now.
- dudus 12y ago
  That's what I thought. At which point do they stop being cheat sheets and start been books?
- taude 12y ago
  I wouldn't call this a cheatsheet in the same sense of the emacs/vims ones which list mostly keyboard mapping shortcuts. This is more of an abbreviated overview of the framework, complete with sample code demonstrating the patterns.
- aikah 12y ago
  Give us a fn break, did you actually read the pdf? that's not a cheatsheet, more like collection of recipes. > The ones for emacs/vim are 1 page only, Apples and Oranges > I guess we have a measure of the complication of angular now. AngularJS isn't rocket science. But maybe we don't have the same definition complexity , which makes sense if you are a skiddie.
  - julie1 12y ago
    You are right, I should not compare apple and orange: you can edit text, play soduku, do syntax highlighting easily, search/replace with regexp in vim, while in angular JS you can only do slow, unusable data bindings. So comparing the 14pages of angular sheet is way too much of a disgrace for vim or emacs. Btw, I use kate that need NO cheatsheets, because mastering an editor does not make me a better coder... EDIT: ok I also use vim, emacs, joe, nano, ultraedit, gedit, visualstudio, netbeans, eclipse, nvi, simpletext, texmate, sublime ... whatever the guy paying me want me to use even if it is stupid.
lars 12y ago
This looks like a good resource. But number 28 is wrong: > Always have a ‘.’ in your ng-models which insures prototypal inheritance. That isn't what that does. The egghead.io Angular videos also get this wrong. I really think that the vast majority of Angular programmers don't really understand how its scoping works. I've ranted about this before [1], it's just ridiculously complex. Some scopes inherit prototypically from their parents, and others don't, and you can't tell or affect it from the markup. The dot just means you're referring to a property of an object on the scope. If the object is somewhere in the scope inheritance chain, two directives attached at different points in that chain can share data by pointing to the object. If the object isn't there, what the name points to is actually non-deterministic. Ng-model silently creates it, and the point in the chain at which it creates it depends on which directive wanted to write to the property, which might depend on the order in which the user interacts with the different elements on the page. [1]: http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/
- aikah 12y ago
  > Whatever the reason is for Angulars popularity, it isn’t that it’s a great framework. Anything that makes programmers productive is a great tool. Angular 1.x definitely makes teams productive. It's one of the first web framework that comes with a specific testing framework. The clear separation between the DOM and the business logic makes apps more testable. And I could go for hours. Angular helps developers write complex apps faster and better. Sure it isn't perfect, but show me something better with all the features AngularJs has. AngularJS didn't became popular because it was from Google, a simple proof is the closure widget library nobody uses outside google. AngularJS became popular because it was obviously superior in term of developer experience. Now your point about ng-model and scopes is valid.But it's not a angular problem, it's a javascript issue.Ultimately to understand angular you need to understand how javascript works, which many develpers don't. Instead of saying "this thing is bad", Educate them. But I guess sensationalism drives more clicks.
  - lars 12y ago
    I got tons of both hate and love for that blog post. One of the few criticisms that I can accept is the "The problems are real, but don't matter that much." view. I don't agree, but I suppose people can have different experiences there. Any 'sensationalism' comes from legitimate anger with the framework, after having spent over a year working with it on a large project. > Now your point about ng-model and scopes is valid.But it's not a angular problem, it's a javascript issue. This I don't agree with. Yes, JavaScript has prototypical inheritance between objects, but certainly not between scopes. It has lexical scoping like everyone else. The decision to have scopes be objects that (sometimes, not always) inherit from one another, is entirely on Angular. So is the decision to have ng-model silently create objects on this scope.
mberning 12y ago
I love working with angular, but the intense competition from other technologies combined with the overall negativity towards it has turned me off. The long term future of angular seems very uncertain.
- pavlov 12y ago
  Angular 2.0 is the New Coke of web development. I suspect Google would gain a huge amount of goodwill if they backed down and announced: "You know, we'll rename the incompatible redesign as AngularNext 0.1 and use it to develop cutting-edge ideas. Then we'll bring the best of those into the mainstream Angular over time without breaking compatibility." They could call the rebooted compatible Angular 2.0 "Harmony".
  - Bahamut 12y ago
    The Angular team is not going to do backwards compatibility with Angular 1.x with 2.0 at all - they're going to help with migration some with the router, but the api are fully incompatible. FWIW, Angular 2 is awesome to work with, even in its alpha form. Productivity with it should be immensely improved compared to 1.x.
  - LocalPCGuy 12y ago
    You should spend some time watching some of the videos about Angular 2.0 from ng-conf, and you may see that there is much less reason for the opinion you have stated. The core team and some of the other presenters really laid out both a migration path going forward as well as the advantages Angular v2.0 will bring, and why they couldn't just do it on top of Angular 1.x.
- moogly 12y ago
  I mostly only see this overblown negativity towards Angular here on HN. It's bordering upon knee-jerk FUD.
deleted 12y ago
[deleted]
M8 12y ago
Sadly will only be valid for ~6 months.
- gooseus 12y ago
  What's happening in 6 months? Is my angular code going to spoil?
  - ryannevius 12y ago
    Haven't you heard? All Angular sites are going to self destruct, and the Github repo will cease to exist.
  - serve_yay 12y ago
    More or less.
hippich 12y ago
Nice! Perfect addition for my http://ihateangular.com/ http://ihateangular.com/ !
- thoman23 12y ago
  You seem to be spending on a lot of energy on your hatred.
  - quadratini 12y ago
    I'm enjoying it!
  - hippich 12y ago
    I am getting enough energy kick from my angular day job on pretty intimate level :) Also, it serves me as a collection of "gotchas" to point to new devs.
Too 12y ago
> 24. Wherever possible, use AngularJS versions of JavaScript functionality. So instead of setInterval, use the $interval service....It becomes easier to mock them or write unit tests I've always been very against these angular versions of basic js functions because it requires everyone on the team to learn them and it puts you even deeper into the angular lock in swamp, hindering you from eventually changing your view-framework in the future. Any takes on this? I like the data binding of angular but try to restrict angular coming in contact with "core" code. As example we hardly write any services, we just use them to hold an instance of plain js-classes that can easily be reused in non angular projects.
- Bahamut 12y ago
  Services such as $interval or $timeout are very simple - $http is also a fairly simple service to replace too. I don't really view it as much of an issue when it comes to lock in or migration, there are usually far more perilous pitfalls when it comes to lack of being able to migrate, such as bad app architecture or hacks.
- mts_ 12y ago
  Services like $timeout and $interval are basically just thin wrappers around their vanilla JS relatives(setTimeout and setInterval), there are more examples like this. The APIs look identical, some with a little added functionality - but the primary reason for the AngularJS wrappers is that they'll automatically call $scope.$apply() for you, so that you don't have to do it yourself.
- serve_yay 12y ago
  I agree with you. It doesn't matter how thin the wrappers are or whether they preserve the API, the problem is all code is supposed to call them. It's no problem to call $timeout in your Controller code or whatever, but what if you want to require a module that uses `setTimeout`? Either the module has to have some way of passing in the timeout function it should call, or you'd have to have a shim that monkey patches it or something.
delbel 12y ago
It'd be nice to see a UI Router cheat sheet in this format as well. I'm always forgetting nested syntax.
- andyfleming 12y ago
  I would avoid investing too much in UI Router. As soon as the new Angular 2 router is available, it should be used for Angular 1.x projects as well to support migration to Angular 2 in the future.

140 points by paulw0 12y ago

butwhy 12y ago

Nice domain name.

meneses 12y ago
In my opinion this is hosted on Azure and all azure containers have the same domain name (for obvious reasons). Nice cheat sheet though!

oi-sendai 12y ago

Thanks for posting this. Really looking forward to trying out some of the unit testing advice!

clement75009 12y ago

I love cheat sheets! I actually consider them the best way to learn a framework. This one's excellent. Wish I could find one as good for Meteor.

julie1 12y ago

14 pages for a cheatsheet! The ones for emacs/vim are 1 page only, I guess we have a measure of the complication of angular now.

dudus 12y ago
That's what I thought. At which point do they stop being cheat sheets and start been books?
taude 12y ago
I wouldn't call this a cheatsheet in the same sense of the emacs/vims ones which list mostly keyboard mapping shortcuts. This is more of an abbreviated overview of the framework, complete with sample code demonstrating the patterns.
aikah 12y ago
Give us a fn break, did you actually read the pdf? that's not a cheatsheet, more like collection of recipes. > The ones for emacs/vim are 1 page only, Apples and Oranges > I guess we have a measure of the complication of angular now. AngularJS isn't rocket science. But maybe we don't have the same definition complexity , which makes sense if you are a skiddie.
- julie1 12y ago
  You are right, I should not compare apple and orange: you can edit text, play soduku, do syntax highlighting easily, search/replace with regexp in vim, while in angular JS you can only do slow, unusable data bindings. So comparing the 14pages of angular sheet is way too much of a disgrace for vim or emacs. Btw, I use kate that need NO cheatsheets, because mastering an editor does not make me a better coder... EDIT: ok I also use vim, emacs, joe, nano, ultraedit, gedit, visualstudio, netbeans, eclipse, nvi, simpletext, texmate, sublime ... whatever the guy paying me want me to use even if it is stupid.

lars 12y ago

This looks like a good resource. But number 28 is wrong: > Always have a ‘.’ in your ng-models which insures prototypal inheritance. That isn't what that does. The egghead.io Angular videos also get this wrong. I really think that the vast majority of Angular programmers don't really understand how its scoping works. I've ranted about this before [1], it's just ridiculously complex. Some scopes inherit prototypically from their parents, and others don't, and you can't tell or affect it from the markup. The dot just means you're referring to a property of an object on the scope. If the object is somewhere in the scope inheritance chain, two directives attached at different points in that chain can share data by pointing to the object. If the object isn't there, what the name points to is actually non-deterministic. Ng-model silently creates it, and the point in the chain at which it creates it depends on which directive wanted to write to the property, which might depend on the order in which the user interacts with the different elements on the page. [1]: http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/

aikah 12y ago
> Whatever the reason is for Angulars popularity, it isn’t that it’s a great framework. Anything that makes programmers productive is a great tool. Angular 1.x definitely makes teams productive. It's one of the first web framework that comes with a specific testing framework. The clear separation between the DOM and the business logic makes apps more testable. And I could go for hours. Angular helps developers write complex apps faster and better. Sure it isn't perfect, but show me something better with all the features AngularJs has. AngularJS didn't became popular because it was from Google, a simple proof is the closure widget library nobody uses outside google. AngularJS became popular because it was obviously superior in term of developer experience. Now your point about ng-model and scopes is valid.But it's not a angular problem, it's a javascript issue.Ultimately to understand angular you need to understand how javascript works, which many develpers don't. Instead of saying "this thing is bad", Educate them. But I guess sensationalism drives more clicks.
- lars 12y ago
  I got tons of both hate and love for that blog post. One of the few criticisms that I can accept is the "The problems are real, but don't matter that much." view. I don't agree, but I suppose people can have different experiences there. Any 'sensationalism' comes from legitimate anger with the framework, after having spent over a year working with it on a large project. > Now your point about ng-model and scopes is valid.But it's not a angular problem, it's a javascript issue. This I don't agree with. Yes, JavaScript has prototypical inheritance between objects, but certainly not between scopes. It has lexical scoping like everyone else. The decision to have scopes be objects that (sometimes, not always) inherit from one another, is entirely on Angular. So is the decision to have ng-model silently create objects on this scope.

mberning 12y ago

I love working with angular, but the intense competition from other technologies combined with the overall negativity towards it has turned me off. The long term future of angular seems very uncertain.

pavlov 12y ago
Angular 2.0 is the New Coke of web development. I suspect Google would gain a huge amount of goodwill if they backed down and announced: "You know, we'll rename the incompatible redesign as AngularNext 0.1 and use it to develop cutting-edge ideas. Then we'll bring the best of those into the mainstream Angular over time without breaking compatibility." They could call the rebooted compatible Angular 2.0 "Harmony".
- Bahamut 12y ago
  The Angular team is not going to do backwards compatibility with Angular 1.x with 2.0 at all - they're going to help with migration some with the router, but the api are fully incompatible. FWIW, Angular 2 is awesome to work with, even in its alpha form. Productivity with it should be immensely improved compared to 1.x.
- LocalPCGuy 12y ago
  You should spend some time watching some of the videos about Angular 2.0 from ng-conf, and you may see that there is much less reason for the opinion you have stated. The core team and some of the other presenters really laid out both a migration path going forward as well as the advantages Angular v2.0 will bring, and why they couldn't just do it on top of Angular 1.x.
moogly 12y ago
I mostly only see this overblown negativity towards Angular here on HN. It's bordering upon knee-jerk FUD.

deleted 12y ago

[deleted]

M8 12y ago

Sadly will only be valid for ~6 months.

gooseus 12y ago
What's happening in 6 months? Is my angular code going to spoil?
- ryannevius 12y ago
  Haven't you heard? All Angular sites are going to self destruct, and the Github repo will cease to exist.
- serve_yay 12y ago
  More or less.

hippich 12y ago

Nice! Perfect addition for my http://ihateangular.com/ http://ihateangular.com/ !

thoman23 12y ago
You seem to be spending on a lot of energy on your hatred.
- quadratini 12y ago
  I'm enjoying it!
- hippich 12y ago
  I am getting enough energy kick from my angular day job on pretty intimate level :) Also, it serves me as a collection of "gotchas" to point to new devs.

Too 12y ago

> 24. Wherever possible, use AngularJS versions of JavaScript functionality. So instead of setInterval, use the $interval service....It becomes easier to mock them or write unit tests I've always been very against these angular versions of basic js functions because it requires everyone on the team to learn them and it puts you even deeper into the angular lock in swamp, hindering you from eventually changing your view-framework in the future. Any takes on this? I like the data binding of angular but try to restrict angular coming in contact with "core" code. As example we hardly write any services, we just use them to hold an instance of plain js-classes that can easily be reused in non angular projects.

Bahamut 12y ago
Services such as $interval or $timeout are very simple - $http is also a fairly simple service to replace too. I don't really view it as much of an issue when it comes to lock in or migration, there are usually far more perilous pitfalls when it comes to lack of being able to migrate, such as bad app architecture or hacks.
mts_ 12y ago
Services like $timeout and $interval are basically just thin wrappers around their vanilla JS relatives(setTimeout and setInterval), there are more examples like this. The APIs look identical, some with a little added functionality - but the primary reason for the AngularJS wrappers is that they'll automatically call $scope.$apply() for you, so that you don't have to do it yourself.
serve_yay 12y ago
I agree with you. It doesn't matter how thin the wrappers are or whether they preserve the API, the problem is all code is supposed to call them. It's no problem to call $timeout in your Controller code or whatever, but what if you want to require a module that uses `setTimeout`? Either the module has to have some way of passing in the timeout function it should call, or you'd have to have a shim that monkey patches it or something.

delbel 12y ago

It'd be nice to see a UI Router cheat sheet in this format as well. I'm always forgetting nested syntax.

andyfleming 12y ago
I would avoid investing too much in UI Router. As soon as the new Angular 2 router is available, it should be used for Angular 1.x projects as well to support migration to Angular 2 in the future.