Difference between Services & Directives in Angular

Hello Ramco,
Please refer below.

Services

are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services
You can (and probably should) create custom services when
- two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data
- you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)
Built-in services start with '$'.
To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive).

Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot)

are responsible for updating the DOM when the state of the model changes
extend HTML vocabulary = teach HTML new tricks.
Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the
and
elements on the Angular home page demo "Creating Components".
- Non-obvious built-in directives (because they don't start with "ng"): a, form, input, script, select, textarea. Under Angular, these all do more than normal!
Directives allow you to "componentize HTML". Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives.
The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
- When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.
A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
- Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.

Thanks

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Jaimin Shethiya2y ago
Accepted answer
Hello Ramco,
Please refer below.

Services
- are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services
- You can (and probably should) create custom services when
  
  two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data
  
  you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)
- Built-in services start with '$'.
- To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive).
Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot)
- are responsible for updating the DOM when the state of the model changes
- extend HTML vocabulary = teach HTML new tricks.
  Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the and elements on the Angular home page demo "Creating Components".
  
  Non-obvious built-in directives (because they don't start with "ng"): a, form, input, script, select, textarea. Under Angular, these all do more than normal!
- Directives allow you to "componentize HTML". Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives.
- The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
  
  When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.
- A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
  
  Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.
Thanks