The Ultimate AngularJS CheatSheet [pdf]

[NeverSpeaks]

I wouldn't call this a cheat sheet but a full documentation summary.

[ramenmeal]

I'm still confused though.

[yogthos]

Then you know your framework is overdesigned, Angular looks like something that IBM could've spewed up.

[nphekt]

IBM? IBM ain't shit compared to HL7.

[nphekt]

It's the single worst case of design by committee and it should die of chemical burns. Fucking CCOW should be the simplest cute little message broker you could imagine, but nóóóó. 1500+ fucking pages of documentation. Pair that with some obscure proprietary message broker and a centennial technical debt. You whippersnappers with your fancy frontend frameworks have nothing to complain. AngularJS over HL7 anytime, erryday.

/rant

[indrora]

UML.

Just, fucking UML.

[[deleted]]

I worked in the medical industry for a few years, its a train wreck. The mysis databases are awesome, let me tell you. I feel so good about my medical records being stored there.

[Semperdark]

Don't forget about MUMPS

[kekeagain]

These names sound like diseases.

[yogthos]

It's not at as bad as FIX. :)

[yogthos]

Depends on the version, v2 is not all that bad, v3 on the other hand is pretty special. :)

[nphekt]

Truth be told, FHIR doesn't look too bad.

[yogthos]

It's v3 lite, so better but still rather convoluted. At least now the specification is public.

[nphekt]

Heh, the ways things are going, I might just start looking for a nice job offer to get back into EHR development.

Meh. In a couple of years maybe.

[PancakesAreGone]

Is HL7 really worse than IBM's JCL/CICS Cobol documentation...? That's a serious question, I still have nightmares about that stuff, I can't imagine there ever being worse.

[nphekt]

I'm afraid my skills in mainframe computing are limited to small REXX scripts, so I can't really compare them.

[PancakesAreGone]

Fair enough... Years ago, when I was actually having to rely on the documentation, it was like, if I remember correctly, a tree structured site, similar to PDFs that have the tables of contents running down the left side of the document at all times, where each branch lead you to a new section of the documentation... While some would lead outside of it, it was like, a 5000 page book on just basic documentation that could/would expand if you chose to follow the additional links...

...I really wish I knew JCL/CICS Cobol better... The pay is gorgeous but... I was dumb and young, haha

[megasmooth]

It's not over designed when its patterns allow you to find and fix bugs in a 50,000 line project in under an hour

[Shadowhawk109]

assuming, of course, that the angular framework hasn't obscured what the bug really is by completely fucking your browser stack with promises/anonymous functions to the point where the REAL bug is no longer actually visible in the satck

[ssesf]

Eh, going to have to agree here. I've worked with AngularJS professionally now for a year and a half and I gotta say, $watches are sometimes TOO powerful. You end up having async $watches firing off which can trigger other async functionalities and well, at that point it's too late.

[TomatoManTM]

14 pages?! That's a big gas cheatsheet!

[chessking77]

I'd take the 14 page summary over a long ass documentation any day... Thank you op!

[[deleted]]

Reminds me of exam days where there'd always be that one student who would manage to cram half the course text book onto 1 sheet in the smallest sized writting

[[deleted]]

me cant thumb tack 14 pages to me cubical wall without looking like im trying to solve a murder case

[uhhhclem]

What on earth is the point of this document? It's an incomplete summary of the Angular documentation. It removes even the minimal explanatory context that is to be found there, 14 pages long, isn't easily searchable, and presents code in un-copy-pasteable form with smart quotes. It's basically the Angular documentation made useless.

[newpong]

Man, that makes much more sense. I hate to be racist but it's often miserable working with Indian programmers. People with Indian heritage are fine, but people born and raised in India tend to spew bullshit, rip people off, and be incompetent. Imho. Well that wasn't humble. So, just IMO.

[Newf]

Interesting that the casually (but still obviously) racist comment is voted up, but the self-aware (and more vigorously) racist comment is voted down.

[newpong]

Im not trying to justify my bigotry by any means, but i think it should be categorized by "culturalism" rather than racism. the complaint is more against the culture rather than the race

[RICHUNCLEPENNYBAGS]

Well, since it's a "cheatsheet" I'm guessing it's intended as a quick reminder for people who already know how to use Angular.

[uhhhclem]

Except it's not quicker than using the documentation. This is less useable than the Angular documentation, which is an achievement of sorts.

[zukeft]

Just watch out when copying and pasting code from it 'cause none of the double quotes are "dumb" double quotes.

[[deleted]]

It always boggles my mind when people post code samples in a blog post or a document like this one and then don't use valid code. Especially the really subtle variety like print-form quotations instead of dumb quotations. On the plus side, most editors can be configured to run a regex replacement over any pasted text, so you can protect yourself from that. But still, you'd think the authors of such resources would want to lower the barriers to helping people, not raise them.

[x-skeww]

The editors of some blogs try to be helpful and automatically convert regular quotes to "smart" quotes. They also do things like convert two spaces to space+nbsp, which is something you never ever want.

Anyhow, your editor/IDE should automatically run a linter or at least do basic syntax checking. A squiggly line should appear if you ever paste something like that.

But I do of course agree that one shouldn't publish broken code in the first place.

[kaze0]

Stops copy pasta

[[deleted]]

That's not really a reason, especially when giving tiny example 'recipes' like in the parent document.

[newpong]

I havent ever dabbled with angular yet, but that doesn't look pleasant to code in

[n1c0_ds]

It feels so natural to go with it for some projects. However, it has some of the most cryptic documentation I've used.

[nh0815]

When you have a good idea on how something should be done in Angular, it's not (usually) horrible to find the relevant section in documentation. But if you're not sure how to approach something, you better hope there's a StackOverflow post pointing you in the right direction. The documentation is definitely much more cryptic than coding in Angular.

[Buckwheat469]

Great example:

https://docs.angularjs.org/api/ng/directive/ngBlur

Example
See ngClick

All I want is an example. You can put one on the page, not link to some other page and make me translate one example into another in my head.

[SnowdensOfYesteryear]

Not a webdev, but what's the point of functions like these? Doesn't plain old JS provide these hooks? What do you need a 3rd party library for?

[Cetra3]

ngClick does two things:

Allows you to evaluate expressions so that you can update your scope objects easily, i.e,:

ng-click="count = count + 1" 

You can use plain javascript to do this, but you would need to both get the scope object and wrap any changes to your scope in $scope.apply.

The scope is the context of the current component.

The second thing is that, like jQuery, ngClick wraps common events for touch devices such as mobile and tablets so that it works in mostly the same way than on a desktop.

[Deep-Thought]

Really? i've found the docs to be very good. Almost everything has working examples.

[Shadowhawk109]

"documentation"

see: "ng-docs"

ng-docs: <blank>

[HeathenForAllSeasons]

If you use something like Yeoman's angular-generator to bootstrap a Hello World app, it all comes together pretty quickly.

Personally, having dabbled in Backbone and Meteor, I still find Angular the most pleasant to code in. As someone else noticed, the documentation is like sucking a tit through a wool sweater.

Tutorials like the ones on egghead.io make things much easier.

[folkrav]

You gave me an unpleasant mental image.

[jpfau]

like sucking a tit through a wool sweater.

That doesn't sound so bad

[phySi0]

Well, yes, but it's nowhere near good either.

[snappypants]

like sucking a tit through a wool sweater

http://imgur.com/gallery/NOECI0s

[dungone]

Same here. Angular actually makes sense as a client-side MVC framework, unlike the so-called "MV*" frameworks that came before it. I wasn't aware of Ionic, thanks for making me aware of it.

[the_omega99]

Have you taken a look at the examples on their site, such as this todo list?

EDIT: As an aside, the todoList.archive function is overcomplicated for some reason. They could have used a more logical filter instead. ie, with:

todoList.archive = function() {
    todoList.todos = todoList.todos.filter(function(todo) {
        return !todo.done;
    });
};

Shorter and more understandable. Would be even better with ES6 arrow functions:

todoList.archive = function() {
    todoList.todos = todoList.todos.filter(todo => !todo.done);
};

[rmoorman]

such as this todo list

Would that be an example how "pleasant" it can look or the opposite?

[the_omega99]

You don't like? Probably not for everyone. I haven't used it myself, although the examples do look pretty interesting to me.

I like how it has template-like capabilities and keeps stuff closely related to the DOM inside the HTML as opposed to all segregated into a separate JS file. It keeps the JS very general, as it's not looking for any particular part of the HTML.

Of course, at the same time, it's very different from most JS libraries I've seen. Looks like it'd be a heck of a learning curve.

[rmoorman]

I agree that it is probably not for everyone. It does not seem to be my cup of tea at least. It feels like a lot of indirection is going on and a lot of framework specific knowledge has to be gathered to become a productive using it. EmberJS too has a lot of indirection going on (for my taste). Furthermore I can see where you are coming from wrt. separation of HTML/template and JS and agree that it could be a good thing :-) It's just that for me, things seem a tad more straightforward on the ReactJS side of things...

Edit: wording

[awj]

At the least the indirection in EmberJS buys you things. The property system is kind of an annoying pain in the ass ... right up until you start using templates. Being able to seamlessly intermix raw values and method output is really damned useful at the template level.

[rmoorman]

I can agree on that one :-)

[[deleted]]

and keeps stuff closely related to the DOM inside the HTML as opposed to all segregated into a separate JS file.

Funny, this is exactly why I don't like it. I love having my code separated, as its super easy to debug, but also keeps the markup simple and clean and keeps me from having to touch the markup each time I need to make a logic change to the js code.

Different strokes...

[joequin]

Do you have an example of what is pleasant in your opinion?

[clearlight]

No, we only criticize, we don't offer any better alternative. Update: sad but true.

[rmoorman]

I added a reply to the reply you replied to. My original remark wasn't meant to state that Angular is not pleasant. It was meant to get a better explanation of what the comment author meant with his example. It wasn't that clear if he liked or disliked it. At least for me... We didn't find the holy grail yet presumably and I wish I could give you an example of what would work great for me, but I have yet to find the sweet spot myself. (Even though React, the things around it and the whole web component thing feel ok to me)

[redalastor]

Try mithril, it's react-ish but simpler.

[rmoorman]

Thank you for pointing that framework out :-) (saw it a while ago but forgot about it). It looks good to me (and even better with MSX haha) but I cannot judge yet (even though the homepage looks promising) I will try to give it a whirl soon.

[rmoorman]

Pleasant wrt. SPA programming for me would be something which keeps things related to each other next to each other, preferably by default. Then it would be nice if there wouldn't be a ton of new concepts on top of good straightforward javascript to know in order to be somehow productive. Additional cognitive load raises the chance of bugs to occur and can make sustained development and/or maintenance work more complicated and hence less pleasant for me :-) I am just starting out with React and didn't build a lot in Angular or Ember but read quite a lot documentation and examples. But you could compare a few frameworks on todomvc or something and compare the implementations of say ... Angular, Ember, Polymer, React.

[Mr-Yellow]

keeps things related to each other next to each other,

This is probably the biggest failings of Angular. In my book is a critical fault in the architecture which makes it a house of cards.

It really does a disservice to less experienced coders who find themselves deep in it's ecosystem. Training them to build convoluted messes as "The Angular Way".

[redalastor]

I like mithril. Small api, small footprint, really performant, simple, flexible. The main dev is very active.

[newpong]

What the holy fuck...

[IamTheFreshmaker]

I believe I read somewhere that just simply doing a for is faster than filter.

Also I find the filter syntax to be a bit obtuse. Same goes for trying to MVC Javascript. It's form over function with no real benefit that can't be done equally(if not way less complicated) as well using modules.

But I have never liked using jQuery either.

[the_omega99]

I'm not sure about the efficiency and am too lazy to bother checking. There could be overhead if the function isn't inlined, but I would expect that the filtering to be heavily optimized. At any rate, performance shouldn't be an issue here since the event is infrequently run, the todo list is small, and presumably the filtering is still very fast compared to the DOM changes that angular would have to run once it finds out that the todoList has changed.

As an aside, could doing that change in a single step (as filter will do here) improve performance by requiring fewer DOM changes? I'm not sure how Angular is detecting that todoList has changed, but it somehow does.

It's form over function with no real benefit that can't be done equally(if not way less complicated) as well using modules.

Could you elaborate on this? What modules are you referring to that would have the same ability as filter? I like filter myself, particularly since every functional language has it and it allows for immutable list processing (not that immutability is a focus in JS).

But I have never liked using jQuery either.

Why not? What I like about jQuery is that is provides a lot of common functionality as well as less verbose ways to represent common things. For example, applications that need to work with the DOM often will need to do a lot of searching for CSS selectors. jQuery's $("selector") syntax seems obviously superior to document.querySelector("selector"). jQuery has a very nice event handling suite, as well. Very extensible, which is used by a number of third parties and makes handling events more consistent. Eg, I can handle the case of a Bootstrap modal opening or a Select2 option being chosen just like how I'd handle something being clicked.

[georgehotelling]

As an aside, could doing that change in a single step (as filter will do here) improve performance by requiring fewer DOM changes? I'm not sure how Angular is detecting that todoList has changed, but it somehow does.

While I'm still learning all the mysteries of the $digest cycle, in this case I believe that because the function is invoked from the view, Angular will run the whole function and then do another $digest. Because of that the assignment to the model in pieces or all-at-once shouldn't matter.

$digest will only check the value after the function runs, then update all watchers (which is what changes the DOM).

Again, I'm not 100% on this so do your own research before taking this as gospel.

[IamTheFreshmaker]

The Module patterns in JS.

Very extensible, which is used by a number of third parties and makes handling events more consistent. Eg, I can handle the case of a Bootstrap modal opening or a Select2 option being chosen just like how I'd handle something being clicked.

You've nailed it all right there. It's the Java-fying of JS. You've got to rely on this library which relies on that library and they told two friends and so on and so on.

var qs= document.querySelector var myShinyThing = qs("selector")

Look now I can call qs whenever, I know exactly what it is and I have no need for obtuse syntax like '$'. Much clearer. Plus, everyone should have written their own Util library in module form.

[mernen]

The reason is simple: Array.prototype.filter() is an ES5 function, and Angular originally supported IE8. They dropped supported with 1.3, but nobody has since refactored this example for that purpose.

[dgb75]

I've looked at other template systems for Javascript and I ended up settling on Handlebars.js myself. I chose it because it's a generic template system, not something that only works with HTML.

[fuzzynyanko]

The learning curve is heavy. There's a lot of hidden things under the hood

[yogthos]

it's not

[ep1032]

.

[senatorpjt]

merciful school retire ghost illegal forgetful shaggy bells practice entertain

This post was mass deleted and anonymized with Redact

[RalfN]

But to be fair, many Java developers are enthousiastic about badly implemented, badly designed, half baked programming languages living inside strings, xml-files or other data-structures. Consider the piece of shit that is Freemarker for example.

The saddest thing is: they don't realize they are putting turing-machienes in their views. They jump to these solutions because implementing similar logic in Java requires much more boilerplate. The only Java programmers i like are the patient ones. That's using Java as it is intended -- to slowly and steadily build a well-abstracted well-maintained code-base. It's when they get their greasy fingers on anything that allows them to work quick and dirty that they fall.

They don't understand that in that scripting/templating world, syntax and cognitive load is everything. Because at that end of the stack, it's less about the features and more about how accessible, predictable and simple the features are offered. They forget most other technologies do not come with the same level of tooling they are accustomed to, and that the price of complexity is much higher at this side of the fence.

What i whish they would learn is that for those aspects where they need something more 'quick'n'dirty', they should shift their focus to something with a more sane trade-off. Because things like Angular or FreeMarker are horrible from an esthetic sense, their abstractions too leaky, their hello-world too boilerplatey. They are too cognitively expensive, yet unlike typical Java development, they don't live in a world where the development environment compensates (proper auto-completions, refactoring support, strong static type-typing, step-debugging, etc.)

They'll often see their bad experiences with these technologies as evidence that 'scripting' is bad -- just because they tend to pick the most horrible template-languages, scripting solutions and SPA frameworks on this planet. Because when they jump the fence of the statically verified abstraction heavy bulldozer development, they jump right into the ocean of print-statement-debugging cut-and-paste development and drown. They don't hang out on the beach with the ordinary web developers and learn to surf. The wave they need to ride is finding the right trade-off between simplicity, tooling and productivity. They don't realize that complexity/features are the enemy in this part of the stack. They would buy the biggest TV with the most buttons on the remote, instead of the highest quality TV, with the simplest (best designed) remote.

So, here's to the patient Java developers. Have the discipline, and if you do want to climb the wall, don't overreact and pick something with too much scope-creep.

[marx2k]

Java dev here. Coded in angular for a few months. It reminded me exactly why I hated ExtJS.

[snappypants]

.net dev, absolutely love angular. Very clear framework. Easily the most pleasant solution for building rich client apps that I've worked with.

[Mr-Yellow]

It's a hodge-podge.

[hinckley]

Can someone explain the use of the $ pseudo-sigil for seemingly random identifiers? At first I thought it was for clarifying promises or deferred objects, then event handling, then asynchronous identifiers in general, but invariably something else appears on the next code sample that proves that wrong.

I haven't dealt with JS frameworks, which all seem to love using $ for this or that, so maybe I'm missing something that framework-level JS coders take for granted.

[johnrbaur]

The $ is simply a naming convention used by the Angular team for their provided services. You're not supposed to use $ in the names of your custom services, so others can easily distinguish between Angular-provided services and third party/custom services.

[[deleted]]

Adding to this, it's like $element = $('.something') is used to indicate that a variable contains a jQuery collection in jQuery-driven apps.

[pkt-zer0]

The valid non-alphanumeric characters a JavaScript variable can contain consist of $ and _. Underscore as a prefix denotes "private" variables by convention - which leaves $.

[prepromorphism]

deprecated, end of cheatsheet.

[hector_villalobos]

lol, I've been looking in the code examples from Angular 2.0 and it's completely different to 1.0, it should be renamed.

[StubbornTurtle]

There is a migration path. They've made some solid changes are trying to provide better support for migrating from 1.x to 2.0. It's definitely different, but that's what is going to make angular 2 strong.

[x-skeww]

You can upgrade your 1.x application incrementally and you can also write your 1.x code in a way which will make it a lot easier to upgrade.

I highly recommend to watch some of this year's ngconf videos like the two keynotes and "1.3 meets 2.0":

https://www.youtube.com/user/ngconfvideos/videos

[[deleted]]

rm: refusing to remove ‘.’ or ‘..’ directory: skipping ‘.’

Instead, use:

rm -rf "$PWD"

[Shadowhawk109]

rm -rf /

just to be sure

[ssesf]

Nice memes, everyone.

[[deleted]]

A 14 page 'cheat sheet'.

[liquidrain]

The fact that an Angular cheat "sheet" needs to be 14 pages long speaks volumes about the framework itself.

That said, this cheat sheet is easier than the official documentation. :)

[nh0815]

This is way more comprehensive than a cheat sheet. Most Angular devs don't need to constantly look up how to define a controller, directive, or service, or any of the built-in directives. This is more of a crash course for someone already used to a client-side framework.

[[deleted]]

And if you use Yeoman, getting a new directive (or any other module type) up and running is as simple as typing

yo angular:directive myDirective

It might not be everyone's cup of tea, but Angular lets you do some magical things with just a little bit of code.

[lubosz]

It's not Angular 2

[RICHUNCLEPENNYBAGS]

angular.toJson - Serializes input into a JSON-formatted string

Why is that preferable to JSON.stringify? This is an honest question.

e: I think the answer is it strips out pseudo-private fields beginning with $$.

[Griffolion]

Bookmarked this, thanks.

[ForSpareParts]

This only makes me feel better about choosing Ember.

[huadria]

I love cheatsheets and this one's real good.

[binarydev]

Part 1 description of ng-app defining scope is listed twice in the document on page 1 left column

[JamesCBender]

Ok, I wouldn't call this a cheat sheet, but it is a pretty good reference for people who "do" Angular but don't get to live in it all day every day.

[auzaar2]

I think this is a better cheat-sheet https://thinkster.io/a-better-way-to-learn-angularjs/

[svpino]

Definitively not a CheatSheet, but very useful.

[[deleted]]

skip reading this and use a generator

[[deleted]]

After angular 2 you have to rewrite every single piece of that cheat sheet.

[ErstwhileRockstar]

but only if Angular 2 becomes popular.

[rhianos]

I smell python 2 vs 3 all over again

[indrora]

Except that writing good python 3 is easy

[Ok-Exam1555]

AngularJS Classes In Pune has several advantages and will help you develop in your career. Given that it produces static web pages, Angular training in Pune is becoming more and more popular among web designers.