· Ignore all the cache in the diagram. They are just for the performance improvement. AngularJS can run and  work without them.
· No matter it’s Provider, or Service, Factory, Value, they are ALL kind of objects can be found in the traditional MVC Service Layer. The "subtle" difference is like difference between procedure and function. They are initialised when they are injected into other objects.
· ALL objects in service layer can be decorated, similar to Template Pattern used a lot in Spring modules.
· Controller, Directive (Custom Tag?), Filter are ALL objects and SAME concept in the traditional MVC Control Layer. They are required to be initiated when they are invoked (sounds like lazy loading?)
· ALL objects in Service and Control layers are injectable (as SAME as Spring).
· ALL objects in Service and Control layers are Singleton (as SAME as default Spring bean type is Singleton).
· You can’t use DI in constant or decorate a constant (don’t know how to do DI in a static final “constant” in Spring).
 
Honestly to say, I don’t see AngularJS has any breakthrough architecture design than the “OLD” Spring MVC and Spring IoC.
 
Read more:

· http://www.mikeobrien.net/blog/angular-consts-values-services-factories-and-providers-oh-my/

· http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/

AngularJS Diagram

Google+: View post on Google+

A constant can be injected everywhere. A constant can not be intercepted by a decorator, that means that the value of a constant can never be changed.
A value is nothing more than a simple injectable value. The value can be a string, number but also a function. Value differs from constant in that value can not be injected into configurations, but it can be intercepted by decorators.
A service is an injectable constructor. A service is a singleton and will only be created once by AngularJS. Services are a great way for communicating between controllers like sharing data.
A factory is an injectable function. A factory is a lot like a service in the sense that it is a singleton and dependencies can be specified in the function. The difference between a factory and a service is that a factory injects a plain function so AngularJS will call the function and a service injects a constructor. A constructor creates a new object so new is called on a service and with a factory you can let the function return anything you want. A factory is a provider with only a $get method.
A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated.
A provider is actually a configurable factory. The provider accepts an object or a constructor.

Embedded Link

demisx/angularjs-providers-explained.md
AngularJS Providers: Constant/Value/Service/Factory/Decorator/Provider – Gist is a simple way to share snippets of text and code with others.

Learning by doing is probably the most efficient way to learn

Embedded Link

Things I Wish I Were Told About Angular.js
Things I Wish I Were Told About Angular.js. 25 May 2013. Recently I have worked on a project using Angular.js. As of writing this post, it’s a medium sized app (~10 modules, ~20 controllers, ~5 services and ~10 directives) with quite decent test coverage. When I look back, I find myself learning …

Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic.

• It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves the testability of the code.
• It is a really, really good idea to regard app testing as equal in importance to app writing. Testing difficulty is dramatically affected by the way the code is structured.
• It is an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
• It is very helpful indeed if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing.
• It is always good to make common tasks trivial and difficult tasks possible.

JavaScript can be used like a classical language, but it also has a level of expressiveness which is quite unique.

Classical objects are hard. The only way to add a new member to a hard object is to create a new class. In JavaScript, objects are soft. A new member can be added to a soft object by simple assignment.

Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies. Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.

Embedded Link

Classical Inheritance in JavaScript
Classical Inheritance in JavaScript. Douglas Crockford · www.crockford.com. And you think you’re so clever and classless and free. — John Lennon. JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance.