I’ve been trying to figure out Angular JS for a little while but I don’t have a deep understanding of software engineering patterns or practices. My theory is that I haven’t been able to figure out the framework because I don’t understand the theory behind Angular’s design. The documentation on the website is thorough yet written like an engineering manual. It uses a lot of CS jargon that will explode your brain into a million pieces.

Here are some resources that helped me understand the “why” of Angular.

Angular JS Directives

• AngularJS directives and the computer science of JavaScript [Adobe]
• a directive is a way to  provide some custom behavior HTML. Commonly at the element or attribute level
  • <mydirectivelement> <span mydirectivename="">.
• Directives are like jQuery plugins – they are reusable UI components/widgets. Examples
  • autocomplete search box
  • dropdown menu
  • header toolbars
• Directives can be used as building blocks to create a UI. Use directives liberally.
• Separate your view code out using templateUrl instead of template inline if your HTML is going to be more than just a single line.
• When creating an reusable component use an ‘isolate‘ scope so that the component will not read or modify data of the parent scope.
• ‘isolate’ scope will isolate (verb) the component from others of the same type. Thus they will not share the same instance variables.
• question… Do ‘isolate’ and ‘transclude’ contradict each other?
  • Answer: No. Isolate and Transclude are unrelated. Transclude allows you to have HTML within your directive that will be preserved rather than being blown away when Angular replaces the directive’s placeholder with the actual rendered template code.
  • Angular JS Transclusion Basics video tutorial [egghead.io]

The Angular  documentation for directives is incredibly hard to understand. I do have a CS degree and I don’t understand half the terminology in it. Probably because I did poorly in school but that’s a story for another day.

Angular Service vs Factory vs Provider?

• Angular service or factory? [iffycan]
  • service and factory are convenience functions that result in a provider
• Angular JS service vs factory vs provider [Stack Overflow]
  • service returns a function that you can use later
  • factory returns a value
  • provider is the base class of the above 2 convenience functions.
• provider is configurable.
  • In jQuery terms it’s similar to how $.get() and $.post() are convenience functions to $.ajax(). $.ajax() can be configured to your exact specifications while the 2 subclasses are simpler to use.

Read Example Code

Angular Seed [github] is a very good starting point for your app. The Angular JS documentation website links to the source on github but the documentation does not push using the seed quite enough. I did not notice the Angular Seed for a long time while I was trying to understand how to use the framework .

Angular JS FoodMe [github] App by Igor Minar is a fully functioning Angular JS using best practices. This project is built off the Angular Seed. When you look at FoodMe and Angular Seed you will notice some commonalities. Studying FoodMe and Angular Seed together made things more salient for me.

Angular JS ToDo MVC [todomvc/github] has four variations of how Angular JS can be used to create a basic To-Do list application. I suggest looking at either the Architecture example or the Optimized example.