- Define and group Angular things (dependency injection stuff) in modules.
- Share data and wrap web server interaction in services.
- Extend HTML and do DOM manipulation in directives.
- make Controllers as "thin" as possible.
In general, a controller shouldn't try to do too much. It should contain only the business logic needed for a single view.
The most common way to keep controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in controllers via dependency injection. This is discussed in the Dependency Injection Services sections of this guide.
Do not use controllers for:
- Any kind of DOM manipulation — Controllers should contain only business logic. DOM manipulation—the presentation logic of an application—is well known for being hard to test. Putting any presentation logic into controllers significantly affects testability of the business logic. Angular offers databinding for automatic DOM manipulation. If you have to perform your own manual DOM manipulation, encapsulate the presentation logic in directives.
- Input formatting — Use angular form controls instead.
- Output filtering — Use angular filters instead.
- To run stateless or stateful code shared across controllers — Use angular services instead.
- To instantiate or manage the life-cycle of other components (for example, to create service instances).
To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service. Angular's dependency injection subsystem takes care of the rest. The Angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to factory functions as requested.
it is important to realize that all Angular services are application singletons. This means that there is only one instance of a given service per injector. Since Angular is lethally allergic to global state, it is possible to create multiple injectors, each with its own instance of a given service, but that is rarely needed, except in tests where this property is crucially important.
Services are a feature that Angular brings to client-side web apps from the server side, where services have been commonly used for a long time. Services in Angular apps are substitutable objects that are wired together using dependency injection (DI)
Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.
Factory method // http://docs.angularjs.org/guide/directive
The factory method is responsible for creating the directive. It is invoked only once, when the compiler matches the directive > for the first time. You can perform any initialization work here. The method is invoked using the $injector.invoke which makes it injectable following all of the rules of injection annotation.
var $compile = ...; // injected into your code
var scope = ...;
var html = '<div ng-bind="exp"></div>';
// Step 1: parse HTML into DOM element
var template = angular.element(html);
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the scope.
linkFn(scope);
If you are going to make DOM transformation, it should be compile if you want to add some features are behavior changes, it should be in link.
http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
http://stackoverflow.com/questions/11171778/difference-between-service-directive-and-module http://angularjs.org http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function-in-angularjs?lq=1
http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory