AngularJS Directives

Are you asking "why AngularJS?"? It's true there are bunch of young, chic, versions of Angular walking around out there, in their hip clothes with their wrinkle-free faces and their not-at-all-grey hair. But don't mistake youth with beauty! Old(er) things can still be beautiful. And what's more, older things often paved the way for the new, young things who now flaunt their stuff, and those older things left a mark on the world. A mark you might have to deal with. Enter: legacy code.

Sometimes you're going to have to play by the old foggy's rules because the old foggy wrote the rulebook.
If you walk into a gig unprepared for that, you might find yourself under water with legacy code that you need to work on but don't know where to begin. Get cozy with the fundamentals of AngularJS, and

1. you'll be ready for any legacy code you run into.
2. you'll understand the progressive change of the framework over time and better understand how it works and how to use it now (a lot of stuff is similar/hasn't changed)
3. plus (added bonus for free!) you'll appreciate the new, young stuff way more, when you see what you don't have to do because the framework is so improved now.

AngularJS Directives are one part of AngularJS worth exploring.
The shorthand version of directives is that they are like tiny, little commands that start with 'ng' and give your HTML superpowers.
AngularJS comes loaded with a handful of these directives, out of the box, and ready for you to use, with really simple and straightforward syntax. You just insert them into the template section of any component, and let Angular do magic for you.
One super handy directive is the 'ng-repeat' which will loop over an iterable for you, like this:

When Angular's compiler sweeps through the DOM and finds that ng-repeat, like magic, it will know that means you want to loop through the array wherever you insert the variable "coffee" into a template. Pretty neat, huh?
There are lot of other directives like:

1. ng-app--auto-bootstraps the app when the page is loaded and names the div element that it's attached to as "the boss" of the page.
2. ng-model--binds the HTML value that it's attached to (e.g.'input') to the application data.
3. ng-switch--lets you show/hide HTML elements based on a condition.
4. ng-click--built in click-handler
5. ng-conroller--tells AngularJS this is your controller in the MVC.

There are lots more too. They're quick and easy ways to make your HTML do all the cool things you want it to do, without a lot of the hassle of using raw HTML or JS to do so. Well worth getting to know how they work in AngularJS and versions of Angular beyond.